Design System

A reusable design system built with React, TypeScript, Tailwind CSS, and Radix UI.

Installation

npm install @your-username/design-system
# or
yarn add @your-username/design-system
# or
pnpm add @your-username/design-system

Peer Dependencies

Make sure you have the following installed in your project:

npm install react react-dom

Setup

1. Configure Tailwind CSS

Add the design system path to your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    // Add this line
    './node_modules/@your-username/design-system/dist/**/*.{js,mjs}',
  ],
  theme: {
    extend: {},
  },
  plugins: [require('tailwindcss-animate')],
}

2. Import Components

import { Button, Card, Input } from '@your-username/design-system';

function App() {
  return (
    <Card>
      <Input placeholder="Enter text..." />
      <Button>Click me</Button>
    </Card>
  );
}

Available Components

UI Components

• Accordion
• Alert Dialog
• Alert
• Aspect Ratio
• Avatar
• Badge
• Button
• Calendar
• Card
• Carousel
• Checkbox
• Command
• Context Menu
• Dialog
• Drawer
• Dropdown Menu
• Form
• Hover Card
• Input
• Label
• Menubar
• Navigation Menu
• Pagination
• Popover
• Progress
• Radio Group
• Resizable
• Scroll Area
• Select
• Separator
• Sheet
• Skeleton
• Slider
• Switch
• Table
• Tabs
• Textarea
• Toast
• Toggle
• Tooltip

Design System Components

• Header
• Section Header
• Sidebar Navigation
• Token Pill

Utilities

• cn - Class name utility function
• Theme providers
• Theme switcher

License

MIT