Introduction to NebulaUI

NebulaUI is a modern, accessible component library built specifically for React and Next.js applications. Our components are designed with a clean black/white aesthetic, focusing on simplicity and usability.

Why NebulaUI?

• Clean Design: Minimalist black/white design philosophy without unnecessary gradients
• Fully Responsive: All components work seamlessly on mobile, tablet, and desktop
• Dark Mode: Built-in dark mode support with smooth transitions
• Accessible: WCAG 2.1 AA compliant with keyboard navigation and screen reader support
• TypeScript: Full type safety with excellent IntelliSense support
• Lightweight: Optimized bundle size with tree-shaking support
• Copy & Paste: Simple installation, just copy components into your project

What's Included?

NebulaUI provides a comprehensive set of components:

Actions

• Button: Versatile button component with multiple variants

Forms

• Input: Text input fields with validation
• Textarea: Multi-line text input
• Switch: Toggle switch for boolean inputs
• Checkbox: Checkbox with indeterminate state support

Layout

• Card: Flexible card component with header, content, and footer
• Tabs: Organize content into multiple panels

Display

• Badge: Small badge component for labels and status indicators
• Alert: Alert component for displaying important messages

Overlays

• Modal: Dialog windows with smooth animations

Getting Started

To get started with NebulaUI, follow these simple steps:

1. Install the package:

   npm install nebula-ui

2. Configure Tailwind CSS (if not already configured):

   // tailwind.config.js
   module.exports = {
     content: [
       './node_modules/nebula-ui/**/*.{js,ts,jsx,tsx}',
       // ... your other content paths
     ],
     darkMode: 'class',
   }

3. Start using components:

   import { Button, Input } from 'nebula-ui';
    
   export default function App() {
     return (
       <div>
         <Button variant="primary">Click me</Button>
         <Input placeholder="Enter text..." />
       </div>
     );
   }

Design Philosophy

NebulaUI follows a minimalist design approach:

• Black & White First: Clean, high-contrast design that works in any context
• No Unnecessary Gradients: Solid colors for better performance and accessibility
• Consistent Spacing: Uniform spacing system throughout all components
• Accessibility First: Every component is built with accessibility in mind

Browser Support

NebulaUI supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Next Steps

• Read the Installation Guide to set up NebulaUI in your project
• Browse Components to see all available components
• Check out the code examples for each component