Collapsible
An interactive component that expands and collapses a panel.
@peduarte starred 3 repositories
@radix-ui/primitives
Installation
npx shadcn@latest add @uqudo/collapsibleUsage
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/uqudo/ui/collapsible"<Collapsible>
<CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
<CollapsibleContent>
Yes. Free to use for personal and commercial projects.
</CollapsibleContent>
</Collapsible>The parts are unstyled wrappers around the Radix Collapsible primitives. Use
asChild on the trigger to render a Button, and keep
anything that should always be visible outside of CollapsibleContent.
API Reference
Collapsible
Prop
Type
CollapsibleTrigger
Prop
Type
CollapsibleContent
Prop
Type
Data attributes
| Attribute | Element | Value |
|---|---|---|
data-slot | root | collapsible |
data-slot | trigger | collapsible-trigger |
data-slot | content | collapsible-content |
data-state | trigger/content | open or closed, set by Radix. |