@sbdesign/ui

React component library for SB Design System - modern, accessible, runtime-free components.

Installation

npm install @sbdesign/ui

Usage

// Import styles (in your root layout)
import '@sbdesign/styles';
import '@sbdesign/ui/styles.css';

// Import components
import { Button, Card, Modal } from '@sbdesign/ui';
import { Plus } from '@sbdesign/icons';

function App() {
  return (
    <Card
      title="Welcome"
      description="Get started with SB Design"
      footer={
        <Button variant="primary">
          <Plus width={16} height={16} />
          Add New
        </Button>
      }
    />
  );
}

Components

Core

• Button - Interactive button with variants and loading states
• Card - Content card with image, title, description and footer
• Avatar - User profile image with fallback
• Badge - Status and label indicators
• Input - Form input with label, error and helper text

Advanced

• Dropdown - Accessible dropdown menu
• Carousel - Image/content carousel with controls
• Slider - Range slider with keyboard support
• Tabs - Tabbed interface
• Modal - Dialog with focus management

Utilities

• Skeleton - Loading placeholders

Features

• ✅ Zero runtime dependencies (except React peer)
• ✅ TypeScript support
• ✅ Accessibility (WCAG AA)
• ✅ Dark mode support
• ✅ Tree-shakeable
• ✅ Responsive

Documentation

Visit the showcase app for live demos and full documentation.

License

MIT