@praetorian-chariot/ui/README.md

The UI component library for Chariot, built with Tailwind CSS and React.

# @praetorian-chariot/ui

📚 **View Component Library**: [Storybook Documentation](https://super-adventure-4knymrm.pages.github.io/?path=/story/components-leftnav--example)

## Getting Started

### Installation

Install the package and its dependencies:

```bash
npm install @praetorian-chariot/ui
```

### Setup

1. Import the CSS file in your main application file:

```typescript
import '@praetorian-chariot/ui/index.css';
```

2. Configure your `tailwind.config.js`:

```typescript
import { chariotColors } from '@praetorian-chariot/ui/theme';

/** @type {import('tailwindcss').Config} */
module.exports = {
  // Include the UI library in your content paths
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@praetorian-chariot/ui/**/*.{js,ts,jsx,tsx}',
  ],
  // Include the UI library's Tailwind preset
  presets: [
    require('./node_modules/@praetorian-chariot/ui/tailwind.config.js'),
  ],
  theme: {
    extend: {
      colors: chariotColors,
      // ... other theme extensions
    }
  }
};
```

### Usage

Import and use components in your React application:

```typescript
import { LeftNav, Button } from '@praetorian-chariot/ui';

function App() {
  return (
    <div>
      <LeftNav 
        mainNavItems={[/* your nav items */]} 
        footerNavItems={[/* your footer items */]}
      />
      <Button variant="primary">Click Me</Button>
    </div>
  );
}
```