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.
1234567891011121314151617import { Collapsible } from "#components/ui/ark-ui/collapsible.tsx";import { Button } from "#components/ui/ark-ui/button.tsx";
export function Example() { return ( // the machine wires the trigger and animates the content; the content // slot is deliberately bare — style it freely via the style prop <Collapsible.Root defaultOpen> <Collapsible.Trigger asChild> <Button variant="surface">Show advanced options</Button> </Collapsible.Trigger> <Collapsible.Content> Custom domains, edge caching, and preview deployments. </Collapsible.Content> </Collapsible.Root> );}Install
1npx stylexblocks add collapsibleSource
components/ui/ark-ui/collapsible.tsx
12345678910111213141516171819202122232425262728293031323334353637383940414243444546import * as stylex from "@stylexjs/stylex";import { Collapsible as ArkCollapsible } from "@ark-ui/react/collapsible";import { createSlotRecipeContext } from "#lib/ark-ui/create-slot-recipe-context.tsx";import { defineSlotRecipe } from "#lib/recipe-props.ts";import { durations } from '@stylexblocks/ui/tokens/durations.stylex.ts'
const collapsibleContent = stylex.create({ base: { overflow: 'hidden', animationName: { default: null, ':is([data-open], [data-state="open"])': 'expand-height, fade-in', ':is([data-closed], [data-state="closed"])': 'collapse-height, fade-out', }, animationDuration: { default: null, ':is([data-open], [data-state="open"])': durations.moderate, ':is([data-closed], [data-state="closed"])': durations.moderate, }, },})
const collapsibleRecipe = defineSlotRecipe({ slots: { content: { styles: collapsibleContent }, }, defaultVariants: {},});
const { withContext } = createSlotRecipeContext(collapsibleRecipe);
/** * Collapsible — Ark's collapsible machine wearing the collapsible slot * recipe: trigger wiring, height animation hooks, and open state all come * from the machine. The content slot carries only the open/close height * animation — style the rest freely per use. Every part composes via * `asChild`. */export const Collapsible = { Root: ArkCollapsible.Root, Trigger: ArkCollapsible.Trigger, Content: withContext(ArkCollapsible.Content, "content", "CollapsibleContent"), Context: ArkCollapsible.Context, Indicator: ArkCollapsible.Indicator,};