Structure

Collapsible

One trigger, one panel, a smooth height. Supports hidden-until-found.

Show code

"use client";

import {
  Collapsible,
  CollapsiblePanel,
  CollapsibleTrigger,
} from "@/registry/lilt/ui/collapsible";

export default function CollapsibleDemo() {
  return (
    <Collapsible className="w-full max-w-xs">
      <CollapsibleTrigger>Show 3 more projects</CollapsibleTrigger>
      <CollapsiblePanel>
        <ul className="flex flex-col gap-1">
          <li>mint-condition</li>
          <li>quiet-confetti</li>
          <li>penguin-parade</li>
        </ul>
      </CollapsiblePanel>
    </Collapsible>
  );
}

Installation

npx shadcn@latest add @lilt/collapsible

Accessibility

The trigger is a real button with aria-expanded and aria-controls wired automatically.
hiddenUntilFound lets browser find-in-page open the panel.