Installation

This guide will help you install and configure NebulaUI in your React or Next.js project.

Prerequisites

Before installing NebulaUI, make sure you have:

Node.js 18+ installed
React 18+ or Next.js 13+ project
Tailwind CSS 3.0+ configured

Installation Steps

1. Install the Package

Install NebulaUI using your preferred package manager:

# Using npm
npm install nebula-ui
 
# Using yarn
yarn add nebula-ui
 
# Using pnpm
pnpm add nebula-ui

2. Configure Tailwind CSS

Make sure Tailwind CSS is configured in your project. If you haven't set it up yet:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Update your tailwind.config.js:

module.exports = {
  content: [
    './node_modules/nebula-ui/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
  ],
  darkMode: 'class', // Required for dark mode support
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Add Tailwind to Your CSS

Make sure you have Tailwind directives in your main CSS file:

@tailwind base;
@tailwind components;
@tailwind utilities;

4. Enable Dark Mode (Optional)

To enable dark mode, add the dark class to your HTML element:

// In your root layout or _app.tsx
<html className="dark">
  {/* or dynamically */}
  <html className={isDark ? 'dark' : ''}>

Usage Example

After installation, you can start using components:

import { Button, Input, Card } from 'nebula-ui';
 
export default function App() {
  return (
    <div className="space-y-4 p-8">
      <Card>
        <CardHeader>
          <CardTitle>Welcome</CardTitle>
        </CardHeader>
        <CardContent>
          <Input placeholder="Enter your name" />
          <Button variant="primary" className="mt-4">
            Submit
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}

TypeScript Support

NebulaUI is built with TypeScript and includes full type definitions. TypeScript will automatically provide IntelliSense and type checking:

import { Button, type ButtonProps } from 'nebula-ui';
 
const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Next.js App Router

If you're using Next.js 13+ with the App Router, make sure your components are marked as client components when needed:

'use client';
 
import { Button } from 'nebula-ui';
 
export default function Page() {
  return <Button>Click me</Button>;
}

Troubleshooting

Components not styling correctly

Make sure NebulaUI is included in your Tailwind content paths:

content: [
  './node_modules/nebula-ui/**/*.{js,ts,jsx,tsx}',
  // ... your paths
]

Dark mode not working

Ensure darkMode: 'class' is set in your Tailwind config and the dark class is applied to your HTML element.

Type errors

Make sure you're using TypeScript 5+ and have @types/react installed:

npm install -D @types/react @types/react-dom

Next Steps

Read the Introduction to learn more about NebulaUI
Browse Components to see all available components
Check individual component documentation for detailed usage