Tharaday Design System

Welcome to the Tharaday design system! This project was created to help you build and maintain a consistent UI library.

Quick Start

npm install
npm run storybook

Storybook is available at http://localhost:6006.

Use in an app

Import the styles once at your app root and use the components.

import 'tharaday/styles.css';

import { Button } from 'tharaday';

export function Example() {
  return <Button>Click me</Button>;
}

Docs

• docs/GETTING_STARTED.md for setup and dev workflows
• docs/CUSTOMIZATION.md for components, tokens, and theming
• docs/TOKENS_AND_THEMES.md for token structure and theme mapping
• docs/PUBLISHING.md for build and release

Project Structure

• src/components/ - Your React components. Each component has its own folder with:
  • .tsx - Implementation
  • .module.css - Scoped styles
  • .stories.tsx - Storybook stories
  • .types.ts - TypeScript definitions
• src/layouts/ - App-level layout components (shells, page scaffolding)
• src/styles/ - Global styles and design tokens:
  • tokens.css - Core design tokens (colors, spacing, etc.)
  • semantic.css - Semantic tokens mapping tokens to usage
  • themes/ - Light and dark theme definitions
• .storybook/ - Storybook configuration

Styling

The Tharaday design system uses CSS Modules and CSS Variables for styling. See CUSTOMIZATION.md for more information.

Available Scripts

• npm run build - Build the Tharaday design system for production (outputs to dist/)
• npm run build-storybook - Build static Storybook site
• npm run storybook - Start Storybook
• npm run lint - Run ESLint
• npm run lint:fix - Run ESLint with auto-fix
• npm run format - Check formatting with Prettier
• npm run format:fix - Format code with Prettier
• npm run release - Bump version, update changelog, and tag a release
• npm run release:alpha - Create an alpha prerelease tag
• npm run release:beta - Create a beta prerelease tag
• npm run release:patch - Release a patch version
• npm run release:minor - Release a minor version
• npm run release:major - Release a major version
• npm run publish:npm - Publish to npmjs (bypasses local .npmrc)

Git Hooks

Husky runs on install and enforces a pre-commit hook that runs npm run lint and npm run format. Use npm run format:fix to resolve formatting issues locally.

Why the name Tharaday?

Tharaday is a blend of the names of my two Thai (old-type Siamese) cats: Thales (after Thales of Miletus) and Faraday (after Michael Faraday). The name nods to curiosity and experimentation, which is how this design system evolves. It also keeps the project a bit more personal and memorable. 🐈🐈

Thales

Faraday