Layout

Collapsible

Two-state container that hides or reveals content. Use for FAQs, accordions.

Preview

'use client';

import { Button } from '@brika/clay/components/button';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@brika/clay/components/collapsible';
import { ChevronDownIcon } from 'lucide-react';

/** Basic collapsible, trigger toggles content visibility, no controlled state needed. */
export default function CollapsibleDefaultDemo() {
  return (
    <Collapsible className="w-full max-w-sm space-y-2">
      <CollapsibleTrigger asChild>
        <Button variant="outline" className="w-full justify-between">
          Show team members
          <ChevronDownIcon className="size-4 shrink-0 text-clay-subtle" />
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent className="rounded-md border border-clay-hairline bg-clay-base p-3 text-clay-default text-sm">
        <ul className="space-y-1">
          <li>Alice, Engineering</li>
          <li>Bob, Design</li>
          <li>Carol, Product</li>
        </ul>
      </CollapsibleContent>
    </Collapsible>
  );
}

01 Installation

Install

Pull Collapsible from the barrel for everyday use, or the granular path when you want a tighter bundle.

tsxBarrel1 line

import { Collapsible } from "@brika/clay";

tsxGranular1 line

import { Collapsible } from "@brika/clay/components/collapsible";

02 Usage

A minimal example

Drop this into a page. Native HTML attributes pass through to the underlying primitive.

tsxCollapsible.tsx30 lines

'use client';

import { Button } from '@brika/clay/components/button';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@brika/clay/components/collapsible';
import { ChevronDownIcon } from 'lucide-react';

/** Basic collapsible, trigger toggles content visibility, no controlled state needed. */
export default function CollapsibleDefaultDemo() {
  return (
    <Collapsible className="w-full max-w-sm space-y-2">
      <CollapsibleTrigger asChild>
        <Button variant="outline" className="w-full justify-between">
          Show team members
          <ChevronDownIcon className="size-4 shrink-0 text-clay-subtle" />
        </Button>
      </CollapsibleTrigger>
      <CollapsibleContent className="rounded-md border border-clay-hairline bg-clay-base p-3 text-clay-default text-sm">
        <ul className="space-y-1">
          <li>Alice, Engineering</li>
          <li>Bob, Design</li>
          <li>Carol, Product</li>
        </ul>
      </CollapsibleContent>
    </Collapsible>
  );
}

03 Examples

Collapsible, every way

Animated

Chevron rotates on open using `data-[state=open]`, wire it to the trigger via `group`.

GitHub

'use client';

import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@brika/clay/components/collapsible';
import { ChevronDownIcon } from 'lucide-react';

/** Chevron rotates on open using `data-[state=open]`, wire it to the trigger via `group`. */
export default function CollapsibleAnimatedDemo() {
  return (
    <Collapsible className="w-full max-w-sm space-y-2">
      <CollapsibleTrigger className="group flex w-full items-center justify-between rounded-md border border-clay-hairline bg-clay-elevated px-4 py-2 text-clay-default text-sm font-medium hover:bg-clay-control">
        Advanced options
        <ChevronDownIcon className="size-4 shrink-0 text-clay-subtle transition-transform group-data-[state=open]:rotate-180" />
      </CollapsibleTrigger>
      <CollapsibleContent className="rounded-md border border-clay-hairline bg-clay-base p-3 text-clay-default text-sm">
        <p>Enable debug mode, set environment variables, and configure timeouts here.</p>
      </CollapsibleContent>
    </Collapsible>
  );
}

Controlled

Controlled collapsible, manage open state with `open` and `onOpenChange`.

GitHub

'use client';

import { Button } from '@brika/clay/components/button';
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@brika/clay/components/collapsible';
import { useState } from 'react';

/** Controlled collapsible, manage open state with `open` and `onOpenChange`. */
export default function CollapsibleControlledDemo() {
  const [open, setOpen] = useState(false);

  return (
    <div className="w-full max-w-sm space-y-3">
      <div className="flex items-center justify-between">
        <span className="text-clay-default text-sm font-medium">Filters</span>
        <Button variant="ghost" size="sm" onClick={() => setOpen((v) => !v)}>
          {open ? 'Collapse' : 'Expand'}
        </Button>
      </div>
      <Collapsible open={open} onOpenChange={setOpen}>
        <CollapsibleTrigger className="sr-only">Toggle filters</CollapsibleTrigger>
        <CollapsibleContent className="rounded-md border border-clay-hairline bg-clay-base p-3 text-clay-default text-sm">
          <ul className="space-y-1">
            <li>Status: Active</li>
            <li>Date range: Last 30 days</li>
            <li>Owner: All</li>
          </ul>
        </CollapsibleContent>
      </Collapsible>
    </div>
  );
}

04 Accessibility

Accessibility

Trigger carries aria-expanded automatically, no extra markup needed.
Content carries aria-hidden when collapsed so AT skips it entirely.
Animate height via CSS overflow-hidden + transition, not display:none, to preserve AT semantics.

05 API reference

API reference

Props specific to Collapsible. Native HTML attributes pass through to the underlying primitive, see the component source on GitHub for the full type signature.

<Collapsible />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<CollapsibleContent />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.

<CollapsibleTrigger />

passthrough

No wrapper-specific props, all attributes pass through to the underlying primitive.