100xcoin UI - Next.js Component Library with Storybook

A modern, scalable React component library built with Next.js, TypeScript, and Tailwind CSS. This project features a comprehensive design system with Storybook integration for component development, testing, and documentation.

🚀 Features

Modern Tech Stack

• Next.js 10.1.3 - React framework for production
• TypeScript 4.2.3 - Type-safe JavaScript development
• Tailwind CSS 2.1.1 - Utility-first CSS framework
• Storybook 6.2.5 - Component development environment
• React 17.0.2 - Latest React features and optimizations

Component Library

• Reusable UI Components - Accordion, Button, Modal, Select, Tabs, and more
• Custom Design System - Unizen-branded color palette and typography
• Accessibility First - WCAG compliant components
• TypeScript Support - Full type safety and IntelliSense
• Storybook Integration - Interactive component playground

Developer Experience

• Hot Reload - Instant development feedback
• ESLint & Prettier - Code quality and formatting
• Husky Git Hooks - Pre-commit and pre-push validation
• Chromatic Integration - Visual regression testing
• SVG Support - Optimized SVG handling with @svgr/webpack

📦 Installation

Prerequisites

• Node.js 14.x or higher
• Yarn package manager

Setup

# Clone the repository
git clone https://github.com/anton-karlovskiy/nextjs-storybook-tailwindcss.git
cd nextjs-storybook-tailwindcss

# Install dependencies
yarn install

# Start development server
yarn dev

🛠️ Available Scripts

Command	Description
yarn dev	Start Next.js development server on port 3000
yarn build	Build production-ready application
yarn start	Start production server
yarn storybook	Launch Storybook on port 6006
yarn build-storybook	Build static Storybook for deployment
yarn lint	Run ESLint for code quality checks
yarn lint-fix	Auto-fix ESLint issues
yarn type-check	Run TypeScript type checking
yarn test-all	Run all quality checks (lint + type-check)
yarn format	Format code with Prettier
yarn chromatic	Run visual regression tests

🎨 Design System

Color Palette

The project uses a custom Unizen color scheme:

• Primary Colors - Java green (#01b1ae) with variants
• Secondary Colors - Vermilion red (#fe4206) with variants
• Neutral Colors - Oxford blue (#374e5e), Regent gray (#82919b)
• Background Colors - White lilac (#f7f7fd), Alabaster (#fbfbfb)

Typography

• Primary Text - Oxford blue (#374e5e)
• Secondary Text - Regent gray (#82919b)
• Custom Font Sizes - Extended Tailwind typography scale

Component Variants

• Button Variants - Contained, Outlined, Text
• Button Colors - Default, Primary, Secondary
• Interactive States - Hover, Focus, Disabled, Pending

📚 Component Documentation

Core Components

UI Components

• UnizenButton - Customizable button with multiple variants
• UnizenInput - Form input component
• UnizenLink - Styled link component

Layout Components

• Accordion - Collapsible content panels
• Modal - Overlay dialogs and popups
• Paper - Elevated content containers
• Tabs - Tabbed navigation interface

Form Components

• Select - Dropdown selection component
• RangeSlider - Numeric range input
• SwapCard - Trading interface card
• SwapCurrencyField - Currency input field

Data Display

• Chip - Small status indicators
• List - Structured data lists

Storybook Stories

Each component includes comprehensive Storybook stories showcasing:

• All component variants and states
• Interactive controls for testing
• Code examples and usage patterns
• Accessibility guidelines

🏗️ Project Structure

100xcoin-ui/
├── components/           # Reusable UI components
│   ├── Accordion/       # Collapsible panels
│   ├── Chip/           # Status indicators
│   ├── Modal/          # Overlay dialogs
│   ├── Select/         # Dropdown components
│   ├── Tabs/           # Tab navigation
│   └── UI/             # Core UI components
├── pages/              # Next.js pages
│   ├── dashboard/      # Dashboard components
│   ├── modules/        # Module pages
│   └── trade/          # Trading interface
├── parts/              # Layout components
│   ├── Layout/         # Main layout wrapper
│   ├── Sidebar/        # Navigation sidebar
│   └── Logo/           # Brand components
├── styles/             # Global styles and constants
├── assets/             # Static assets and icons
├── stories/            # Storybook stories
└── utils/              # Utility functions

🎯 Use Cases

DeFi Applications

• Trading Interfaces - Swap cards and currency fields
• Dashboard Components - Balance cards and allocation displays
• Staking Interfaces - Token staking and reward displays

Component Libraries

• Design Systems - Consistent UI components
• Prototyping - Rapid interface development
• Documentation - Interactive component showcase

Enterprise Applications

• Admin Dashboards - Data visualization components
• User Interfaces - Form controls and navigation
• Mobile-First Design - Responsive component library

🔧 Configuration

Tailwind CSS

Custom configuration with Unizen brand colors and extended utilities:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: { /* Unizen Java colors */ },
        secondary: { /* Unizen Vermilion colors */ }
      }
    }
  }
}

Next.js

Optimized webpack configuration for SVG handling:

// next.config.js
module.exports = {
  webpack: config => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack']
    });
    return config;
  }
};

TypeScript

Strict type checking with custom type definitions:

// @types/index.d.ts
declare module '*.svg' {
  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
  export default content;
}

🚀 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy to Vercel
vercel --prod

Netlify

# Build the project
yarn build

# Deploy to Netlify
# Upload the .next folder to Netlify

Docker

FROM node:14-alpine
WORKDIR /app
COPY package*.json ./
RUN yarn install
COPY . .
RUN yarn build
EXPOSE 3000
CMD ["yarn", "start"]

🤝 Contributing

Development Workflow

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes
4. Run quality checks: yarn test-all
5. Commit your changes: git commit -m 'Add amazing feature'
6. Push to the branch: git push origin feature/amazing-feature
7. Open a Pull Request

Code Standards

• Follow TypeScript best practices
• Use Prettier for code formatting
• Write comprehensive Storybook stories
• Include accessibility attributes
• Test components across different screen sizes

📄 License

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

🔗 Links

• Live Demo - View deployed application
• Storybook - Interactive component library
• Documentation - Component documentation
• Issues - Report bugs or request features

🏷️ Keywords

React, Next.js, TypeScript, Tailwind CSS, Storybook, Component Library, UI Components, Design System, DeFi, Trading Interface, Dashboard, Web Development, Frontend, JavaScript, CSS, HTML, Accessibility, Responsive Design, Modern Web Development

---

Built with ❤️ using Next.js, TypeScript, and Tailwind CSS