iconiq.

Collapsible

Accessible expand/collapse primitive built on Radix UI. Exports three composable parts — Collapsible, CollapsibleTrigger, and CollapsibleContent — for building FAQs, disclosure sections, and nested navigation.

Live preview

Match sheet
Phase
Build-up → BreakLive

Midfield

Press, recycle, stay compact.

Last line

One ball behind the line.

Keyboard

Tab in — same note.

Install

v0

Send the registry bundle to v0 to scaffold FAQ sections, navs, or custom disclosure patterns with prompts.

Usage

Import the three composable parts and wire them together. The chevron rotation uses the data-state attribute that Radix sets on the trigger.

tsx
import { ChevronsUpDown } from "lucide-react";
import { useState } from "react";
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@/components/ui/collapsible";

// CollapsibleContent animates height + opacity automatically via
// Framer Motion spring physics. No extra setup needed.
export function BillingCard() {
  const [open, setOpen] = useState(true);

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <div className="flex items-center justify-between mb-3">
        <span className="font-semibold text-base">Pro Plan</span>
        <CollapsibleTrigger className="flex size-8 items-center justify-center rounded-full bg-neutral-100 hover:bg-neutral-200">
          <ChevronsUpDown className="size-4 text-neutral-500" />
        </CollapsibleTrigger>
      </div>

      {/* Always visible */}
      <div className="rounded-xl border px-4 py-3">
        <div className="flex items-center justify-between">
          <span className="text-muted-foreground text-sm">Monthly cost</span>
          <span className="font-semibold text-sm">$29 / mo</span>
        </div>
      </div>

      {/* Animated collapsible details */}
      <CollapsibleContent className="mt-2 flex flex-col gap-2">
        <div className="rounded-xl border px-4 py-3">
          <p className="text-muted-foreground text-xs">Next billing</p>
          <p className="mt-0.5 font-semibold text-sm">May 1, 2026</p>
        </div>
        <div className="rounded-xl border px-4 py-3">
          <p className="text-muted-foreground text-xs">Payment method</p>
          <p className="mt-0.5 font-semibold text-sm">Visa ••••4242</p>
        </div>
        <div className="rounded-xl border px-4 py-3">
          <p className="text-muted-foreground text-xs">Seats used</p>
          <p className="mt-0.5 font-semibold text-sm">5 of 10</p>
        </div>
      </CollapsibleContent>
    </Collapsible>
  );
}

API & dependencies

Three named exports: Collapsible, CollapsibleTrigger, CollapsibleContent.

Collapsible

Root component. Accepts open and onOpenChange for controlled state, or works uncontrolled. Renders a Radix CollapsiblePrimitive.Root with a data-slot="collapsible" attribute.

CollapsibleTrigger

Button that toggles the open state. Receives data-state="open" or data-state="closed" so you can target it with Tailwind variants for icon rotation or color changes.

CollapsibleContent

Conditionally rendered content area. Radix handles mount/unmount and adds data-state for CSS-based height animations. Use animate-collapsible-down / animate-collapsible-up from your globals.

radix-ui

Peer dependency that provides accessible open/close state management, keyboard navigation, and ARIA attributes. The shadcn CLI adds it automatically.

shadcn registry

Only peer dependency is radix-ui.

npx shadcn@latest add https://iconiqui.com/r/collapsible.json