@commsession/design-system

A comprehensive TypeScript React component library with modern design tokens, accessibility features, and treeshakeable architecture.

Features

• 🎨 20+ Production-Ready Components - Complete set of UI primitives
• 🌗 Design Tokens - Consistent theming with light/dark/high-contrast modes
• ♿ Accessibility First - WCAG compliant with proper ARIA attributes
• 📦 Tree-Shakeable - Import only what you need
• 🔧 TypeScript - Full type safety and IntelliSense support
• 🎭 Tailwind Integration - Seamless styling with utility classes

Installation

# npm
npm install @commsession/design-system

# pnpm
pnpm add @commsession/design-system

# yarn
yarn add @commsession/design-system

Quick Start

import { Button, Card, Badge } from '@commsession/design-system';
import '@commsession/design-system/dist/styles.css';

function App() {
  return (
    <Card className="p-6">
      <h1>Welcome to the Design System</h1>
      <div className="flex gap-2">
        <Button variant="primary">Get Started</Button>
        <Badge variant="success">New</Badge>
      </div>
    </Card>
  );
}

Components

Form Components

• Button - Interactive buttons with variants and icons
• Input - Text inputs with validation states
• Textarea - Multi-line text input
• Checkbox - Boolean selection component
• Radio - Single selection from options
• Switch - Toggle component
• Select - Dropdown selection
• FormField - Form field wrapper with labels and errors

Layout Components

• Card - Content containers
• Modal - Dialog overlays
• Table - Data tables with sorting
• Pagination - Navigation for large datasets

Feedback Components

• Alert - Contextual messages
• Badge - Status indicators
• Tooltip - Hover information
• Skeleton - Loading placeholders

Utility Components

• Icon - Lucide React icon wrapper
• VisuallyHidden - Screen reader only content
• Popover - Floating content containers

Tree-Shaking

The library is optimized for tree-shaking. Import only the components you need:

// ✅ Tree-shakeable - only Button code is included
import { Button } from '@commsession/design-system';

// ❌ Not tree-shakeable - imports entire library
import * as DS from '@commsession/design-system';

TypeScript

Full TypeScript support with comprehensive prop types:

import type { ButtonProps } from '@commsession/design-system';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Design Tokens

The design system uses CSS custom properties for consistent theming:

/* Automatically included with the library */
:root {
  --color-bg-default: hsl(0, 0%, 100%);
  --color-fg-default: hsl(240, 10%, 3.9%);
  /* ... more tokens */
}

.dark {
  --color-bg-default: hsl(240, 10%, 3.9%);
  --color-fg-default: hsl(0, 0%, 98%);
  /* ... dark mode overrides */
}

Accessibility

All components are built with accessibility in mind:

• ✅ Proper ARIA attributes
• ✅ Keyboard navigation support
• ✅ Screen reader compatibility
• ✅ Focus management
• ✅ High contrast mode support

Bundle Size

Optimized for minimal bundle impact:

• Individual components: ~2-5KB gzipped
• Full library: ~45KB gzipped
• Tree-shaking can reduce this to ~5-15KB for typical usage

License

MIT © CommSession Team