Collapsible

Collapsible is a simple expand/collapse primitive. It wraps a trigger and content; the trigger toggles whether the content is visible. Content visibility is controlled via CSS variables that track the expanded/collapsed height and width, enabling smooth animations.

Usage

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@loke/ui/collapsible';
import { ChevronDown } from 'lucide-react';
import { useState } from 'react';

export default function Example() {
  const [open, setOpen] = useState(false);

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <CollapsibleTrigger>
        <ChevronDown style={{ transform: open ? 'rotate(180deg)' : '' }} />
        Show details
      </CollapsibleTrigger>
      <CollapsibleContent>
        Details content here.
      </CollapsibleContent>
    </Collapsible>
  );
}

Sub-components

• CollapsibleTrigger — Interactive element that toggles the expanded state
• CollapsibleContent — Content that expands/collapses with CSS animations

Props

Examples

Controlled collapsible

Uncontrolled (starts open)

Accessibility

• Trigger has aria-expanded reflecting the open state.
• Content is semantically hidden when collapsed (not announced by screen readers).
• Keyboard: Space and Enter toggle the open state.

Best practices

• Use CSS variables --loke-collapsible-content-height and --loke-collapsible-content-width for smooth animations.
• Provide visual feedback (icon rotation, color change) via CSS.
• Keep trigger labels concise and descriptive.
• Avoid nesting collapsibles too deeply; consider Accordion for multiple sections.