@testcompany/design-system

A comprehensive design system inspired by Claude's interface, built for React applications.

Installation

npm install @testcompany/design-system

Usage

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

function MyComponent() {
  return (
    <Card title="Example">
      <Input label="Name" placeholder="Enter your name" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Components

Layout Components

• Container: Responsive container with max-width control
• Header: Fixed header component
• Sidebar: Collapsible sidebar navigation
• Flex: Flexbox layout utility
• Grid: CSS Grid layout utility

Form Components

• Button: Primary, secondary, ghost, and danger variants
• Input: Text input with labels, validation, and icons
• Textarea: Multi-line text input

Display Components

• Card: Content container with optional header
• Avatar: User avatar with fallback to initials

Icons

• HomeIcon, ChatIcon, SettingsIcon, SendIcon, UserIcon, SearchIcon, MenuIcon

Design Tokens

The design system includes a comprehensive set of design tokens:

import { tokens } from '@testcompany/design-system';

// Colors
tokens.colors.primary[600]     // Primary brand color
tokens.colors.neutral[500]     // Neutral gray

// Typography  
tokens.typography.fontSize.lg  // Large text size
tokens.typography.fontWeight.semibold

// Spacing
tokens.spacing[4]              // 1rem (16px)
tokens.spacing[8]              // 2rem (32px)

CSS Variables

Include the CSS variables in your app:

import { cssVariables } from '@testcompany/design-system';

// Add to your CSS or inject via JavaScript
console.log(cssVariables);

v0 Integration

This design system is optimized for use with v0. When using components in v0, they will automatically have consistent styling and behavior.

Development

# Build the package
npm run build

# Watch for changes during development  
npm run dev