🚀 Nexus UI - Modern React Component Library

Build stunning applications with our modern React component library

📖 Documentation • 🎯 Examples • 🔧 Playground

✨ Features

• 🎨 Beautiful Design System - Comprehensive design tokens with perfect color combinations
• ⚡ Performance First - Optimized bundle size with tree-shaking support
• 🎯 TypeScript Native - Built from ground up with TypeScript
• 🌈 Smooth Animations - Powered by Framer Motion for delightful interactions
• ♿ Accessibility Ready - WCAG 2.1 compliant with keyboard navigation
• 🎭 Theme Support - Light/dark mode with customizable themes
• 📱 Responsive Design - Mobile-first approach with responsive utilities
• 🧩 Modular Architecture - Import only what you need

📦 Installation

# npm
npm install nexus-ui framer-motion

# yarn
yarn add nexus-ui framer-motion

# pnpm
pnpm add nexus-ui framer-motion

🚀 Quick Start

import { NexusButton, NexusCard, NexusInput } from 'nexus-ui'
import 'nexus-ui/styles.css' // Import the CSS

function App() {
  return (
    <NexusCard variant="elevated" padding="lg">
      <h2>Welcome to Nexus UI</h2>
      <NexusInput 
        label="Email" 
        type="email" 
        placeholder="Enter your email"
      />
      <NexusButton variant="gradient" size="lg">
        Get Started
      </NexusButton>
    </NexusCard>
  )
}

🎨 Components

Core Components

| Component | Description | Status | |-----------|-------------|---------| | NexusButton | Interactive buttons with multiple variants | ✅ Ready | | NexusInput | Form inputs with validation states | ✅ Ready | | NexusCard | Flexible container component | ✅ Ready | | NexusHeading | Typography heading component | ✅ Ready | | NexusText | Text component with variants | ✅ Ready | | NexusBadge | Status and label badges | ✅ Ready | | NexusModal | Accessible modal dialogs | ✅ Ready |

Advanced Components (Coming Soon)

• NexusTable - Data tables with sorting and filtering
• NexusDatePicker - Date and time selection
• NexusTooltip - Contextual help tooltips
• NexusNavigation - Navigation components
• NexusForm - Form wrapper with validation
• NexusChart - Data visualization components

🎯 Component Variants

Button Variants

<NexusButton variant="default">Default</NexusButton>
<NexusButton variant="secondary">Secondary</NexusButton>
<NexusButton variant="outline">Outline</NexusButton>
<NexusButton variant="ghost">Ghost</NexusButton>
<NexusButton variant="gradient">Gradient</NexusButton>
<NexusButton variant="hero">Hero</NexusButton>

Card Variants

<NexusCard variant="default">Default Card</NexusCard>
<NexusCard variant="outlined">Outlined Card</NexusCard>
<NexusCard variant="elevated">Elevated Card</NexusCard>
<NexusCard variant="interactive">Interactive Card</NexusCard>
<NexusCard variant="gradient">Gradient Card</NexusCard>
<NexusCard variant="glass">Glass Card</NexusCard>

Badge Variants

<NexusBadge variant="default">Default</NexusBadge>
<NexusBadge variant="success">Success</NexusBadge>
<NexusBadge variant="warning">Warning</NexusBadge>
<NexusBadge variant="error">Error</NexusBadge>
<NexusBadge variant="gradient">Premium</NexusBadge>

🎨 Design System

Colors

• Primary: Modern blue (#3B82F6)
• Secondary: Elegant purple (#8B5CF6)
• Success: Modern green (#10B981)
• Warning: Warm amber (#F59E0B)
• Error: Modern red (#EF4444)

Typography

• Font Family: Inter (sans-serif)
• Font Weights: 300, 400, 500, 600, 700, 800
• Font Sizes: Responsive scale from 12px to 72px

Animations

• Duration: Fast (150ms), Normal (250ms), Slow (350ms)
• Easing: Custom cubic-bezier curves for natural motion
• Interactions: Hover, focus, and tap animations

🛠️ Customization

CSS Variables

:root {
  --primary: 221 83% 53%;
  --secondary: 262 83% 58%;
  --success: 142 71% 45%;
  --warning: 38 92% 50%;
  --error: 0 84% 60%;
  
  /* Custom gradients */
  --gradient-primary: linear-gradient(135deg, hsl(221 83% 53%), hsl(262 83% 58%));
  --gradient-secondary: linear-gradient(135deg, hsl(142 71% 45%), hsl(221 83% 53%));
}

Tailwind Configuration

module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      colors: {
        primary: "hsl(var(--primary))",
        secondary: "hsl(var(--secondary))",
        // ... extend with Nexus UI tokens
      }
    }
  },
  plugins: [require("tailwindcss-animate")]
}

📚 Documentation & Examples

• Component Documentation - Detailed API reference
• Design Guidelines - Design principles and patterns
• Storybook - Interactive component explorer
• Code Examples - Real-world usage examples
• Migration Guide - Migrating from other libraries

🧪 Development

# Clone the repository
git clone https://github.com/nexusui/nexus-ui.git
cd nexus-ui

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Build for production
npm run build

# Run Storybook
npm run storybook

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your 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

📄 License

MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Radix UI - Unstyled, accessible components
• Tailwind CSS - Utility-first CSS framework
• Framer Motion - Motion library for React
• Class Variance Authority - Component variant utilities

⭐ Star us on GitHub • 🐛 Report Bug • 💡 Request Feature

Made with ❤️ by the Nexus UI team