Theme-aware tokens
Three layers: primitive → semantic → component. Light/dark via light-dark() — no JS toggle, no FOUC.
54 accessible components, three theme layers, zero dependencies. Drop in a stylesheet — start shipping. Works with any framework, or none at all.
Every decision leans on the platform. Cascade Layers, custom properties, light-dark(), container queries. If the browser can do it, RenDS does it.
Three layers: primitive → semantic → component. Light/dark via light-dark() — no JS toggle, no FOUC.
Keyboard support, ARIA, touch targets, forced-colors, reduced-motion. WCAG AA audited — AAA where it matters.
Tokens → Primitives → Composites → Patterns. Build upward, never skip a layer. Compose, don't wrestle.
Drop a <link> tag and you're shipping. No bundler, no PostCSS, no framework lock-in.
Own the code. The CLI drops component source into your repo so you can tweak, rip, or remix freely.
Every animation has a reduced-motion alternative — dissolve, highlight, color-shift. Never a silent freeze.
A button is just <button class="ren-btn">. A dialog is a <dialog>. No custom elements to memorize, no render trees to debug. Native first, always.
<!-- Just HTML. That's it. --> <button class="ren-btn ren-btn-primary"> Sign in </button> <dialog class="ren-dialog"> <h2>Are you sure?</h2> <form method="dialog"> <button class="ren-btn">Cancel</button> </form> </dialog>
“Lean on the platform. Use the cascade. Respect the user. The browser already knows how to do most of this — RenDS just gets out of its way.”— RenDS design principles
MIT licensed. Zero lock-in. Customize your theme in the builder, copy the CSS, done.