Collapsible

Shows or hides one section with a native details disclosure.

Preview

Show the details

Quiet, on the grid.

In action

Fold

Under the fold

A native disclosure. The law is one sentence.

The law

A poster you can install.

When to use

Use it for

One optional block the reader can reveal: details, advanced options, a long list.
defaultOpen when most readers want it open.

Not for

Several related sections; use Accordion.
Content everyone needs; leave it in the flow.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Collapsible } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/collapsible.

2. Vendor the source

npx @noorddev/vlak-cli add collapsible

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/collapsible.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Collapsible } from "@noorddev/vlak-react";

<Collapsible title="Show the details">Here they are.</Collapsible>
<Collapsible title="Advanced" open={open} onToggle={(e) => setOpen(e.currentTarget.open)}>…</Collapsible>

Props

Collapsible

A bare native <details>.

Prop	Type	Default	Description
`title`required	`ReactNode`
`defaultOpen`	`boolean`

Also accepts Omit<DetailsHTMLAttributes<HTMLDetailsElement>, "title">.

Keyboard

Keys	Does
`Tab`	Moves focus to the summary
`Enter, Space`	Opens or closes it

Accessibility

A native <details> and <summary>; the platform exposes the expanded state and title is the name.

Markup

<details class="rs-disclosure"><summary>Show the details<svg class="rs-acc-chevron" viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter"><g transform="rotate(90 8 8)"><path d="M5.5 3.5 L10.5 8 L5.5 12.5" vector-effect="non-scaling-stroke"/></g></svg></summary><div class="rs-disclosure-body">Here they are.</div></details>

Classes

.rs-disclosure.rs-disclosure-body.rs-disclosure-chevron.rs-disclosure-chevron-open.rs-disclosure-summary

Depends on

/accordion