🎨 LLMObs UI Kit

A shared, strongly-typed React UI component library built for Micro-frontend architecture (Module Federation). Built with React 18, TypeScript, Vite, and Tailwind CSS.

Features

• 🎨 Dark Mode Ready - All components styled for dark mode developer tools
• 📦 Module Federation Compatible - Designed for micro-frontend architectures
• 🎯 TypeScript First - Fully typed components with auto-generated documentation
• 📚 Storybook Documentation - Interactive component playground and API docs
• 🎨 Tailwind CSS - Utility-first styling with customizable themes
• ⚡ Vite Powered - Fast builds with ES modules and UMD support

Installation

npm install @llmobs/ui-kit

Quick Start

import { Button, Card, Input } from '@llmobs/ui-kit';

function App() {
  return (
    <Card title="Welcome">
      <Input label="Email" type="email" placeholder="[email protected]" />
      <Button variant="primary">Submit</Button>
    </Card>
  );
}

Components

Form Elements

• Button - Primary UI component for user interaction
• Input - Full-featured input field with label, error, and icon support

Layout

• AppShell - Main layout container for authenticated app views
• AuthLayout - Centered layout for login/signup pages

Navigation

• Sidebar - Navigation container with header, content, and footer
• SidebarItem - Navigation item with icon and active state support

Data Display

• PageHeader - Standard header for plugin views
• Badge - Status indicator with multiple variants
• Table - Styled data table with zebra striping support

Feedback

• Spinner - Loading indicator with multiple sizes
• Alert - Feedback messages with variants (success, error, warning, info)
• Card - Container component for grouping content

Documentation

• Interactive Docs: Storybook Documentation
• Style Guide: See STYLE_GUIDE.md for ensuring visual consistency
• Tailwind Setup: See TAILWIND_SETUP.md for required configuration
• Example App: Check the /example folder for a complete working example

⚠️ Important: Style Consistency

To ensure identical styling across all applications:

1. MUST include UI kit in Tailwind content paths:

   content: [
     "./src/**/*.{js,ts,jsx,tsx}",
     "./node_modules/@llmobs/ui-kit/dist/**/*.js", // REQUIRED
   ]

2. MUST import Tailwind CSS:

   @tailwind base;
   @tailwind components;
   @tailwind utilities;

3. DO NOT override Tailwind base colors in your theme config

See STYLE_GUIDE.md for complete details.

Development

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build library
npm run build

# Build Storybook
npm run build-storybook

License

MIT