@trainery/design-system

A comprehensive React design system built with shadcn/ui components, TypeScript, and Tailwind CSS for workforce management applications.

🚀 Features

• 20+ UI Components - Button, Card, Dialog, Input, Table, and more
• TypeScript Support - Fully typed components with IntelliSense
• Tailwind CSS - Utility-first styling with custom design tokens
• Accessible - Built on Radix UI primitives for accessibility
• Customizable - Easy theming and component customization
• Tree Shakeable - Import only what you need

📦 Installation

Prerequisites

Make sure you have the following peer dependencies installed:

npm install react react-dom tailwindcss

Install the Package

# Using npm
npm install @trainery/design-system

# Using yarn
yarn add @trainery/design-system

# Using pnpm
pnpm add @trainery/design-system

Configure Tailwind CSS

Add the design system's CSS to your main CSS file:

@import '@trainery/design-system/styles';

Update your tailwind.config.js:

module.exports = {
  content: [
    // your app's content paths
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@trainery/design-system/dist/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // Your custom theme extensions
    },
  },
  plugins: [
    require('@trainery/design-system/tailwind'),
  ],
}

🎯 Quick Start

import React from 'react';
import { Button, Card, Input } from '@trainery/design-system';

function App() {
  return (
    <div className="p-8">
      <Card className="max-w-md">
        <h2 className="text-xl font-semibold mb-4">Welcome</h2>
        <Input placeholder="Enter your name" className="mb-4" />
        <Button>Get Started</Button>
      </Card>
    </div>
  );
}

export default App;

📚 Available Components

• Avatar - User profile pictures
• Badge - Status indicators and labels
• Breadcrumb - Navigation breadcrumbs
• Button - Interactive buttons with variants
• Card - Content containers
• Checkbox - Form checkboxes
• Dialog - Modal dialogs
• Dropdown Menu - Context menus
• Input - Form input fields
• Label - Form labels
• Pagination - Data pagination
• Progress - Progress indicators
• Scroll Area - Custom scrollable areas
• Select - Dropdown selects
• Separator - Visual dividers
• Sheet - Slide-out panels
• Switch - Toggle switches
• Table - Data tables
• Tabs - Tabbed interfaces
• Text - Typography components
• Toggle Group - Button groups
• Tooltip - Hover information

🎨 Theming

The design system supports custom theming through CSS variables:

:root {
  --primary: 210 40% 98%;
  --primary-foreground: 222.2 84% 4.9%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  /* ... more variables */
}

📖 Documentation

For detailed component documentation and examples, visit our Storybook or check the individual component files in the source code.

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

🆘 Support

If you encounter any issues or have questions, please:

1. Check the Issues page
2. Create a new issue with detailed information
3. Contact the Trainery team

🔄 Changelog

v1.0.0

• Initial release
• 20+ UI components
• TypeScript support
• Tailwind CSS integration

design-system