Zen
React components in dark glass: translucent surfaces, hairline borders that catch a pointer light, and one accent colour carrying the UI. Built on native platform features (<dialog>, the Popover API, radio inputs) with no runtime dependencies.
Installation
pnpm add @rinzai/zenImport the stylesheet once, near the root of your app. It includes the default theme.
import '@rinzai/zen/css';The look is set in Inter. Load it however you like, for example with @fontsource-variable/inter.
Usage
import { Backdrop, Button, Card } from '@rinzai/zen';
export default function App() {
return (
<>
<Backdrop />
<Card title="Budget">
<Button>Save changes</Button>
</Card>
</>
);
}Background
Backdrop draws the page background and lights up card edges near the pointer. It sits at z-index: -1, so give <html> the background colour and keep <body> transparent:
html {
background: oklch(var(--background));
}
body {
background: transparent;
}Theming
Dark is the default. Add the light class (or data-theme="light") to an element for the light palette, and dark to switch back inside it. Try the switch in the header.
Colours are OKLCH L C H triplets, used as oklch(var(--primary)) or oklch(var(--primary) / 0.5). Lightness is fixed per role, so changing only the hue keeps contrast intact. The defaults sit in a cascade layer, so your own values always win:
:root {
--primary: 0.72 0.13 200; /* teal instead of violet */
--glow: 0.7 0.13 200;
--glow-strength: 1; /* 0 turns every glow off */
}Components
Actions Menu
A "⋯" button that opens a short menu of actions for one thing.
Backdrop
The page background: aurora glows over contours or dots, and a light that follows the pointer and catches card edges.
Badge
A small label for status, counts and tags.
Button
Actions, from the one glowing primary action to quiet ghost buttons.
Card
Glass panels for grouping content, and stats for single figures.
Code Block
Code with a copy button; bring your own highlighter for colours.
Collapse
Shows as many items as fit on one line, and the rest behind "+N".
Dialog
Modal dialogs on the native <dialog> element, and a confirmation for destructive actions.
Dropdown
Searchable single or multiple selection, with optional creation of new items.
Header
A sticky glass bar across the top of the page.
Input
Text fields in faint glass that glow on focus.
Nav Pills
Top navigation with a glowing pill that slides to the current page. Works with any router.
Page Header
Eyebrow, aurora title and lead paragraph for the top of a page.
Popover
Floating glass panels on the native Popover API: tooltips, menus and small forms.
Progress Ring
Circular progress with room for a label in the middle.
Segmented
A pill row for a few mutually exclusive options.
Side Nav
Vertical navigation in titled groups, for docs and settings sidebars. Works with any router.
Skeleton & Spinner
Placeholders for content on its way.
Table
Plain HTML tables on a glass panel, with hairline rows.
Table of Contents
An "On this page" list that highlights the section being read.
Tabs
Switch between views, with an underline or a glowing pill that slides to the active tab.
Textarea
Multi-line text, styled like Input.
Theme Toggle
Switches between the dark and light themes and remembers the choice.
Toast
Short messages that confirm an action or report a problem, with an optional action like Undo.
Toggle
An on/off switch.