Components / Collapsible
Collapsible
An interactive component which expands/collapses a panel.
System Configuration
/src/tokens
colors.css
typography.css
<Collapsible open>
<div class="flex items-center justify-between px-4 py-2 hover:bg-slate-50 rounded-full group cursor-pointer" onclick="...">
<h4 class="text-lg font-serif italic text-slate-900">
System Configuration
</h4>
<CollapsibleTrigger class="p-2 rounded-full hover:bg-slate-900 hover:text-white transition-colors">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</CollapsibleTrigger>
</div>
<div class="px-6 text-sm font-mono text-slate-400">/src/tokens</div>
<CollapsibleContent class="space-y-1 px-4">
<div class="flex items-center gap-3 px-4 py-2.5 rounded-lg border bg-white shadow-sm">
<span class="font-mono text-sm text-slate-600">colors.css</span>
</div>
<div class="flex items-center gap-3 px-4 py-2.5 rounded-lg border bg-white shadow-sm">
<span class="font-mono text-sm text-slate-600">typography.css</span>
</div>
</CollapsibleContent>
</Collapsible> <!-- Root -->
<div data-state="open" class="w-full">
<!-- Header -->
<div class="flex items-center justify-between px-4">
<h4>...</h4>
<button type="button" class="...">
<svg>...</svg>
</button>
</div>
<!-- Content (Animated) -->
<div class="grid grid-rows-[1fr] transition-all duration-300 ease-spring">
<div class="overflow-hidden">
<div>...</div>
</div>
</div>
</div>