Section
Stripe PageModule / AccordionThe block every page is built from: a semibold heading with an optional grey count, quiet teal text actions on the right, a hairline, then the content on the canvas — no box. collapsible turns it into an accordion whose heading toggles it.
With actions, and collapsible
Rules 2
Messages sent when something happens.
When to use
- Grouping content on a record page or settings page.
- Optional detail such as Metadata: collapsible, closed by default.
Not for
- Wrapping a page's main content in a card.
Props
| Prop | Type | Description |
|---|---|---|
| title | ReactNode | The heading. |
| description | ReactNode | One grey line under the heading. |
| count | number | A grey count after the title. |
| actions | ReactNode | SectionAction / SectionLink text links. |
| collapsible | boolean Default false | The heading toggles the content. |
| defaultOpen | boolean Default true | Starting state when uncontrolled. |
| open / onOpenChange | boolean / (open) => void | Controlled state. |
| contentClassName | string | Classes on the content wrapper. |
| className | string | Extra classes on the outer element. |