Collapsible

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Release notes

View the changes shipped this week.

• Added keyboard shortcuts to the dashboard.
• Improved stability for large workspaces.
• Fixed invite links expiring too early.

Prop reference

Auto-generated from the component source

Collapsible

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof CollapsiblePrimitive.Root>

CollapsibleContent

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>

CollapsibleTrigger

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>

Code

// owner: Sona
"use client";

import * as React from "react";
import { ChevronsDownUp } from "lucide-react";

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

export default function CollapsibleExample() {
  const [open, setOpen] = React.useState(true);

  return (
    <Collapsible
      open={open}
      onOpenChange={setOpen}
      className="w-full max-w-lg space-y-2"
    >
      <div className="flex items-center justify-between">
        <div>
          <p className="text-sm font-medium">Release notes</p>
          <p className="text-xs text-muted-foreground">
            View the changes shipped this week.
          </p>
        </div>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="icon">
            <ChevronsDownUp className="size-4" />
          </Button>
        </CollapsibleTrigger>
      </div>
      <CollapsibleContent className="rounded-md border bg-muted/30 p-3 text-sm text-muted-foreground">
        • Added keyboard shortcuts to the dashboard.
        <br />• Improved stability for large workspaces.
        <br />• Fixed invite links expiring too early.
      </CollapsibleContent>
    </Collapsible>
  );
}

Collapsible

Component preview

On this page

Command Palette