Components
- AccordionDone
- AlertDone
- Alert DialogDone
- Aspect RatioNo Change
- AvatarDone
- BadgeDone
- BreadcrumbDone
- ButtonDone
- Button GroupDone
- CalendarNo Change
- CardDone
- CarouselDone
- ChartNo Change
- CheckboxDone
- CollapsibleNo Change
- ComboboxDone
- CommandDone
- Context MenuDone
- Data TableDone
- Date PickerDone
- DialogDone
- DrawerDone
- Dropdown MenuDone
- EmptyNo Change
- FieldNo Change
- React Hook FormNo Change
- Hover CardDone
- InputDone
- Input GroupDone
- Input OTPDone
- ItemDone
- KbdDone
- LabelDone
- MenubarDone
- Navigation MenuDone
- PaginationDone
- PopoverDone
- ProgressDone
- Radio GroupDone
- ResizableNo Change
- Scroll AreaNo Change
- SelectDone
- SeparatorDone
- SheetDone
- SidebarNo Change
- SkeletonDone
- SliderDone
- SonnerDone
- SpinnerDone
- SwitchDone
- TableNo Change
- TabsDone
- TextareaDone
- ToastDone
- ToggleDone
- Toggle GroupDone
- TooltipDone
- TypographyDone
Collapsible
Primitive disclosure container that handles open and close state without imposing layout or styling. Ideal when you need to toggle dense content regions while keeping full control of the presentation.
Collapsible demo
Build Step Summary
Toggle the collapsed region to reveal the raw build logs while the summary stays visible.
Build #2487 completed in 3m21s on cluster-02.
Installation
pnpm dlx shadcn@latest add @omni/collapsible
Usage
import {
Collapsible,
CollapsibleTrigger,
CollapsibleContent,
} from "@/components/ui/collapsible"<Collapsible>
<CollapsibleTrigger>View logs</CollapsibleTrigger>
<CollapsibleContent>
{/* expanded content */}
</CollapsibleContent>
</Collapsible>