Collapsible

Show/hide a region of content.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@aspyn-io/kit";

Show more

aspyn-io/design-system
<Collapsible>
  <div className="rounded-md border px-4 py-2 text-sm">aspyn-io/design-system</div>
  <CollapsibleContent className="space-y-2">
    <div className="rounded-md border px-4 py-2 text-sm">aspyn-io/ui</div>
    <div className="rounded-md border px-4 py-2 text-sm">aspyn-io/api</div>
  </CollapsibleContent>
  <CollapsibleTrigger asChild>
    <Button variant="ghost" size="sm">Toggle 2 more</Button>
  </CollapsibleTrigger>
</Collapsible>

Notes

  • For accordion-style stacked sections with styling, use Accordion instead.