A comprehensive React UI component library built with accessibility, type safety, and developer experience in mind.

• 🎨 Theme-aware - Light/dark mode with DaisyUI + Tailwind CSS
• ♿ Accessible - WCAG 2.1 AA compliant with axe-core testing
• 🔧 Type-safe - Full TypeScript support with comprehensive interfaces
• 📱 Responsive - Mobile-first design patterns
• 🌍 Internationalized - Built-in i18n support with react-i18next
• 🧪 Well-tested - Unit tests, accessibility tests, and visual regression tests
• 📚 Well-documented - Comprehensive Storybook documentation

npm install @etherisc/ui-kit
# or
pnpm add @etherisc/ui-kit
# or
yarn add @etherisc/ui-kit

// Import styles in your main entry file
import "@etherisc/ui-kit/dist/style.css";

// Wrap your app with providers
import { ThemeProvider, ToastProvider, ErrorBoundary } from "@etherisc/ui-kit";

function App() {
  return (
    <ErrorBoundary>
      <ThemeProvider defaultTheme="light" storageKey="app-theme">
        <ToastProvider>{/* Your app content */}</ToastProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
}

import { Button, TextInput, AppShell } from "@etherisc/ui-kit";

function MyApp() {
  return (
    <AppShell
      logo={<div>My App</div>}
      sideNavItems={[
        { label: "Dashboard", href: "/" },
        { label: "Settings", href: "/settings" },
      ]}
    >
      <div className="space-y-4">
        <h1>Welcome to My App</h1>
        <TextInput label="Name" placeholder="Enter your name" />
        <Button intent="primary">Get Started</Button>
      </div>
    </AppShell>
  );
}

This package is optimized for use by AI coding agents. We provide specialized documentation to ensure seamless integration:

• 🤖 AI Agent Quick Start - Essential setup and patterns (5-minute read)
• 📘 AI Agent Comprehensive Guide - Complete API reference and usage patterns

• 📚 Storybook Documentation - Interactive component explorer
• 🎨 Design System - Design tokens, patterns, and guidelines
• 🔧 Development Guide - Contributing and development setup

• AppShell - Main application layout with navigation
• AuthShell - Authentication pages layout
• ErrorShell - Error pages layout
• WizardShell - Multi-step form layout
• MainFixedLayout - Fixed-width content layout
• DataDenseLayout - Data-heavy interface layout

• Button - Primary interactive element
• TextInput - Text input with label and validation
• NumberInput - Numeric input with min/max validation
• Select - Dropdown selection
• Checkbox - Boolean selection
• RadioGroup - Single selection from multiple options
• ComboBox - Searchable dropdown
• TextArea - Multi-line text input
• DatePicker - Date selection
• DateRangePicker - Date range selection
• SliderInput - Range slider input
• SpinnerInput - Numeric spinner input

• MarkdownEditor - WYSIWYG markdown editor with security
• CodeEditor - Syntax-highlighted code editor

• StatusBadge - Status indicators
• Toast - Notification system
• ErrorBoundary - Error handling wrapper

• Breadcrumbs - Navigation breadcrumbs
• ThemeToggle - Light/dark mode switcher

• All components meet WCAG 2.1 AA standards
• Comprehensive keyboard navigation support
• Screen reader optimized
• High contrast color schemes

• Full TypeScript support
• Strict prop interfaces
• Comprehensive type exports

• Consistent API patterns
• Comprehensive error messages
• Excellent IDE support
• Hot reload friendly

• No Tailwind classes in consumer code - Use component props instead
• Semantic color system - intent="primary" vs className="bg-blue-500"
• Layout utilities allowed - className="flex gap-4" for spacing/layout only

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form, FormField, TextInput, Button } from "@etherisc/ui-kit";

const schema = z.object({
  email: z.string().email(),
  name: z.string().min(2),
});

function MyForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", name: "" },
  });

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <TextInput {...field} label="Email" type="email" />
          )}
        />
        <Button type="submit" intent="primary">
          Submit
        </Button>
      </form>
    </Form>
  );
}

import { useToastContext } from "@etherisc/ui-kit";

function MyComponent() {
  const { addToast } = useToastContext();

  const handleSuccess = () => {
    addToast({
      title: "Success!",
      description: "Your changes have been saved.",
      variant: "success",
    });
  };

  return <Button onClick={handleSuccess}>Save</Button>;
}

import { ThemeProvider } from "@etherisc/ui-kit";

function App() {
  return (
    <ThemeProvider
      defaultTheme="dark"
      storageKey="my-app-theme"
      themes={["light", "dark", "custom"]}
    >
      {/* Your app */}
    </ThemeProvider>
  );
}

• Node.js 18+
• pnpm 8+

# Clone the repository
git clone https://github.com/etherisc/ui-kit.git
cd ui-kit

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Start Storybook
pnpm storybook

# Run unit tests
pnpm test

# Run accessibility tests
pnpm test-storybook

# Run visual regression tests
pnpm playwright test

# Build the library
pnpm build

# Build Storybook
pnpm build-storybook

packages/ui-kit/
├── src/
│   ├── components/        # React components
│   │   ├── primitives/    # Basic UI elements
│   │   ├── form/          # Form components
│   │   ├── feedback/      # Status and notification components
│   │   └── navigation/    # Navigation components
│   ├── layout/            # Layout components
│   ├── hooks/             # Custom React hooks
│   ├── providers/         # Context providers
│   ├── utils/             # Utility functions
│   ├── theme/             # Theme configuration
│   └── docs/              # Documentation pages
├── .storybook/            # Storybook configuration
├── tests/                 # Test files
└── docs/                  # Additional documentation

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests and documentation
5. Ensure all tests pass
6. Submit a pull request

• TypeScript strict mode
• ESLint + Prettier formatting
• Comprehensive test coverage
• Accessibility compliance
• Semantic commit messages

This project is licensed under the Apache 2.0 License - see the LICENSE file for details.

• Documentation: Storybook
• Issues: GitHub Issues
• Discussions: GitHub Discussions

Made with ❤️ by the Etherisc team