Layout

Collapsible

One section that opens and closes.

import { Collapsible, CollapsibleTrigger, CollapsibleContent } from "@flinbu/seed";

Advanced settings

import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger, Switch } from "@flinbu/seed";
import { ChevronsUpDown } from "lucide-react";

const [open, setOpen] = React.useState(false);

<Collapsible open={open} onOpenChange={setOpen} className="w-full max-w-sm rounded-xl border border-secondary bg-primary p-sm">
  <CollapsibleTrigger asChild><Button variant="ghost" size="sm" rightIcon={<ChevronsUpDown />} className="w-full justify-between">Advanced settings</Button></CollapsibleTrigger>
  <CollapsibleContent>
    <div className="flex flex-col gap-sm px-xs pt-sm"><Switch label="Keep aliases when renaming" defaultChecked /><Switch label="Sync descriptions to Figma" /></div>
  </CollapsibleContent>
</Collapsible>

Use it for

Advanced settings, long details.

Use something else for

Several sections: use Accordion.

Props

Prop	Type	Default	Description
`open / defaultOpen / onOpenChange`	`boolean`	–	State.

Accessibility

Built on Radix Collapsible: the trigger reports aria-expanded and controls the content.