Back to 交个朋友
Design System

Design System

A comprehensive design system with reusable components, tokens, and documentation.

XTJune 5, 2024交个朋友

A complete design system that provides a foundation for building consistent, accessible, and beautiful user interfaces. Includes component library, design tokens, and comprehensive documentation.

Features

  • Component Library: 50+ reusable React components
  • Design Tokens: Consistent colors, typography, spacing, and shadows
  • Accessibility: WCAG 2.1 AA compliant components
  • Documentation: Interactive Storybook documentation
  • Theme Support: Light and dark themes
  • TypeScript: Full type definitions for all components
  • Testing: Comprehensive test coverage with Vitest

Technologies

  • React: Component library foundation
  • TypeScript: Type-safe components
  • Tailwind CSS: Utility-first styling
  • Storybook: Component documentation and development
  • Radix UI: Accessible component primitives
  • Vitest: Fast unit testing
  • Playwright: End-to-end testing

Component Categories

  • Layout: Container, Grid, Stack, Flex
  • Navigation: Menu, Breadcrumb, Tabs, Pagination
  • Forms: Input, Select, Checkbox, Radio, DatePicker
  • Feedback: Alert, Toast, Modal, Drawer
  • Data Display: Table, Card, List, Badge
  • Overlay: Tooltip, Popover, Dropdown

Design Tokens

The system includes a comprehensive set of design tokens:

  • Colors (primary, secondary, neutral, semantic)
  • Typography (font families, sizes, weights, line heights)
  • Spacing (consistent scale from 0.25rem to 4rem)
  • Shadows (elevation system)
  • Border radius (consistent rounding)

Getting Started

git clone https://github.com/yourusername/design-system
cd design-system
pnpm install
pnpm storybook

Usage

Install the package:

pnpm add @yourorg/design-system

Import components:

import { Button, Card, Input } from '@yourorg/design-system'

Documentation

Full documentation available at design-system.example.com