PrimitiveAvailable

Collapsible

A single disclosure region controlled by a button.

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/collapsible.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from '@/components/ui/collapsible';
import { Button } from '@/components/ui/button';

export default function Demo() {
  return (
    <Collapsible className="w-full max-w-md rounded-lg border-2 border-ink bg-card p-5">
      <CollapsibleTrigger render={<Button variant="outline" />}>
        Show package files
      </CollapsibleTrigger>
      <CollapsibleContent className="pt-4">
        <ul className="grid gap-2 bl-type-code">
          <li>button.tsx</li>
          <li>utils.ts</li>
          <li>theme.css</li>
        </ul>
      </CollapsibleContent>
    </Collapsible>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Check rest, hover, focus and selection/expansion. Current links and open content must be identified semantically.
Hover is not selection. Keep the active state when the pointer leaves.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
defaultOpen	boolean	false	Initial expanded state.

Accessibility

Rules that should remain intact when adapting the component to a product.

Keep the primitive trigger and panel relationship so expanded state is announced.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.