npm package: @khanhminh/design-system
Description: A reusable React component library built with TypeScript, Tailwind CSS, and Radix UI
Latest version: 1.14.2

# Design System UI Kit

A comprehensive, production-ready design system and component library built with React 18+, TypeScript, Tailwind CSS, and Radix UI. Export reusable, accessible, and themeable components for consistent design across your applications.

## Features

- **Component Library** - Pre-built, accessible UI components
- **Radix UI Foundation** - Built on top of Radix UI for accessibility
- **TypeScript** - Full type safety and IntelliSense support
- **Tailwind CSS** - Utility-first styling with PostCSS
- **Class Variance Authority** - Flexible component variants
- **Icons** - Lucide React icons included
- **ESLint + Prettier** - Code quality and formatting
- **Rollup + Vite** - Optimized build tools for library and app development

## Installation

```bash
npm install @khanhminh/design-system
# or
pnpm install @khanhminh/design-system
# or
yarn add @khanhminh/design-system
```

## Getting Started

### Development

1. Clone the repository

```bash
git clone https://github.com/KhanhMinh1392/design-system-ui-kit.git
cd design-system-ui-kit
```

2. Install dependencies

```bash
npm install
```

3. Start the dev server

```bash
npm run dev
```

4. View and develop components in your browser

### Building

Build the component library for production:

```bash
npm run build
```

This creates:
- `dist/index.js` - ES modules
- `dist/index.cjs` - CommonJS
- `dist/index.d.ts` - TypeScript definitions
- `dist/index.css` - Compiled styles

## Available Scripts

- `dev` - Start Vite dev server for component development
- `build` - Type-check and build library + styles with Rollup
- `build:vite` - Build with Vite only
- `build:lib` - Build library with Rollup only
- `lint` - Run ESLint to check code quality
- `preview` - Preview the production build locally
- `pre-commit` - Lint-staged for pre-commit hooks

## Project Structure

```
.
├─ src/
│  ├─ components/        # Reusable UI components
│  │  └─ ui/            # Base components
│  ├─ hooks/            # Custom React hooks
│  ├─ lib/              # Utility functions
│  ├─ assets/           # Static assets
│  ├─ index.ts          # Library entry point
│  ├─ index.css         # Global styles
│  └─ vite-env.d.ts     # Vite environment types
├─ public/              # Static files
├─ dist/                # Built library output
├─ rollup.config.js     # Rollup configuration
├─ vite.config.ts       # Vite configuration
├─ tsconfig.json        # TypeScript configuration
├─ tailwind.config.js   # Tailwind CSS configuration
├─ postcss.config.js    # PostCSS configuration
└─ package.json
```

## Usage

Import components from the library:

```tsx
import { Button } from '@khanhminh/design-system';

export function App() {
  return <Button>Click me</Button>;
}
```

## Component Development

Add new components to `src/components/ui/`:

1. Create a new file: `src/components/ui/my-component.tsx`
2. Export from `src/components/index.ts`
3. Export from `src/index.ts` for library users
4. Run `npm run build` to compile

## Styling

Components use Tailwind CSS with PostCSS. Customize styles in:
- `tailwind.config.js` - Tailwind configuration
- `postcss.config.js` - PostCSS plugins

## Code Quality

- **ESLint** - Linting with modern JavaScript rules
- **Prettier** - Automatic code formatting
- **Pre-commit hooks** - Lint-staged for automatic checks before commits

Configure ESLint in `eslint.config.js` and Prettier in `.prettierrc`.

## Publishing

To publish to npm:

1. Update the version in `package.json`
2. Build the library: `npm run build`
3. Publish: `npm publish`

The `files` field in `package.json` specifies which files are included in the published package.

## Browser Support

Supports all modern browsers (Chrome, Firefox, Safari, Edge) that support:
- ES2020
- CSS Custom Properties (CSS Variables)

## Contribution

This repo is intended as a personal template. If you want to suggest changes, open an issue or a PR against the original template repository.

## License

Choose a license for your project after cloning (e.g., MIT). This template does not impose a specific license.

---

If you'd like, I can also:

- add a short CONTRIBUTING.md
- add a LICENSE file (MIT by default)
- wire up GitHub Actions for CI (lint + build)

If you want any of those, tell me which and I'll add them.