Documentation
RenDS is a vanilla, accessible, atomic design system. No React, no build step, no framework lock-in. Just HTML, CSS, and a sprinkle of Web Components where native elements aren't enough.
node rends/cli/index.js add button dialog select
Start here
In order. Read the first, scan the second, bookmark the third.
Drop RenDS into a project, link the CSS, render your first button. Two minutes, no npm.
Colors, spacing, type, radius. The 3-tier system: primitives, semantic, component.
Stack, Cluster, Grid, Cover, With-sidebar. Every page skeleton you'll ever need.
Guides
Two subjects that touch every component. Read them once, refer back as needed.
WCAG 2.1 AA baseline, keyboard navigation, focus management, color contrast, reduced motion. What's automatic and what's your job.
Dark mode, data-theme / density / shape, three override levels, building a theme from scratch, and distributing it as CSS, JSON, or a URL.
References
Component pages, full-page templates, and the theme builder. All source you can copy.
Live examples of every primitive, composite, and pattern. Detailed pages per component with API, anatomy, and accessibility notes.
Full-page templates composing RenDS into real screens: auth, dashboard, settings, landing, blog.
Pick base color, fonts, radius, density. Export CSS, JSON, or a ZIP. Share via URL.
The case for classless-first: why a raw <button> should already look right.
Scaffold a new project, add components, pick a type scale. Five commands, no global install.
Philosophy
Every decision in RenDS ladders up to one of these.
Pure HTML, CSS, JS. No React, no Vue, no build step. Use <dialog>, <details>, Popover API before reaching for JS. Web Components are for encapsulation, not for rendering.
WCAG 2.1 AA minimum, AAA target. Every component ships with keyboard support, focus management, ARIA, and prefers-reduced-motion respect. Not an afterthought.
Tokens → Primitives → Composites → Patterns. Build upward. Never skip a layer. A Button uses tokens. A Dialog uses buttons. A Form uses dialogs and fields.