Getting Started
Go from an empty folder to a styled, accessible, themeable page in about two minutes. No npm, no build step, no framework.
Install
RenDS is a folder you copy into your project. There is no package to npm install — you own the source.
Option A — Clone the repo
git clone https://github.com/rens/rends.git
cd rendsOption B — Copy the rends/ folder
Drop it into your project anywhere. Most people put it alongside their own source:
No build step required. Open your index.html directly in the browser and it works. CSS Cascade Layers, light-dark(), and container queries do the work that bundlers used to.
Project structure
The important folders inside rends/:
Your first HTML
Create an index.html and link the foundation + all components. This is the simplest possible setup:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, RenDS</title>
<!-- Foundation: tokens, reset, layouts, utilities -->
<link rel="stylesheet" href="rends/index.css">
<!-- All components at once (or pick individual ones) -->
<link rel="stylesheet" href="rends/components/index.css">
</head>
<body>
<main class="ren-cover">
<div></div>
<div class="ren-center-narrow">
<h1>Hello, world</h1>
<p>This is your first RenDS page.</p>
</div>
<div></div>
</main>
</body>
</html>That's a fully-themed, dark-mode-aware, accessible, centered page. Zero inline styles.
Your first component
Every component has a ren- prefix and follows the same pattern: base class + optional modifiers.
<!-- Buttons -->
<button class="ren-btn ren-btn-primary">Save</button>
<button class="ren-btn ren-btn-secondary">Cancel</button>
<button class="ren-btn ren-btn-ghost ren-btn-sm">Dismiss</button>
<!-- Card with stacked content -->
<div class="ren-card">
<div class="ren-card-header">
<h3>Weekly report</h3>
</div>
<div class="ren-card-body">
<p>Everything looks great.</p>
</div>
<div class="ren-card-footer">
<button class="ren-btn ren-btn-primary">Open</button>
</div>
</div>Interactive components: add JS
Primitives (button, card, tag, badge...) are CSS-only. For interactive composites like Dialog, Select, or Tooltip, import the JS module:
<script type="module" src="rends/components/composites/ren-dialog/ren-dialog.js"></script>Or import everything:
<script type="module" src="rends/components/index.js"></script>Theming basics
RenDS uses color-scheme: light dark and the light-dark() CSS function. Dark mode works out of the box — no class toggles required.
Force a theme
<html data-theme="dark"> ... </html>
<html data-theme="light"> ... </html>Change the accent color
Override the semantic token on :root (or any ancestor):
:root {
--color-accent: hotpink;
--color-accent-hover: deeppink;
}Density and shape
<html data-density="compact" data-shape="rounded">For something more structured, use the Theme Builder to generate a full theme, export it as CSS or a shareable URL, and paste into your project.
Next steps
You've got the basics. Pick your direction: