Collapsible React component for Tailwind CSS v4
v1.0.0Added in 1.0.0
A React collapsible section that opens and closes with a spring height animation, plus CollapsibleText, the show more clamp for long text.
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.
Collapsible is a Pro React component in the React layout components category, written in TypeScript for React 19 and Tailwind CSS v4. It installs as source with npx wingo-ui@latest add collapsible, together with Button, Motion presets, Tones, useControllableState and UIProvider and the npm packages @radix-ui/react-collapsible, motion and lucide-react.
Add to a project
Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup
npx wingo-ui@latest add collapsibleCollapsible is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans
Usage
Import Collapsible from @/components/ui/collapsible.
import { Truck } from "lucide-react"
import { Collapsible, CollapsibleText } from "@/components/ui/collapsible"
export function ListingDetails() {
return (
<div className="flex flex-col gap-4">
<CollapsibleText lines={3} moreLabel="Read more" lessLabel="Read less" className="text-sm leading-relaxed">
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.
</CollapsibleText>
<Collapsible
variant="outline"
icon={<Truck />}
title="Delivery details"
description="UPS, a parcel locker or local pickup"
>
<ul className="flex flex-col gap-2">
<li>Fast courier (UPS) · $19.99 · 1-2 days</li>
<li>Parcel locker · $12.99</li>
<li>Local pickup in Brooklyn · free</li>
</ul>
</Collapsible>
</div>
)
}Props
titledefault""ReactNodeThe row's label. The demo shows its sample while this is empty.
descriptiondefault""ReactNodeA second, quieter line under the title.
extradefault""ReactNodeTrailing content before the indicator: a count, a price, a badge. The demo shows the chosen delivery price while this is empty.
iconReactNodeA leading icon in a tinted tile (28 / 32 / 40px by size). The tile takes the tone while open.
triggerReactNodeYour 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.
childrenReactNodeThe content that opens and closes. Padding lives on an inner box, so the height animation never squashes it.
variantdefault"ghost""ghost" | "outline" | "soft"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.
sizedefault"md""sm" | "md" | "lg"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.
radiusdefault"md""none" | "sm" | "md" | "lg" | "full"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.
indicatordefault"chevron""chevron" | "plus" | "none"chevron turns 180 degrees on a snappy spring; plus folds its vertical bar into a minus.
indicatorPositiondefault"end""start" | "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.
tonedefault"neutral""neutral" | "brand" | "success" | "warning" | "danger" | "info"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.
colordefault""stringAny CSS color. Replaces the tone for the open icon tile and indicator. Leave empty to use the tone.
divideddefaultfalsebooleanA hairline between the row and the open content, like a card header.
defaultOpendefaultfalsebooleanStarts open when uncontrolled. Opening on first render skips the animation.
openbooleanControlled open state. Without onOpenChange it stays where you put it.
onOpenChange(open: boolean) => voidCalled with the next state when the row is pressed (or find in page opens a kept-mounted section).
disableddefaultfalsebooleanDims the row and blocks toggling. Content that is already open stays open.
keepMounteddefaultfalsebooleanKeeps 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.
classNamesPartial<Record<"trigger" | "icon" | "title" | "description" | "extra" | "indicator" | "content", string>>Extra classes for the parts. content styles the padded inner box of the animated region.
classNamestringExtra classes for the root (the container for outline and soft), merged last.
Parts
CollapsibleRoot
componentThe 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
componentThe 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
componentThe 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
componentThe 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
componentClamps 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
hookThe 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.
Dependencies
Files
- components/ui/collapsible.tsx
FAQ
Is the React Collapsible component free?
The preview, props and docs are free; copying the source needs a Pro plan. See plans.
How do I install Collapsible?
Run npx wingo-ui@latest add collapsible. It also adds the Wingo UI items it builds on (Button, Motion presets, Tones, useControllableState and UIProvider) and the npm packages @radix-ui/react-collapsible, motion and lucide-react. With shadcn, add the @wingo-ui registry with your API key, then run npx shadcn@latest add @wingo-ui/collapsible.
How does Collapsible behave on phones?
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.
