Rewrite Design System

Standalone NPM package extracted from dash/ and aligned with the dashboard's production primitives, tokens, and styles.

What is included

• Dashboard theme tokens and global CSS
• Reusable base primitives from dash/src/components/base
• Shared foundations and assets from dash/src/components/foundations and dash/src/components/shared-assets
• Generic application primitives:
  • EmptyState
  • Modal
  • Table
  • Tabs
• A package-owned ThemeProvider that applies the same .dark-mode and .light-mode root classes used by the dashboard

Install

pnpm add @rewritetoday/design-system react react-dom

This package ships the dashboard's Tailwind v4 CSS entrypoint. Your app should support importing package CSS.

Usage

import "@rewritetoday/design-system/styles.css";
import {
	Button,
	Card,
	Input,
	ThemeProvider,
} from "@rewritetoday/design-system";

export function App() {
	return (
		<ThemeProvider defaultTheme="dark">
			<Card>
				<Card.Header>
					<Card.Title>Rewrite UI</Card.Title>
				</Card.Header>
				<Card.Content className="space-y-4">
					<Input label="Project name" placeholder="Acme SMS" />
					<Button>Create project</Button>
				</Card.Content>
			</Card>
		</ThemeProvider>
	);
}

Package scripts

• pnpm run build: bundle the library sources, emit declarations, and copy package CSS into dist
• pnpm run check: run TypeScript verification

Source of truth

• Component implementation: dash/src/components
• Theme implementation: dash/src/styles