Skip to contentVibraUI
Connect on X (@ekibuilds)Connect on X (@ekibuilds)
Get started
Navigation & layout

Collapsible

A trigger that shows and hides one panel.

shadcn's base-nova collapsible, unchanged — it draws nothing of its own, so the trigger and the panel look like whatever you put in them. It is published so that every primitive a Vibra block names comes from this registry. The trigger carries aria-expanded, and aria-controls while the panel shows. To animate the panel, time its height on --collapsible-panel-height with a motion token, as the Animated example does, and it stops with everything else when the reader asks for less motion.

Install

npx shadcn@latest add @vibra/collapsible

Needs the @vibra registry in your components.json — set it up once.

Examples

Icon that turns

An icon-only trigger with a fixed name. The chevron turns on the fast token, at once under reduced motion, and points the same way in either direction.

Animated

Options that fold open on the motion token, instantly for a reader who asked for less motion, with room kept for the focus outline while the panel clips.

Show more

Three of twelve, with the hidden count in the button's words. The rest are hidden until found, so find in page opens the list.

Settings group

Groups that say what they hold while shut: "3 of 4 on" is part of the trigger's name, and it counts again as a switch flips.

FAQ

Questions as headings. Up, Down, Home and End step between them, and find in page opens the answer it lands in.

Nested

A deploy that opens into its steps, and each step into its log. The step with a warning starts open.

Sidebar group

A nav group is a button, never a link. The group holding the current page starts open, and that page is marked current.

Props

PropTypeDefaultDescription
open / defaultOpenbooleanfalseWhether the panel shows: controlled, or where it starts.
onOpenChange(open: boolean) => void—Called when the trigger, or find in page, opens or shuts the panel.
CollapsibleTrigger.renderReact.ReactElement—Draws the trigger as another element, such as a kit Button; it keeps aria-expanded and aria-controls.
CollapsibleContent.hiddenUntilFoundbooleanfalseKeeps a shut panel in the page as hidden="until-found", so find in page reaches its text and opens it.

Dependencies

Registry

npm

Source

components/ui/collapsible.tsx
"use client"

import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"

function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) {
  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
}

function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) {
  return (
    <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
  )
}

function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) {
  return (
    <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
  )
}

export { Collapsible, CollapsibleTrigger, CollapsibleContent }