Single expand/collapse section (one trigger, one panel). Use Accordion for multiple sections.
Collapsible
A single disclosure: one trigger button and one content panel. For multiple sections use the Accordion component.
Add this component
The command below includes <strong>Collapsible</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
npm pnpm yarn bun
bashbash
npx rizzo-css add Collapsible
bashbash
pnpm dlx rizzo-css add Collapsible
bashbash
npx rizzo-css add Collapsible
bashbash
bunx rizzo-css add Collapsible
Props
id (string, optional) - Unique identifier for the collapsible
defaultOpen (boolean, optional) - Whether the panel is open by default (default: false)
triggerLabel (string, optional) - Text for the trigger button (default: "Toggle")
class (string, optional) - Additional CSS classes
Basic Usage
Live Example
This content is shown when the collapsible is expanded. Use Accordion when you need multiple sections.
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
npm 
pnpm 
yarn 
bun