🌟 Solaris UI

Modern, Production-Ready UI Components Library for React

🌐 Live Demo • 📚 Documentation • 🐛 Report Bug • ✨ Request Feature

---

🚀 Overview

Solaris UI is a comprehensive, modern UI component library designed for React applications. Built with TypeScript and Tailwind CSS, it provides developers with production-ready components, stunning animations, powerful hooks, and customizable themes to accelerate development while maintaining design consistency.

✨ Key Features

🎨 Rich Component Library

• 25+ Production-Ready Components including buttons, modals, navigation, forms, and data display
• Fully Responsive and mobile-first design approach
• Accessibility-First with ARIA support and keyboard navigation
• Type-Safe with comprehensive TypeScript definitions

🎭 Advanced Animations

• 25+ Pre-built Animations including bounce, fade, slide, scale, and morphing effects
• Framer Motion Integration for smooth, performant animations
• Custom Animation Presets with easy-to-use configuration
• Interactive Elements like confetti, ripple effects, and parallax scrolling

🎯 Powerful Custom Hooks

• 20+ Utility Hooks for common functionality
• Performance Optimized with proper memoization and cleanup
• TypeScript Ready with full type support

🎨 Advanced Theming System

• Multiple Pre-built Themes including dark/light mode support
• Fully Customizable color schemes and design tokens
• CSS Variables for runtime theme switching
• Theme Generator for creating custom themes

🛠️ Developer Experience

• Copy-Paste Ready components with clear documentation
• Zero Configuration setup for most projects
• Tree Shakeable for optimal bundle sizes
• MDX Documentation with live code examples

📦 Components Collection

🧩 UI Components (25+)

Component	Description	Features
Button	Versatile button component	Multiple variants, sizes, loading states
Modal	Responsive modal dialogs	Backdrop blur, animations, portal rendering
Navbar	Navigation components	Responsive, mobile menu, dropdown support
Sidebar	Collapsible sidebar	Mobile-friendly, customizable width
Avatar	User profile pictures	Group support, fallback handling
Badge	Status indicators	Multiple variants, custom colors
Toast	Notification system	Auto-dismiss, positioning, rich content
Dropdown	Contextual menus	Keyboard navigation, positioning
Checkbox	Form checkboxes	Indeterminate state, custom styling
Switch	Toggle switches	Smooth animations, label support
Slider	Range inputs	Multi-handle, custom marks
Timeline	Process visualization	Vertical/horizontal, custom icons
Footer	Page footers	Multi-column, responsive
Feature Card	Showcase cards	Hover effects, icon support
Video Card	Media display	Lazy loading, controls
Banner Alert	Important notices	Dismissible, action buttons
Beacon	Attention indicators	Pulsing animations, custom colors
FAQ List	Accordion FAQ	Smooth expand/collapse
Grid Layout	Responsive grids	Auto-fit, custom breakpoints
Social Tags	Social media links	Icon integration, hover effects
Top Button	Scroll to top	Smooth scrolling, auto-hide
Typography	Text components	Consistent styling, responsive
Code Preview	Syntax highlighting	Multiple themes, copy functionality
Float Navbar	Floating navigation	Auto-hide on scroll, blur effects
Notification	Alert system	Rich content, positioning

🎭 Animations (25+)

Animation	Description	Use Cases
Bounce	Spring-like bouncing	Buttons, icons, call-to-actions
Fade Transitions	Smooth opacity changes	Page transitions, modals
Slide Effects	Directional movement	Sidebars, notifications
Scale Animations	Size transformations	Hover effects, focus states
Rotate Effects	Spinning animations	Loading indicators, icons
Morph	Shape transformations	Dynamic icons, state changes
Parallax	Depth scrolling	Hero sections, backgrounds
Ripple	Material-style ripples	Button interactions
Confetti	Celebration effects	Success states, achievements
Typewriter	Text animations	Dynamic content reveal
Wave	Flowing animations	Loading states, backgrounds
Stagger	Sequential animations	List items, gallery reveals

🎯 Custom Hooks (20+)

Hook	Description	Functionality
useCarousel	Carousel management	Auto-play, navigation, indicators
useClickOutside	Outside click detection	Modal closing, dropdown hiding
useClipboard	Clipboard operations	Copy/paste functionality
useDragAndDrop	Drag & drop logic	File uploads, list reordering
useElementSize	Element dimensions	Responsive calculations
useInView	Intersection observer	Lazy loading, animations
useKeyboard	Keyboard shortcuts	Accessibility, navigation
useMediaQuery	Responsive breakpoints	Conditional rendering
useScrollProgress	Scroll tracking	Progress indicators
useVirtualList	List virtualization	Performance optimization
useFormState	Form management	Validation, state handling
useUndoRedo	History management	Text editors, canvas apps
useHoverIntent	Smart hover detection	Tooltip delays, menus
useDebouncedValue	Value debouncing	Search inputs, API calls
useLockBodyScroll	Scroll prevention	Modal overlays
useContextMenu	Right-click menus	Custom context actions
useFloating	Positioning engine	Tooltips, popovers
useTableOfContents	TOC generation	Documentation, articles
useMeasureFPS	Performance monitoring	Debug overlays
useResponsiveValue	Breakpoint values	Dynamic styling

