npm package: @nextlevel_korea/design-system
Description: A modern React design system built with TypeScript and Tailwind CSS - The NextLevel Design System
Author: NextLevel
Latest version: 2.1.1

# NextLevel Design System

A modern React design system built with TypeScript and Tailwind CSS, now powered by Next.js.

## 🚀 Features

- **Next.js 15**: Latest Next.js with App Router
- **TypeScript**: Full type safety
- **Tailwind CSS**: Utility-first CSS framework
- **Responsive Design**: Mobile-first approach
- **Customizable Components**: Full color and styling customization
- **Storybook**: Component documentation and testing

## 📦 Installation

```bash
npm install @nextlevel_korea/design-system
```

## 🛠️ Development

### Prerequisites

- Node.js 18+
- npm or yarn

### Setup

1. Clone the repository:

```bash
git clone https://github.com/NextLevel-KR/design-system.git
cd design-system
```

2. Install dependencies:

```bash
npm install
```

3. Start development server:

```bash
npm run dev
```

4. Open [http://localhost:3000](http://localhost:3000) in your browser.

### Available Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run start` - Start production server
- `npm run lint` - Run ESLint
- `npm run storybook` - Start Storybook
- `npm run build-storybook` - Build Storybook

## 🎨 Components

### Header Component

A responsive navigation header with dropdown menus and mobile sidebar.

```tsx
import Header from '@nextlevel_korea/design-system/components/Header/Header'

const navList = [
  {
    idx: 1,
    name: 'Home',
    path: '/',
  },
  {
    idx: 2,
    name: 'Products',
    path: '/products',
    sub: [
      { idx: 1, name: 'Category 1', path: '/products/category1' },
      { idx: 2, name: 'Category 2', path: '/products/category2' },
    ],
  },
]

<Header
  logo="/logo.png"
  navList={navList}
  eventButton={{
    text: 'Get Started',
    onClick: () => console.log('Button clicked!'),
    className: 'bg-blue-500 text-white hover:bg-blue-600',
  }}
  colors={{
    headerBg: 'bg-white',
    navText: 'text-gray-600',
    navTextHover: 'hover:text-blue-500',
  }}
/>
```

### Footer Component

A flexible footer with sections, social links, and custom styling.

```tsx
import Footer from '@nextlevel_korea/design-system/components/Footer/Footer';

<Footer
  logo="/logo.png"
  companyInfo={{
    name: 'NextLevel',
    ceo: 'John Doe',
    businessNumber: '123-45-67890',
    phone: '010-1234-5678',
    email: 'contact@nextlevel.com',
    address: '123 Main St, City, Country',
  }}
/>;
```

## 🎨 Customization

All components support extensive customization through props:

### Color Customization

```tsx
const customColors = {
  // Background colors
  headerBg: 'bg-white',
  sidebarBg: 'bg-gray-50',

  // Text colors
  navText: 'text-gray-600',
  navTextHover: 'hover:text-blue-500',

  // Accent colors
  primary: 'bg-blue-500',
  primaryDark: 'bg-blue-600',

  // Border colors
  border: 'border-gray-200',

  // Shadow
  shadow: 'shadow-lg',
};
```

### Sidebar Position

```tsx
<Header
  sidebarPosition="right" // 'left' | 'right'
  // ... other props
/>
```

## 📚 Storybook

View all components and their variations in Storybook:

```bash
npm run storybook
```

Then open [http://localhost:6006](http://localhost:6006)

## 🔧 Migration from Vite

This project has been migrated from Vite to Next.js for better compatibility and performance. Key changes:

- **App Router**: Using Next.js 13+ App Router
- **Server Components**: Support for React Server Components
- **Built-in Optimization**: Automatic code splitting and optimization
- **Better TypeScript Support**: Enhanced TypeScript integration
- **Improved Development Experience**: Faster refresh and better error handling

## 📄 License

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

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

## 📞 Support

For support and questions, please contact:

- Email: support@nextlevel.com
- Website: https://nextlevel.com

---

Built with ❤️ by NextLevel Team