@orchard9ai/design-system NPM

@orchard9ai/design-system

v0.1.2 - Complete Component Library

A comprehensive React component library built on DaisyUI and TailwindCSS v4 for the Orchard9 ecosystem. This package provides a full suite of accessible, themeable UI components with TypeScript support.

Features

🧩 50+ React Components - Full component library including Button, Card, Modal, Table, Forms, and more
🎨 DaisyUI + TailwindCSS v4 - Modern CSS-first configuration with semantic component classes
🌓 6 Built-in Themes - Light, dark, cupcake, business, plus custom Grove themes
🎯 TypeScript Support - Fully typed components with excellent IDE support
📦 Tree-shakeable - Optimized bundle with only what you use
♿ Accessible - WCAG 2.1 AA compliant components
🧪 Thoroughly Tested - Jest, React Testing Library, accessibility testing
📚 Storybook Documentation - Interactive component explorer
🚀 Tiny Bundle - Only 467B JS + optimized CSS
🛠️ Developer Experience - Theme hooks, utility functions, consistent APIs

Installation

npm install @orchard9ai/design-system

# Install peer dependencies
npm install react react-dom

Quick Start

1. Import Styles

Import the design system CSS in your app entry point:

// In your main.tsx or App.tsx
import '@orchard9ai/design-system/styles.css';

2. Configure PostCSS (if using TailwindCSS v4)

If you're extending the design system with custom styles:

// postcss.config.js
module.exports = {
  plugins: {
    '@tailwindcss/postcss': {},
    autoprefixer: {},
  },
};

3. Use Available Components and Utilities

import { cn } from '@orchard9ai/design-system';

function MyComponent() {
  return (
    <div data-theme="light" className="min-h-screen bg-base-100">
      <button className={cn('btn', 'btn-primary', 'loading')}>Click me</button>
    </div>
  );
}

Available Components

Core Components

Button - Primary, secondary, variants with loading states
Card - Flexible content containers with image support
Modal - Accessible modal dialogs
Drawer - Side panel navigation
Dropdown - Menu and select dropdowns

Form Components

FormControl - Form field wrapper with labels
Input - Text input with variants
Select - Dropdown selection
Textarea - Multi-line text input
Checkbox - Single and group checkboxes
Radio - Radio buttons and groups
Toggle - Switch toggles

Layout Components

Container - Responsive content wrapper
Grid - Flexible grid system
Stack - Vertical/horizontal spacing
Hero - Hero sections

Data Display

Table - Data tables with sorting
Stat - Statistics display
Avatar - User avatars with groups
Badge - Status indicators
Timeline - Event timelines
Accordion - Collapsible content

Feedback Components

Alert - Inline notifications
Toast - Toast notifications
Progress - Progress bars
Skeleton - Loading placeholders
EmptyState - Empty data states

Navigation

Breadcrumb - Navigation breadcrumbs
Pagination - Page navigation
Tabs - Tabbed interfaces

Quick Examples

Using Components

import { Button, Card, ThemeProvider, useTheme } from '@orchard9ai/design-system';

function App() {
  return (
    <ThemeProvider defaultTheme="grove-light">
      <Card>
        <Card.Body>
          <Card.Title>Welcome to Orchard9</Card.Title>
          <p>Build amazing interfaces with our component library.</p>
          <Card.Actions>
            <Button variant="primary">Get Started</Button>
          </Card.Actions>
        </Card.Body>
      </Card>
    </ThemeProvider>
  );
}

Form Example

import { FormControl, Input, Button } from '@orchard9ai/design-system';

function LoginForm() {
  return (
    <form>
      <FormControl>
        <FormControl.Label>Email</FormControl.Label>
        <Input type="email" placeholder="Enter your email" />
      </FormControl>

      <FormControl>
        <FormControl.Label>Password</FormControl.Label>
        <Input type="password" />
      </FormControl>

      <Button variant="primary" type="submit">
        Sign In
      </Button>
    </form>
  );
}

Using Utility Functions

import { cn } from '@orchard9ai/design-system';

// Conditional class merging
const buttonClass = cn(
  'btn',
  variant && `btn-${variant}`,
  isLoading && 'loading',
  isDisabled && 'btn-disabled'
);

// Complex conditional styling
const cardClass = cn(
  'card',
  'bg-base-100',
  'shadow-xl',
  isActive && 'ring-2 ring-primary',
  isCompact && 'card-compact'
);

Theme Switching

Using the ThemeProvider and useTheme hook:

import { useTheme } from '@orchard9ai/design-system';

function ThemeSwitcher() {
  const { theme, setTheme, themes } = useTheme();

  return (
    <select
      className="select select-bordered"
      value={theme}
      onChange={(e) => setTheme(e.target.value as any)}
    >
      {themes.map((t) => (
        <option key={t} value={t}>
          {t}
        </option>
      ))}
    </select>
  );
}

Theme System

DaisyUI Semantic Colors

The design system uses DaisyUI's semantic color system:

primary - Brand color (customizable per theme)
secondary - Secondary brand color
accent - Accent color for highlights
neutral - Neutral grays
base-100/200/300 - Background layers
info/success/warning/error - Status colors

Available Themes

Light - Clean, minimal light theme
Dark - High-contrast dark theme
Cupcake - Soft, pastel color palette
Business - Professional, corporate styling
Grove Light - Orchard9 brand theme with emerald accents on light background
Grove Dark - Orchard9 brand theme with vibrant emerald on dark background

Theme Implementation

// Set theme on document root
document.documentElement.setAttribute('data-theme', 'light');

// Or use React state
function App() {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  return <div className="min-h-screen bg-base-100">{/* Your app content */}</div>;
}

Testing Your Integration

Verification Steps

Install and import: Ensure the package installs and CSS imports correctly
Theme switching: Test all 4 themes work properly
DaisyUI classes: Verify DaisyUI utilities are available
Bundle size: Check impact on your app's bundle size
Build process: Ensure production builds work correctly

Example Test Component

import { cn } from '@orchard9ai/design-system';
import '@orchard9ai/design-system/styles.css';

export function DesignSystemTest() {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    document.documentElement.setAttribute('data-theme', theme);
  }, [theme]);

  return (
    <div className="p-8 space-y-4">
      <h2 className="text-2xl font-bold">Design System Test</h2>

      {/* Theme Switcher */}
      <select
        className="select select-bordered"
        value={theme}
        onChange={(e) => setTheme(e.target.value)}
      >
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="cupcake">Cupcake</option>
        <option value="business">Business</option>
      </select>

      {/* Component Tests */}
      <div className="space-x-2">
        <button className={cn('btn', 'btn-primary')}>Primary</button>
        <button className="btn btn-secondary">Secondary</button>
        <button className="btn btn-accent">Accent</button>
      </div>

      <div className="alert alert-success">
        <span>✅ Design system is working correctly!</span>
      </div>

      <div className="card bg-base-100 shadow">
        <div className="card-body">
          <h3 className="card-title">Test Card</h3>
          <p>Testing DaisyUI components in {theme} theme</p>
        </div>
      </div>
    </div>
  );
}

Development (for Contributors)

# Install dependencies
pnpm install

# Run tests
pnpm test

# Build package
pnpm build

# Start Storybook
pnpm storybook

# Check bundle size
pnpm size

# Type checking
pnpm typecheck