🎨 Theme System

Solaris UI includes a comprehensive theming system with:

• Pre-built Themes: Mint, Ocean, Sunset, Forest, and more
• Dark/Light Mode: Automatic system preference detection
• Custom Themes: Easy theme creation with CSS variables
• Runtime Switching: Dynamic theme changes without page reload
• Color Palette: Carefully crafted color schemes for accessibility

🛠️ Technology Stack

Technology	Version	Purpose
React	19.0+	Core UI framework
TypeScript	5.0+	Type safety
Tailwind CSS	3.4+	Utility-first styling
Framer Motion	11.14+	Animations
Next.js	15.0+	Framework (for docs)
Lucide React	Latest	Icon system
React Icons	5.4+	Extended icons

🚀 Quick Start

Prerequisites

Ensure your project has these dependencies:

npm install react react-dom typescript tailwindcss framer-motion

Installation

1. Choose and Copy: Browse our component library and copy the component code
2. Create Component File: Create a new .tsx file in your components directory
3. Paste and Customize: Paste the code and customize as needed
4. Import and Use: Import the component in your application

Example Usage

// components/CustomButton.tsx
interface CustomButtonProps {
  label: string;
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  onClick?: () => void;
  loading?: boolean;
}

const CustomButton: React.FC<CustomButtonProps> = ({ 
  label, 
  variant = 'primary',
  size = 'md',
  onClick,
  loading = false
}) => {
  const baseStyles = "font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2";
  
  const variants = {
    primary: "bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500",
    secondary: "bg-gray-600 hover:bg-gray-700 text-white focus:ring-gray-500",
    outline: "border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500"
  };
  
  const sizes = {
    sm: "px-3 py-1.5 text-sm",
    md: "px-4 py-2 text-base",
    lg: "px-6 py-3 text-lg"
  };

  return (
    <button
      onClick={onClick}
      disabled={loading}
      className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${
        loading ? 'opacity-50 cursor-not-allowed' : ''
      }`}
    >
      {loading ? 'Loading...' : label}
    </button>
  );
};

export default CustomButton;

// App.tsx
import CustomButton from './components/CustomButton';

function App() {
  return (
    <div className="p-8">
      <CustomButton 
        label="Get Started" 
        variant="primary" 
        size="lg"
        onClick={() => console.log('Button clicked!')}
      />
    </div>
  );
}

export default App;

📁 Recommended Project Structure

your-project/
├── components/
│   ├── ui/           # Solaris UI components
│   │   ├── button.tsx
│   │   ├── modal.tsx
│   │   └── ...
│   ├── animations/   # Animation components
│   └── layout/       # Layout components
├── hooks/            # Custom hooks
├── styles/           # Global styles
└── types/            # TypeScript definitions

🔧 Configuration

Tailwind CSS Setup

Add to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      animation: {
        'bounce-in': 'bounceIn 0.6s ease-out',
        'fade-in': 'fadeIn 0.3s ease-in-out',
        'slide-up': 'slideUp 0.4s ease-out',
      },
    },
  },
  plugins: [],
}

Theme Variables

Add to your global CSS:

:root {
  --background: #ffffff;
  --foreground: #000000;
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  /* Add more theme variables */
}

[data-theme="dark"] {
  --background: #1f2937;
  --foreground: #f9fafb;
  /* Dark theme overrides */
}

📚 Documentation & Examples

• Live Demo - Interactive component playground
• Installation Guide - Complete setup instructions
• Component Documentation - Detailed API reference
• Animation Guide - Animation integration examples
• Hook Reference - Custom hooks documentation
• Theme Customization - Theming guide

🤝 Contributing

I'm not expecting any contributions right now!

📄 License

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

👨‍💻 Author

Naseem Ansari

• GitHub: @gitNaseem745
• LinkedIn: Naseem Ansari
• Email: [email protected]
• Twitter: @solaris_ui

🙏 Acknowledgments

• Tailwind CSS for the utility-first CSS framework
• Framer Motion for powerful animations
• Lucide for beautiful icons
• React for the amazing framework

📊 Project Stats

---

⭐ Star this repository if you find it helpful!

Built with ❤️ by the Solaris UI team