CollapsibleSettings() — ui Function Reference

Architecture documentation for the CollapsibleSettings() function in collapsible-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ CollapsibleSettings() — ui Function Reference

Dependency Diagram

graph TD
  bb727e8a_c045_ea8c_7e84_cdcc80f6e027["CollapsibleSettings()"]
  43d7b4a6_7d50_c823_b40b_0ea6351e2799["collapsible-example.tsx"]
  bb727e8a_c045_ea8c_7e84_cdcc80f6e027 -->|defined in| 43d7b4a6_7d50_c823_b40b_0ea6351e2799
  style bb727e8a_c045_ea8c_7e84_cdcc80f6e027 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/collapsible-example.tsx lines 169–241

function CollapsibleSettings() {
  const [isOpen, setIsOpen] = React.useState(false)

  return (
    <Example title="Settings" className="items-center">
      <Card className="mx-auto w-full max-w-xs" size="sm">
        <CardHeader>
          <CardTitle>Radius</CardTitle>
          <CardDescription>
            Set the corner radius of the element.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Collapsible
            open={isOpen}
            onOpenChange={setIsOpen}
            className="flex items-start gap-2"
          >
            <FieldGroup className="grid w-full grid-cols-2 gap-2">
              <Field>
                <FieldLabel htmlFor="radius-x" className="sr-only">
                  Radius X
                </FieldLabel>
                <Input id="radius" placeholder="0" defaultValue={0} />
              </Field>
              <Field>
                <FieldLabel htmlFor="radius-y" className="sr-only">
                  Radius Y
                </FieldLabel>
                <Input id="radius" placeholder="0" defaultValue={0} />
              </Field>
              <CollapsibleContent className="col-span-full grid grid-cols-subgrid gap-2">
                <Field>
                  <FieldLabel htmlFor="radius-x" className="sr-only">
                    Radius X
                  </FieldLabel>
                  <Input id="radius" placeholder="0" defaultValue={0} />
                </Field>
                <Field>
                  <FieldLabel htmlFor="radius-y" className="sr-only">
                    Radius Y
                  </FieldLabel>
                  <Input id="radius" placeholder="0" defaultValue={0} />
                </Field>
              </CollapsibleContent>
            </FieldGroup>
            <CollapsibleTrigger
              render={<Button variant="outline" size="icon" />}
            >
              {isOpen ? (
                <IconPlaceholder
                  lucide="MinimizeIcon"
                  tabler="IconMinimize"
                  hugeicons="MinusSignIcon"
                  phosphor="MinusIcon"
                  remixicon="RiSubtractLine"
                />
              ) : (
                <IconPlaceholder
                  lucide="MaximizeIcon"
                  tabler="IconMaximize"
                  hugeicons="PlusSignIcon"
                  phosphor="PlusIcon"
                  remixicon="RiAddLine"
                />
              )}
            </CollapsibleTrigger>
          </Collapsible>
        </CardContent>
      </Card>
    </Example>
  )
}