Accordion

Reveals related sections on demand. Native details rows with 1px rules.

Preview

What is Vlak?

A minimal design system on a 204px module.

Does it require Radix?

No. Native elements provide the behavior.

In action

Why

Why Inter?

One face. Weight and size do the work a second typeface would try to do.

Why 204?

A 184 column and a 20 gutter. The page is the module.

When to use

Use it for

FAQ and settings sections where headings should stay scannable.
exclusive to keep one item open through the platform's details name grouping.

Not for

Hiding content most readers need; put it in the flow.
A single item; use Collapsible.

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 { Accordion, AccordionItem } from "@noorddev/vlak-react";

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

2. Vendor the source

npx @noorddev/vlak-cli add accordion

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

3. Through shadcn

npx shadcn add https://vlak.dev/r/accordion.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 { Accordion, AccordionItem } from "@noorddev/vlak-react";

<Accordion exclusive>
  <AccordionItem title="What is Vlak?" defaultOpen>
    A minimal, CSS-first design system.
  </AccordionItem>
  <AccordionItem title="Does it require Radix?">
    No. Native elements provide the behavior.
  </AccordionItem>
</Accordion>

Props

Accordion

Native <details> rows on hairlines.

Prop	Type	Default	Description
`exclusive`	`boolean`		One item open at a time, via the platform's own `name` grouping.

Also accepts HTMLAttributes<HTMLDivElement>.

AccordionItem

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

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

Keyboard

Keys	Does
`Tab`	Moves to the next summary
`Enter, Space`	Opens or closes the item

Accessibility

Each item is a native <details> with a <summary>; the platform exposes the expanded state.
title is the summary text and the accessible name. Controlled with open and onToggle, or uncontrolled with defaultOpen.

Markup

<div class="rs-acc"><details class="rs-acc-item" name="faq" open><summary>What is Vlak?<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-acc-body">A minimal, CSS-first design system.</div></details><details class="rs-acc-item" name="faq"><summary>Does it require Radix?<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-acc-body">No. Native elements provide the behavior.</div></details></div>

Classes

.rs-acc.rs-acc-item.rs-acc-chevron.rs-acc-body.rs-acc-chevron-open.rs-acc-summary