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)

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:

npm install react react-dom

CSS Setup

Import the CSS file in your application:

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:

/** @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)

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)

// 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

# 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:

• Installation & Usage - Quick start guide
• Component API - Detailed component reference
• Development Guide - Contributing and development
• Design System - Design tokens and patterns
• Changelog - Version history and changes

Storybook

Explore components interactively in Storybook:

pnpm run start:docs

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

Contributing

We welcome contributions! Please read our Development Guide 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
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 file for details.

Dependencies

This library depends on:

• Radix UI for accessible primitives
• Tailwind CSS for styling
• Class Variance Authority for component variants
• Lucide React for icons (optional)