All components
Collapsible
Show and hide a region of content behind a trigger, with a bare content slot to style freely.
Custom domains, edge caching, and preview deployments are configured per environment.
Install
zsh — collapsible
1bunx stylexblocks add collapsibleUsage — Base UI
collapsible.tsx
1234567891011121314151617import { Collapsible } from "#components/ui/base-ui/collapsible.tsx";import { Button } from "#components/ui/base-ui/button.tsx";
export function Example() { return ( // the engine wires the trigger and animates the panel; the panel slot is // deliberately bare — style it freely via the style prop <Collapsible.Root defaultOpen> <Collapsible.Trigger render={<Button variant="surface" />}> Show advanced options </Collapsible.Trigger> <Collapsible.Panel> Custom domains, edge caching, and preview deployments. </Collapsible.Panel> </Collapsible.Root> );}