Badge groups
Labelled groups of badges in one panel, flowing into as many columns as fit. Renders on the server: no JavaScript.
Stack
What this demo is made of.
Languages
- TypeScript
- GLSL
- CSS
Runtime
- React
- WebGL 2
- Canvas
Motion
- Springs
- Presence
Features
- Groups flow into as many columns as fit, then stack on a phone.
- Each group can carry an icon; the headings follow the level you give the panel.
- No hooks and no state: a server component that ships no JavaScript.
Use it for
- A tool or skills list.
- Tags by category, a stack page, a uses page.
On this site
- Home and Projects: ToolingThe tools I build, run and write with, sorted the way I reach for them.
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 - Load the styles once. Bring your own base tokens, or use runets’ default theme.
import 'runets/styles/theme.css' import 'runets/styles/kit.css'
API
| Prop | Type | What it does |
|---|---|---|
title / note | string / ReactNode | The heading and the line beside it. |
groups | { label, icon?, items }[] | Each group and its badges. |
level | 2 | 3 | 4 | Heading level of the panel; group labels take the next one. |
id | string | The heading id the section is labelled by. |
Accessibility
- A section labelled by its heading, groups as headed lists.
- Icons are aria-hidden.
Source
The code is in src/kit/badge-groups.tsx in runets, MIT licensed.