Accordion
Sections that open one at a time, the chevron springing as they do.
Features
- Sections whose panels spring open; the chevron turns with them.
Use it for
- FAQs, settings groups.
Installation
- Get runets.
git clone https://github.com/ziyam-khan/runets - Copy these files into your project, keeping their folders.
- Install what they use.
pnpm add react @base-ui/react motion lucide-react - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
Usage
import { Accordion } from 'runets'
<Accordion items={[{ title: 'What is ported?', body: '…' }]} />API
| Prop | Type | What it does |
|---|---|---|
items | { title, body }[] | The sections. |
Accessibility
- Headings with buttons; panels are labelled by them.
Source
The code is in src/kit/surfaces.tsx in runets, MIT licensed.