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

npm install @nextlevel_korea/design-system

🛠️ Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

1. Clone the repository:

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

2. Install dependencies:

npm install

3. Start development server:

npm run dev

4. Open 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.

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.

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: '[email protected]',
    address: '123 Main St, City, Country',
  }}
/>;

🎨 Customization

All components support extensive customization through props:

Color Customization

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

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

📚 Storybook

View all components and their variations in Storybook:

npm run storybook

Then open 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 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: [email protected]
• Website: https://nextlevel.com

Built with ❤️ by NextLevel Team