Getting Started

Go from an empty folder to a styled, accessible, themeable page in about two minutes. No framework or build step required.

Install

Install ren10 from npm, or copy the source into your project. The CLI creates a local rends/ folder that you own.

Option A — CLI (recommended)

npx ren10 init
npx ren10 add --all

Option B — Clone the source

git clone https://github.com/Rensoconese/ren10.git rends

Drop it into your project anywhere. Most people put it alongside their own source:

my-project/ ├── rends/ ← the design system lives here ├── index.html └── styles.css

No build step required. Serve your folder over HTTP, for example with npx serve .. JavaScript modules require HTTP; opening index.html with file:// will block them. CSS Cascade Layers, light-dark(), and container queries do the work that bundlers used to.

npm package

npm install ren10

In a CSS-aware build tool, import ren10 for the complete system, or ren10/foundation.css plus individual component styles. npm/source components live under components/primitives/, composites/, or patterns/; CLI copies use rends/components/button/, for example. Load optional JavaScript from the matching installation path.

Project structure

The important folders inside rends/:

rends/ ├── index.css ← complete: tokens + base + all added components ├── foundation.css ← source/npm only: tokens + base ├── tokens/ │ ├── primitives/ ← raw values (--blue-500, --space-4) │ ├── semantic/ ← purpose-based (--color-accent, --color-text) │ └── component/ ← per-component (--ren-btn-bg) ├── base/ │ ├── reset.css ← sensible defaults │ ├── layouts.css ← ren-stack, ren-grid, ren-cover, ... │ └── utilities.css ← ren-sr-only, ren-truncate, ... ├── components/ │ ├── primitives/ ← 19 components (button, card, field, ...) │ ├── composites/ ← 26 components (dialog, select, tabs, ...) │ └── patterns/ ← 8 patterns (nav, sidebar, form, table, ...) ├── themes/ │ └── appearance.css ← light/dark + data-theme overrides └── cli/ └── index.js ← optional: add components one at a time

Your first HTML

Create an index.html and link the complete entrypoint. 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>

  <!-- Tokens, base, and all installed components -->
  <link rel="stylesheet" href="rends/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

Native button, card, tag, and badge styles work without JavaScript. Custom elements such as <ren-button>, <ren-field>, and <ren-radio-group> also have optional enhancement modules. For a dialog in a CLI installation, import:

<script type="module" src="rends/components/dialog/ren-dialog.js"></script>

There is no all-components JavaScript entrypoint. Import each required enhancement module separately.

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:

Foundations

Tokens reference

Every color, space, type, and radius value in one place.

Structure

Layout primitives

Stack, Grid, Cover, With-sidebar, and friends.

Catalog

Components showcase

Live examples of all 53 components.

Examples

Page blocks

Real screens: auth, dashboard, settings, landing, blog.