Getting started

1. Set up the project

npx rdloom init

This writes rdloom.json, copies the design tokens to src/styles/rdloom-tokens.css and adds a few shared utilities.

2. Import the tokens and point Tailwind at the components

/* src/index.css */
@import "tailwindcss";
@import "./styles/rdloom-tokens.css";
@source "./components/rdloom";

3. Add components

npx rdloom add button date-range-picker data-grid --install

The source lands in src/components/rdloom/. --install also installs the npm packages they need. Then import them like any of your own files:

import { Button } from "./components/rdloom/button/button";

export function Save() {
  return <Button onPress={() => save()}>Save</Button>;
}

4. Commit the lock file

Commit rdloom.json, rdloom.lock.json and the .rdloom/ folder. They record what was shipped, which is what lets upgrades merge into your edits.

Dark mode

The tokens follow prefers-color-scheme. To force a theme, set data-theme="light" or data-theme="dark" on <html>.