Building a Modern Component Library and Design System with React

A component library standardizes UI across teams and products. Building one requires careful attention to API design, theming, accessibility, and documentation.

Component API Design

interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost' | 'danger'
  size: 'sm' | 'md' | 'lg'
  children: React.ReactNode
  disabled?: boolean
  loading?: boolean
  leftIcon?: React.ReactNode
  rightIcon?: React.ReactNode
  onClick?: () => void
}

export function Button({ variant, size, children, disabled, loading, ...props }: ButtonProps) {
  const baseClasses = 'inline-flex items-center justify-center rounded-lg font-medium transition-colors'
  const variantClasses = {
    primary: 'bg-brand-600 text-white hover:bg-brand-700',
    secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200',
    ghost: 'bg-transparent text-gray-600 hover:bg-gray-100',
    danger: 'bg-red-600 text-white hover:bg-red-700',
  }
  const sizeClasses = { sm: 'px-3 py-1.5 text-sm', md: 'px-4 py-2 text-sm', lg: 'px-6 py-3 text-base' }

  return (
    <button className={\`\${baseClasses} \${variantClasses[variant]} \${sizeClasses[size]}\`}
      disabled={disabled || loading} {...props}>
      {loading && <Spinner className="mr-2" />}
      {children}
    </button>
  )
}

Theming System

const theme = {
  colors: {
    brand: { 50: '#eef2ff', 100: '#e0e7ff', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca' },
    gray: { 50: '#f9fafb', 100: '#f3f4f6', 500: '#6b7280', 900: '#111827' },
  },
  spacing: { sm: '0.25rem', md: '0.5rem', lg: '1rem', xl: '1.5rem' },
  radii: { sm: '0.25rem', md: '0.5rem', lg: '0.75rem', full: '9999px' },
}

Documentation with Storybook

Every component should have stories demonstrating variants, states, and accessibility.

The Bottom Line

The Component Library Starter from BreafIO provides a complete component library structure with theming, variants, and documentation. The Admin Dashboard Pro includes production components. The SaaS Landing Kit uses the component system. The Design System Manager helps scale across teams, and the Frontend Platform Kit provides tooling infrastructure.