Klarity Design System

A comprehensive design system built with React, TypeScript, Vite, and Storybook for the Klarity platform.

🚀 Getting Started

Installation

yarn install

Development

Start the Storybook development server:

yarn storybook

This will start Storybook on http://localhost:6006

Build

Build the Storybook static site:

yarn build-storybook

📦 Components

The design system includes the following components:

Form Components

• Button - Multiple variants (default, primary, secondary, destructive, outline, ghost, link, danger)
• Input - Text input with optional prefix support
• CustomInput - Custom styled input component
• Label - Form label component
• Checkbox - Checkbox input component
• Switch - Toggle switch component
• Select - Dropdown select component
• MultiSelect - Multi-select dropdown component
• RadioGroup - Radio button group component
• Upload - File upload component with drag & drop

Layout Components

• Dialog - Modal dialog component
• AlertDialog - Alert dialog component
• Drawer - Side drawer component
• Popover - Popover component
• Tabs - Tab navigation component
• Accordion - Accordion component
• Progress - Progress bar component

Icons

• DashboardIcon - Dashboard icon
• SettingsIcon - Settings icon
• ApiWebhooksIcon - API webhooks icon
• BusinessDetailsIcon - Business details icon
• BusinessVerificationIcon - Business verification icon
• IndividualVerificationIcon - Individual verification icon
• VerificationFlowsIcon - Verification flows icon
• RulesIcon - Rules icon
• RulesGroupIcon - Rules group icon
• GetStartedIcon - Get started icon
• GoogleLogoIcon - Google logo icon
• ReactIcon - React logo icon

📖 Usage

Importing Components

import { Button, Input, Dialog } from '@/components';

Importing Icons

import { DashboardIcon, SettingsIcon } from '@/components/icons';

Example Usage

import { Button } from '@/components';

function MyComponent() {
  return (
    <Button variant="primary" size="lg">
      Click me
    </Button>
  );
}

🎨 Styling

The design system uses Tailwind CSS with a custom configuration. All components follow the Klarity design tokens:

• Primary Color: #309371 (green)
• Secondary Color: #9CA3AF (gray)
• Font: Satoshi (custom font)

🧪 Storybook

All components have comprehensive Storybook stories with:

• Multiple variants
• Interactive controls
• Documentation
• Accessibility testing

View all stories by running yarn storybook and navigating through the component library.

📁 Project Structure

klarity-ds/
├── src/
│   ├── components/        # All UI components
│   │   ├── icons/         # Icon components
│   │   └── *.stories.tsx  # Component stories
│   ├── lib/               # Utility functions
│   └── index.css          # Global styles
├── .storybook/            # Storybook configuration
├── tailwind.config.js     # Tailwind configuration
└── package.json

🛠️ Tech Stack

• React 19 - UI library
• TypeScript - Type safety
• Vite - Build tool
• Storybook 10 - Component documentation
• Tailwind CSS - Styling
• Radix UI - Accessible component primitives
• Lucide React - Icon library

📝 Development Guidelines

1. All components should be TypeScript typed
2. Components should be accessible (ARIA compliant)
3. Use Tailwind CSS for styling
4. Create Storybook stories for all components
5. Follow the existing component patterns

🤝 Contributing

When adding new components:

1. Create the component in src/components/
2. Add TypeScript types
3. Create a Storybook story
4. Export from src/components/index.ts
5. Update this README if needed

📄 License

Private - Klarity Platform