KMC UI - React

📋 Part of KMC Design Kit - A comprehensive design system for KMC applications

A modern, accessible, and customizable UI kit built with React, TypeScript, Tailwind CSS, and based on shadcn/ui components. Perfect for building consistent user interfaces across Next.js and React applications.

✨ Features

• 🎨 Modern Design: Beautiful, clean, and consistent components
• 🎯 Accessibility First: Built with accessibility in mind using Radix UI primitives
• 🔧 Fully Customizable: Easy to customize with CSS variables and Tailwind utilities
• 📦 Tree Shakable: Only import what you need
• 🎭 Dark Mode Ready: Built-in dark mode support
• 📚 Storybook Integration: Interactive component documentation
• 🧪 Well Tested: Comprehensive test coverage with Vitest
• 🔒 TypeScript: Full TypeScript support with proper type definitions

🚀 Quick Start

Installation

pnpm add @kmc.solutions/ui-react

Setup

Import the CSS in your app:

// In your main app file (e.g., _app.tsx for Next.js or main.tsx for React)
import "@kmc.solutions/ui-react/styles";

For themed versions, import a specific theme:

// ERP Theme
import "@kmc.solutions/ui-react/themes/erp";

// Performance Hero Theme
import "@kmc.solutions/ui-react/themes/performance-hero";

💡 Note: Import only one theme at a time. Themes include all necessary base styles, so you don't need to import both styles and a theme.

That's it! The library comes with pre-built CSS, so no additional Tailwind configuration is needed.

🎭 Dark Mode

The UI kit supports dark mode out of the box. Simply add the dark class to your root element:

// Toggle dark mode
document.documentElement.classList.toggle("dark");

🛠 Development

Prerequisites

• Node.js 20+
• pnpm

Available Scripts

• pnpm dev - Start development server
• pnpm build - Build for production
• pnpm storybook - Start Storybook
• pnpm test - Run tests
• pnpm test:ui - Run tests with UI
• pnpm lint - Lint code
• pnpm format - Format code

🧪 Testing

# Run tests
pnpm test

# Run tests with coverage
pnpm test:coverage

# Run tests with UI
pnpm test:ui

📖 Storybook

View all components in Storybook:

pnpm storybook

Then open http://localhost:6006 in your browser.

🎨 Customization

CSS Variables

Customize the UI kit by overriding CSS variables:

:root {
  --kmc-primary: 220 100% 50%;
  --kmc-primary-foreground: 0 0% 100%;
  /* ... other variables */
}

Tailwind Configuration

Extend the UI kit with your own Tailwind utilities:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: "#...",
          500: "#...",
          900: "#...",
        },
      },
    },
  },
};

🗂 Workspace Navigation

This package is part of the KMC Design Kit workspace:

• 🏠 Main Repository - Workspace setup and overview
• 📦 This Package - You are here
• 🚀 Development Scripts - Workspace-level commands