Welcome to Sparkle Design System

Build beautiful, accessible, and consistent user interfaces with confidence

Get Started View Components Browse GitHub

What is Sparkle?

Sparkle is a modern TypeScript-first design system that provides:

🎨 Design Tokens

Cross-platform design tokens with automated Tailwind CSS integration and React Native support.

⚛️ React Components

Accessible, customizable UI components built with Radix UI primitives and TypeScript.

🧪 Error Testing

Fluent builder pattern for type-safe error scenario testing and validation.

📱 Cross-Platform

Unified theme system supporting both web and React Native applications.

🔧 Developer Tools

Comprehensive build tools, Storybook integration, and automated documentation.

♿ Accessibility First

WCAG 2.1 AA compliant components with screen reader support and keyboard navigation.

Quick Start

# Install Sparkle packages
pnpm add @sparkle/ui @sparkle/theme @sparkle/types

# Start using components
import { Button } from '@sparkle/ui'
import { ThemeProvider } from '@sparkle/theme'

function App() {
  return (
    <ThemeProvider theme="light">
      <Button variant="primary">Get Started</Button>
    </ThemeProvider>
  )
}

Package Architecture

Sparkle is organized as a monorepo with focused packages:

@sparkle/ui - React component library
@sparkle/theme - Design tokens and theme providers
@sparkle/types - Shared TypeScript definitions
@sparkle/utils - Utility functions and React hooks
@sparkle/error-testing - Error testing framework

Development Workflow

The Sparkle monorepo uses modern tooling for an optimal developer experience:

pnpm workspaces for efficient dependency management
Turborepo for fast, cached builds
Storybook for component development and testing
Vitest for unit and integration testing
Playwright for visual regression testing

Ready to start building? Check out our Installation Guide or explore our Component Library.