npm package: @llmobs/ui-kit
Description: React UI component library for LLMObs
Latest version: 0.0.5

# 🎨 LLMObs UI Kit

[![NPM Version](https://img.shields.io/npm/v/@llmobs/ui-kit?color=blue&style=flat-square)](https://www.npmjs.com/package/@llmobs/ui-kit)
[![Docs](https://img.shields.io/badge/Docs-Storybook-ff4785?style=flat-square&logo=storybook)](https://LLM-Obs.github.io/llmobs-ui-kit/)
[![License](https://img.shields.io/npm/l/@llmobs/ui-kit?style=flat-square)](LICENSE)

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

```bash
npm install @llmobs/ui-kit
```

## Quick Start

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

function App() {
  return (
    <Card title="Welcome">
      <Input label="Email" type="email" placeholder="you@example.com" />
      <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](https://LLM-Obs.github.io/llmobs-ui-kit/)
- **Style Guide**: See [STYLE_GUIDE.md](./STYLE_GUIDE.md) for ensuring visual consistency
- **Tailwind Setup**: See [TAILWIND_SETUP.md](./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:
   ```js
   content: [
     "./src/**/*.{js,ts,jsx,tsx}",
     "./node_modules/@llmobs/ui-kit/dist/**/*.js", // REQUIRED
   ]
   ```

2. **MUST** import Tailwind CSS:
   ```css
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   ```

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

See [STYLE_GUIDE.md](./STYLE_GUIDE.md) for complete details.

## Development

```bash
# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build library
npm run build

# Build Storybook
npm run build-storybook
```

## License

MIT