List
Rows with a selection that springs between them and arrow-key navigation.
Reviewer notes9:41
Camera-readyMon
Grant draftSun
Features
- A selection that springs between rows.
Use it for
- Inboxes, sessions, files.
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 motion - 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 { List } from 'runets'
<List label="Inbox" rows={[{ id: 'a', title: 'Reviewer notes', detail: '9:41' }]} />API
| Prop | Type | What it does |
|---|---|---|
rows | Row[] | { id, title, detail, icon }. |
label | string | Name of the list. |
Accessibility
- One Tab stop; Up, Down, Home and End move the selection.
Source
The code is in src/kit/surfaces.tsx in runets, MIT licensed.