DesignKit UI - Modern React Component Library

A comprehensive, modern React component library built with Tailwind CSS, Material UI, and Unisys Design System. Create beautiful, accessible interfaces with confidence.

🚀 Deployment Ready

This project is fully configured for Vercel deployment with optimized build settings and proper routing configuration.

Quick Deploy to Vercel

Or follow the detailed deployment guide.

✨ Features

• Modern React: Built with React 18+ and TypeScript
• Material UI Integration: Beautiful components with Unisys brand styling
• Responsive Design: Mobile-first approach with Tailwind CSS
• Interactive Demos: Live component previews with real-time customization
• Dark/Light Theme: Seamless theme switching
• Accessibility: WCAG compliant components
• Performance Optimized: Code splitting and lazy loading
• Production Ready: Optimized build configuration for deployment

🛠 Tech Stack

• React 18 - Modern React with hooks and suspense
• TypeScript - Type-safe development
• Vite - Lightning fast build tool
• Material UI - Comprehensive component library
• Tailwind CSS - Utility-first CSS framework
• React Router - Client-side routing
• Radix UI - Unstyled, accessible components
• Lucide React - Beautiful & consistent icons

🏃‍♂️ Getting Started

Prerequisites

• Node.js 18 or later
• npm, yarn, or pnpm

Installation

1. Clone the repository:

git clone https://github.com/saichandan181/flow-ui-components.git
cd flow-ui-components

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open http://localhost:8080 in your browser.

📦 Build & Deployment

Development Build

npm run build:dev

Production Build

npm run build:prod

Vercel Deployment

npm run build:vercel

The project includes optimized configuration for:

• Static asset caching
• Code splitting
• Bundle optimization
• Security headers
• SPA routing support

🧪 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run build:prod - Optimized production build
• npm run build:vercel - Build with linting fixes for Vercel
• npm run preview - Preview production build locally
• npm run lint - Run ESLint
• npm run lint:fix - Fix linting issues
• npm run type-check - TypeScript type checking

📁 Project Structure

src/
├── components/           # Reusable UI components
│   ├── ui/              # Base UI components (shadcn/ui)
│   ├── Layout.tsx       # App layout component
│   ├── Sidebar.tsx      # Navigation sidebar
│   └── ...
├── pages/               # Page components
│   ├── components/      # Component documentation pages
│   ├── Introduction.tsx # Home page
│   └── ...
├── contexts/            # React contexts
├── lib/                 # Utility functions
└── styles/              # Global styles

🎨 Component Categories

Navigation & Layout

• Sidebar - Responsive navigation
• Layout - App shell structure

Form Elements

• Button - Interactive buttons with Unisys styling
• Checkbox - Styled checkboxes with custom states
• Radio Button - Radio button groups
• Switch - Toggle switches
• Slider - Range sliders
• Date Picker - Date selection components

Data Display

• Table - Data tables with sorting and filtering
• Progress - Progress bars and loaders
• Accordion - Collapsible content sections

Feedback

• Alert - Status and notification alerts
• Toast - Toast notifications
• Tooltip - Hover tooltips
• Loader - Loading indicators

Utility

• Menu - Dropdown and context menus

🎯 Unisys Design System

Components follow the Unisys Hudson Design System with:

• Purposeful Teal (#007173) - Primary brand color
• Propel Mint (#00E28B) - Secondary accent color
• Bold Teal (#003134) - Dark variant
• Consistent spacing, typography, and interaction patterns
• Accessibility-first design approach

🔧 Customization

Theme Configuration

The project uses a custom theme configuration that can be modified in:

• src/contexts/ThemeContext.tsx - Theme provider
• tailwind.config.ts - Tailwind customization
• Component-level styling with CSS modules or styled-components

Adding New Components

1. Create component in src/components/
2. Add documentation page in src/pages/components/
3. Update routing in src/App.tsx
4. Add navigation link in src/components/Sidebar.tsx

📖 Documentation

Each component includes:

• Interactive demos with live previews
• Code examples with copy functionality
• Props documentation
• Usage guidelines
• Accessibility notes

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

🙏 Acknowledgments

• Material UI for the component foundation
• Tailwind CSS for utility-first styling
• Radix UI for accessible primitives
• Lucide for beautiful icons
• Unisys for design system guidelines

Built with ❤️ for modern web development