SETUP / 5 MINUTES

Getting started

Add ReUI Qwik to an existing Qwik application. Components are individually exported, so import only the pieces you use.

Install the package

Install the Qwik component package with your package manager.

npm install reui-qwik

Add the stylesheet once from your app’s global entry point. Override the custom properties in your own CSS to tune the palette.

// src/global.css
@import "reui-qwik/style.css";

ReUI components are Qwik components. Use them in route files and compose larger patterns from their subcomponents.

import { Button, Badge } from "reui-qwik";

<Button variant="outline" size="sm">Save</Button>
<Badge tone="success" variant="soft">Active</Badge>

Set tokens on :root or a theme wrapper. Components inherit these values without needing a Tailwind setup in your consuming app.

:root {
  --reui-primary: #5548e8;
  --reui-background: #ffffff;
  --reui-foreground: #17182a;
  --reui-border: #e5e6ef;
  --reui-radius: 0.75rem;
}

Cloudflare Pages?This repository’s documentation site uses Qwik City SSG. Build with npm run build.site and deploy the dist directory.