Skip to content
New

Collapsible

Shows or hides one section under its trigger, with the same height animation as Accordion.

@naruto starred 3 repositories
rasengan-dev/rasengan
rasengan-dev/rasengan-ui
rasengan-dev/sharingan

Installation

Terminal
npx rasengan-ui add collapsible

Or with the shadcn CLI, from the registry:

Terminal
npx shadcn@latest add https://ui.rasengan.dev/r/base/collapsible.json

Usage

app/details.tsx
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 
export function Details() {
  return (
    <Collapsible>
      <CollapsibleTrigger render={<Button variant="ghost" size="sm" />}>Show details</CollapsibleTrigger>
      <CollapsibleContent>Built 2 minutes ago from main.</CollapsibleContent>
    </Collapsible>
  );
}

Villages

Only the trigger and the content are styled by you; the panel's height follows the village's motion.

Konoha · light
@naruto starred 3 repositories
rasengan-dev/rasengan
rasengan-dev/rasengan-ui
rasengan-dev/sharingan
Konoha · dark
@naruto starred 3 repositories
rasengan-dev/rasengan
rasengan-dev/rasengan-ui
rasengan-dev/sharingan
Kiri · light
@naruto starred 3 repositories
rasengan-dev/rasengan
rasengan-dev/rasengan-ui
rasengan-dev/sharingan
Kiri · dark
@naruto starred 3 repositories
rasengan-dev/rasengan
rasengan-dev/rasengan-ui
rasengan-dev/sharingan
Iwa · light
@naruto starred 3 repositories
rasengan-dev/rasengan
rasengan-dev/rasengan-ui
rasengan-dev/sharingan
Iwa · dark
@naruto starred 3 repositories
rasengan-dev/rasengan
rasengan-dev/rasengan-ui
rasengan-dev/sharingan

Accessibility

  • The trigger is a button with aria-expanded and aria-controls; Enter or Space toggles it.

API reference

The parts of Base UI's Collapsible:

PartNotes
Collapsibleopen, defaultOpen, onOpenChange, disabled
CollapsibleTriggerrender to use a Button
CollapsibleContentthe panel; keepMounted, hiddenUntilFound