Welcome to Thrive Design System

The Thrive Design System is a comprehensive collection of reusable components, design tokens, and guidelines that help teams build consistent, accessible, and delightful user experiences.

What's Included

• 🎨 Design Tokens: Colors, typography, spacing, and other foundational design decisions
• 🧩 Components: A library of accessible, customizable React components
• 📱 Responsive Design: Mobile-first approach with flexible breakpoints
• 🌙 Dark Mode: Built-in support for light and dark themes
• ♿ Accessibility: WCAG 2.1 AA compliant components with thorough testing
• 🎯 Figma Integration: Seamless design-to-development workflow

Getting Started

Installation

npm install @thrivecart/ui
# or
pnpm add @thrivecart/ui
# or
yarn add @thrivecart/ui

Basic Usage

import { Button, Input, Card } from '@thrivecart/ui';

function MyApp() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Enter your name" />
      </CardContent>
      <CardFooter>
        <Button variant="primary">Submit</Button>
      </CardFooter>
    </Card>
  );
}

Features

Accessibility First

All components are built with accessibility in mind, featuring:

• Proper ARIA attributes
• Keyboard navigation support
• Screen reader compatibility
• High contrast color schemes

Design Tokens

Consistent design decisions encoded as tokens:

• Colors with semantic naming
• Typography scales
• Spacing system
• Border radius and shadows

Dark Mode Support

Toggle between light and dark themes seamlessly:

• System preference detection
• Manual theme switching
• Consistent color schemes across themes

Resources

• Component Library
• Design Tokens
• Accessibility Guidelines
• Figma Design System

Ready to explore? Check out our components or dive into the design tokens to understand our foundational principles.