# Collapsible > A React collapsible section that opens and closes with a spring height animation, plus CollapsibleText, the show more clamp for long text. - Type: React component (Layout) - Access: Pro (the source needs a Wingo UI Pro plan, see https://wingo-ui.com/pricing) - Version: 1.0.0 - Install: `npx wingo-ui@latest add collapsible` - Docs: https://wingo-ui.com/components/collapsible ## Interaction Click or tap anywhere on the row, or Tab to it and press Enter or Space, and the content slides open on a spring while the chevron turns and its round well fills with the tone; press again to fold it away, quicker than it opened. Inside outline and soft containers the row tints on hover and while pressed; a ghost row tints only the well. Rows are at least 44px tall at every size, so they are easy to hit on a phone. Long text shows three lines with the last one fading out and a Show more link under it (a 44px touch area on phones); the link only appears when the text really overflows, and collapsing scrolls the text back into view. With keepMounted the closed content stays in the page, so a half-filled form keeps its values and the browser's find in page opens the section on a match. With reduced motion the height changes at once and only the opacity eases. ## Installation ```bash npx wingo-ui@latest add collapsible ``` Pro item: run `npx wingo-ui@latest login` once with a Pro account. The CLI adds the files, their dependencies and a version record for updates. With shadcn: `npx shadcn@latest add @wingo-ui/collapsible` (needs the @wingo-ui registry with your API key in components.json) Files: - `components/ui/collapsible.tsx` npm dependencies: `npm i @radix-ui/react-collapsible motion lucide-react` Wingo UI dependencies (installed automatically): - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [Tones](https://wingo-ui.com/components/tones) ([Markdown](https://wingo-ui.com/components/tones.md)) - [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md)) - [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md)) ## Usage ```tsx import { Truck } from "lucide-react" import { Collapsible, CollapsibleText } from "@/components/ui/collapsible" export function ListingDetails() { return (
Linus Roadster city bike, aluminum frame size M, a 7-speed Shimano Nexus hub and brakes serviced last month. Only used for the commute and always kept in the garage. } title="Delivery details" description="UPS, a parcel locker or local pickup" >
) } ``` ## Props | Prop | Type | Default | Description | | --- | --- | --- | --- | | `title?` | `ReactNode` | `""` | The row's label. The demo shows its sample while this is empty. | | `description?` | `ReactNode` | `""` | A second, quieter line under the title. | | `extra?` | `ReactNode` | `""` | Trailing content before the indicator: a count, a price, a badge. The demo shows the chosen delivery price while this is empty. | | `icon?` | `ReactNode` | | A leading icon in a tinted tile (28 / 32 / 40px by size). The tile takes the tone while open. | | `trigger?` | `ReactNode` | | Your own trigger element instead of the built-in row, rendered with asChild (a Button, a sidebar item). Put a CollapsibleIndicator inside it for the turning chevron. | | `children?` | `ReactNode` | | The content that opens and closes. Padding lives on an inner box, so the height animation never squashes it. | | `variant?` | `"ghost" \| "outline" \| "soft"` | `"ghost"` | ghost is the flush row with no container, for panels and sidebars. outline draws a hairline rounded container, soft a tinted one; both inset the row and the content by the same padding. | | `size?` | `"sm" \| "md" \| "lg"` | `"md"` | Row height 44 / 52 / 60px with titles of 14 / 15 / 16px and matching icon tiles, padding and content text. Even sm stays a full 44px touch target. | | `radius?` | `"none" \| "sm" \| "md" \| "lg" \| "full"` | `"md"` | Container corners for outline and soft: 12 / 16 / 24px, full falls back to lg. On a ghost row it shapes the focus outline with the button's per-size radii. | | `indicator?` | `"chevron" \| "plus" \| "none"` | `"chevron"` | chevron turns 180 degrees on a snappy spring; plus folds its vertical bar into a minus. | | `indicatorPosition?` | `"start" \| "end"` | `"end"` | end puts the indicator after the title. start makes the chevron a disclosure arrow that points right (left in RTL) and turns down when open, and indents the content so it lines up with the title. | | `tone?` | `"neutral" \| "brand" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Tints the icon tile and the indicator's round well while open. neutral goes from a gray icon to a full foreground one on a slightly darker tint. | | `color?` | `string` | `""` | Any CSS color. Replaces the tone for the open icon tile and indicator. Leave empty to use the tone. | | `divided?` | `boolean` | `false` | A hairline between the row and the open content, like a card header. | | `defaultOpen?` | `boolean` | `false` | Starts open when uncontrolled. Opening on first render skips the animation. | | `open?` | `boolean` | | Controlled open state. Without onOpenChange it stays where you put it. | | `onOpenChange?` | `(open: boolean) => void` | | Called with the next state when the row is pressed (or find in page opens a kept-mounted section). | | `disabled?` | `boolean` | `false` | Dims the row and blocks toggling. Content that is already open stays open. | | `keepMounted?` | `boolean` | `false` | Keeps the closed content in the DOM, collapsed to 0 and hidden="until-found": forms keep their values, search engines see the text, and find in page opens the section. | | `classNames?` | `Partial>` | | Extra classes for the parts. content styles the padded inner box of the animated region. | | `className?` | `string` | | Extra classes for the root (the container for outline and soft), merged last. | ## Parts ### CollapsibleRoot (component) The parts API: the root that holds the state and draws the container. Takes open, defaultOpen, onOpenChange, variant, size, radius, indicator, indicatorPosition, tone, color, divided, keepMounted and disabled, and shares them with its parts. The simple Collapsible is built from these parts. Props: CollapsibleRootProps. ### CollapsibleTrigger (component) The full-width row with the title as children, or your own element with asChild. Enter and Space toggle; aria-expanded and aria-controls come from Radix. Props: { icon?: ReactNode; description?: ReactNode; extra?: ReactNode; asChild?: boolean; children: ReactNode }. ### CollapsibleContent (component) The animated region. className goes to the padded inner box; the other props go to the wrapper whose height animates. keepMounted overrides the root's. Props: ComponentProps<"div"> & { keepMounted?: boolean }. ### CollapsibleIndicator (component) The turning chevron or plus on its own, for custom triggers. Unsized, it follows a Button's icon size. Props: { kind?: "chevron" | "plus" | "none"; position?: "start" | "end" }. ### CollapsibleText (component) Clamps long text to lines (default 3; 0 turns the clamp off) and springs to the full height. It measures the text, so short text gets no toggle, and re-measures when the text or width changes. fade (default true) fades the last line. The toggle is a small link Button ("Show more" / "Show less" by default) with aria-expanded and a 44px touch area; collapsing scrolls the text back into view if its start went off screen. Props: { lines?: number; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void; moreLabel?: string; lessLabel?: string; fade?: boolean; classNames?: { body?: string; toggle?: string } }. ### useCollapsible (hook) The nearest collapsible's state, e.g. to swap a custom trigger's label. Signature: () => { open: boolean; setOpen: (open: boolean) => void }. ## Examples - **Show more text**: CollapsibleText measures the text: 2, 3 or 5 lines, and no toggle when it already fits. - **Variants**: ghost for panels and sidebars, outline and soft when the section needs its own container. - **Plus at the start**: indicator="plus" with indicatorPosition="start": the bar folds into a minus and the answer lines up with the question. - **Advanced filters**: extra holds a Badge that counts the active filters, divided draws the header line, the fields use the field recipe. - **Sidebar section**: A custom trigger with CollapsibleIndicator inside; the sub-links hang off a guide line. - **Keeps its state**: keepMounted: type, close, reopen, and the values are still there. - **Sizes, tones and a custom color**: sm, md and lg; the icon tile takes the tone (or any color) while open. Brand orange stays opt-in. ## See also - [Accordion](https://wingo-ui.com/components/accordion) ([Markdown](https://wingo-ui.com/components/accordion.md)) - [Button](https://wingo-ui.com/components/button) ([Markdown](https://wingo-ui.com/components/button.md)) - [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md)) - [useControllableState](https://wingo-ui.com/components/use-controllable-state) ([Markdown](https://wingo-ui.com/components/use-controllable-state.md)) --- Canonical: https://wingo-ui.com/components/collapsible More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt