Collapsible

Simple show/hide toggle via Radix UI

Default

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@tryvienna/ui'

<Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-80 space-y-2">
  <div className="flex items-center justify-between rounded-md border px-4 py-2">
    <h4 className="text-sm font-semibold">3 items</h4>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="icon-sm">
        <ChevronsUpDownIcon />
        <span className="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <div className="rounded-md border px-4 py-2 text-sm">Always visible</div>
  <CollapsibleContent className="space-y-2">
    <div className="rounded-md border px-4 py-2 text-sm">Hidden item 1</div>
    <div className="rounded-md border px-4 py-2 text-sm">Hidden item 2</div>
  </CollapsibleContent>
</Collapsible>

Examples

Default

Default

<Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-80 space-y-2">
  <div className="flex items-center justify-between rounded-md border px-4 py-2">
    <h4 className="text-sm font-semibold">3 items</h4>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="icon-sm">
        <ChevronsUpDownIcon />
        <span className="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <div className="rounded-md border px-4 py-2 text-sm">Always visible</div>
  <CollapsibleContent className="space-y-2">
    <div className="rounded-md border px-4 py-2 text-sm">Hidden item 1</div>
    <div className="rounded-md border px-4 py-2 text-sm">Hidden item 2</div>
  </CollapsibleContent>
</Collapsible>

API Reference

Collapsible

Also accepts all props from CollapsiblePrimitive.Root.

CollapsibleTrigger

Also accepts all props from CollapsiblePrimitive.CollapsibleTrigger.

CollapsibleContent

Also accepts all props from CollapsiblePrimitive.CollapsibleContent.

Data Attributes

Component	data-slot
Collapsible	"collapsible"
CollapsibleTrigger	"collapsible-trigger"
CollapsibleContent	"collapsible-content"