One disclosure: a title row with a toggle, an always-visible summary and a region that opens beneath it.
Collapsible shows the first part of something and keeps the rest a click away: the first of several items, advanced options, a long note. The summary stays visible whether open or closed; children open beneath it.
The region animates its height on a grid-row transition and is inert while closed. Control it with open and onOpenChange, or leave it uncontrolled with defaultOpen.
Installation
npx shadcn@latest add KezLahd/rime/collapsibleAlso installs: base, icon.
Usage
import { Collapsible } from "@/components/ui";
<Collapsible title="Jane Cooper starred 3 projects" summary={<Row>north-office/website</Row>}>
<Row>north-office/brand-refresh</Row>
<Row>north-office/quarterly-report</Row>
</Collapsible>Examples
Open, with a summary
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
Collapsible
| Prop | Type | Default | Description |
|---|---|---|---|
| titleRequired | ReactNode | The trigger's text. A chevron button sits at its right. | |
| summary | ReactNode | Shown whether open or closed, under the trigger row (the first item of a list, say). | |
| childrenRequired | ReactNode | ||
| open | boolean | ||
| defaultOpen | boolean | false | |
| onOpenChange | (open: boolean) => void | ||
| toggleLabel | string | Accessible name for the icon trigger. Defaults to "Show more" / "Show less". | |
| className | string |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
| Token | Default | Live value |
|---|---|---|
| --collapsible-width | min(380px, 100%) | … |
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --dur | tokens.css | … |
| --dur-slow | tokens.css | … |
| --ease | tokens.css | … |
| --ease-out | tokens.css | … |
| --focus-ring | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-muted | tokens.css | … |
| --r-sm | tokens.css | … |
| --text-small | tokens.css | … |
| --wash-active | tokens.css | … |
| --wash-subtle | tokens.css | … |
Accessibility
- The toggle is a button with aria-expanded and aria-controls pointing at the region; its name switches between "Show more" and "Show less" unless toggleLabel is given.
- The closed region is inert, so its content is out of the tab order and the accessibility tree.
Do and don't
Do
- Use it for one disclosure; use Accordion for a list of them.
Don't
- Don't put the only copy of an error or a required field inside a closed Collapsible.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open collapsible.mdRelated: accordion