npm package: @qtest1/quant-ui
Description: A modern React UI component library built with Tailwind CSS and Radix UI
Latest version: 1.5.19

# Quant UI (@qtest1/quant-ui)

A modern React UI component library built with Tailwind CSS and Radix UI primitives.

## Features

- 🎨 **Beautiful Design**: Modern and clean components with thoughtful defaults
- ♿ **Accessible**: Built on top of Radix UI primitives for maximum accessibility
- 🎯 **TypeScript**: Full TypeScript support with proper type definitions
- 🔧 **Customizable**: Easy to customize with Tailwind CSS classes
- 📦 **Tree Shakeable**: Import only the components you need
- 🌙 **Dark Mode**: Built-in dark mode support
- 📱 **Responsive**: Mobile-first responsive design

## Installation (React + TypeScript)

```bash
npm install @qtest1/quant-ui
# or
yarn add @qtest1/quant-ui
# or
pnpm add @qtest1/quant-ui
```

### Peer Dependencies

Make sure you have the required peer dependencies installed:

```bash
npm install react react-dom
```

### CSS Setup

Import the CSS file in your application:

```js
import '@qtest1/quant-ui/styles';
```

Or if you're using Tailwind CSS in your project, you can configure it to use the same design tokens by extending your `tailwind.config.js`:

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // ... your content paths
    "./node_modules/@qtest1/quant-ui/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ... other colors
      },
    },
  },
  plugins: [],
}
```

## Usage (Components and Pages)

### Example: Using a component (Button)

```jsx
import { Button } from '@qtest1/quant-ui';
import '@qtest1/quant-ui/styles';

function App() {
  return (
    <div>
      <Button>Primary Button</Button>
      <Button color="secondary">Secondary</Button>
      <Button color="tertiary">Tertiary</Button>
    </div>
  );
}
```

### Example: Using a page (prebuilt example)

```jsx
// Import a namespaced group of example pages
import { ApplicationDashboards01 } from '@qtest1/quant-ui';
import '@qtest1/quant-ui/styles';

// Render a full dashboard page component
export default function DashboardRoute() {
  return <ApplicationDashboards01.Dashboard01 />;
}
```

## Components

### Button

A versatile button component with multiple variants and sizes.

**Props:**
- `variant`: `'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'`
- `size`: `'default' | 'sm' | 'lg' | 'icon'`
- `asChild`: boolean - Render as a child element (useful for links)

### Card

A flexible card component with multiple sub-components.

**Sub-components:**
- `Card` - The main container
- `CardHeader` - Header section
- `CardTitle` - Title heading
- `CardDescription` - Description text
- `CardContent` - Main content area
- `CardFooter` - Footer section

## Development

```bash
# Install dependencies
pnpm install

# Start development server
pnpm dev

# Start Storybook
pnpm start:docs

# Run tests
pnpm test

# Build library
pnpm build

# Build Storybook
pnpm build:docs
```

## Documentation

For comprehensive documentation, visit our [Documentation Hub](./docs/README.md):

- **[Installation & Usage](./docs/README.md#quick-links)** - Quick start guide
- **[Component API](./docs/COMPONENTS.md)** - Detailed component reference  
- **[Development Guide](./docs/DEVELOPMENT.md)** - Contributing and development
- **[Design System](./docs/DESIGN-SYSTEM.md)** - Design tokens and patterns
- **[Changelog](./docs/CHANGELOG.md)** - Version history and changes

### Storybook

Explore components interactively in Storybook:

```bash
pnpm run start:docs
```

Visit http://localhost:6006 to see all components in action.

## Contributing

We welcome contributions! Please read our [Development Guide](./docs/DEVELOPMENT.md) for details on:

- Setting up the development environment
- Component development guidelines  
- Testing requirements
- Publishing workflow

### Quick Contributing Steps
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Follow our [Component Guidelines](./docs/DEVELOPMENT.md#component-development)
4. Add tests and documentation
5. Commit your changes (`git commit -m 'Add some amazing feature'`)
6. Push to the branch (`git push origin feature/amazing-feature`)
7. Open a Pull Request

## License

MIT License - see the [LICENSE](LICENSE) file for details.

## Dependencies

This library depends on:
- [Radix UI](https://www.radix-ui.com/) for accessible primitives
- [Tailwind CSS](https://tailwindcss.com/) for styling
- [Class Variance Authority](https://cva.style/) for component variants
- [Lucide React](https://lucide.dev/) for icons (optional)