Kore Design System

A comprehensive design system for Kore.ai applications built with React and TypeScript.

Installation

npm install kore-design-system

Peer Dependencies

Make sure to install the required peer dependencies:

npm install react react-dom lucide-react @radix-ui/react-scroll-area

Usage

Import CSS

Import the design system styles in your main CSS file or at the root of your application:

@import 'kore-design-system/styles/globals.css';

Use Components

import { 
  StandardAppLayout, 
  TabbedPageHeader,
  ContentWrapper,
  DesignButton,
  ThemeProvider 
} from 'kore-design-system';

function App() {
  return (
    <ThemeProvider>
      <StandardAppLayout layoutType="agentic">
        <TabbedPageHeader 
          title="My App"
          tabs={[...]}
          activeTab="tab1"
          onTabChange={() => {}}
        />
        <ContentWrapper>
          <DesignButton variant="primary">
            Click me
          </DesignButton>
        </ContentWrapper>
      </StandardAppLayout>
    </ThemeProvider>
  );
}

Features

• 🎨 Consistent Design System - Built with 8px spacing system and design tokens
• 📱 Responsive Components - Mobile-first responsive design
• ♿ Accessible - WCAG 2.1 AA compliant components
• 🔧 TypeScript - Full TypeScript support with proper types
• 🎯 Tree Shaking - Optimized bundle size with ES modules
• 🌙 Theme Support - Light/dark theme support built-in

Components

Layout Components

• StandardAppLayout - Main application layout
• TabbedPageHeader - Page headers with tabs and actions
• ContentWrapper - Content containers with consistent spacing
• ThemeProvider - Theme management system

UI Components

• DesignButton - Button component with variants
• FormInput - Input component with validation states
• LoadingSpinner - Loading indicators
• ErrorBoundary - Error boundary component

License

MIT