Skip to content

README.md

Latest commit

 

History

History
61 lines (48 loc) · 1.53 KB

README.md

File metadata and controls

61 lines (48 loc) · 1.53 KB

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