Components
Loading preview...
Collapsible component from Interfaces DS — an expandable content panel with animated open and close states.
npx shadcn@latest add https://21st.dev/r/jshguo/interfaces-collapsibleimport { ChevronsUpDown } from "lucide-react"
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/interfaces-collapsible"
export default function CollapsibleDemo() {
return (
<Collapsible className="w-[350px] space-y-2">
<div className="flex items-center justify-between space-x-4 px-4">
<h4 className="text-sm font-semibold">@starred 3 repositories</h4>
<CollapsibleTrigger asChild>
<button className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground h-9 w-9 p-0">
<ChevronsUpDown className="h-4 w-4" />
<span className="sr-only">Toggle</span>
</button>
</CollapsibleTrigger>
</div>
<div className="rounded-md border px-4 py-3 font-mono text-sm">
@radix-ui/primitives
</div>
<CollapsibleContent className="space-y-2">
<div className="rounded-md border px-4 py-3 font-mono text-sm">
@radix-ui/colors
</div>
<div className="rounded-md border px-4 py-3 font-mono text-sm">
@stitches/react
</div>
</CollapsibleContent>
</Collapsible>
)
}