EmpireUI

Docs

Installation

Empire UI is designed to be easy to install and integrate into your React and Next.js projects. Choose the installation method that works best for your workflow.

Package Installation

bash

npm install @empireui/components

CLI Installation

For a faster setup, you can use our CLI tool to initialize a new project with Empire UI:

bash

npx empireui@latest init

Manual Setup

If you're setting up manually, follow these steps:

Install the package as shown above
Set up Tailwind CSS in your project (if not already set up)
Update your tailwind.config.js with the following:

/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: [
  './pages/**/*.{ts,tsx}',
  './components/**/*.{ts,tsx}',
  './app/**/*.{ts,tsx}',
  './src/**/*.{ts,tsx}',
  './node_modules/@empireui/components/dist/**/*.{js,ts,jsx,tsx}', // Add this line
],
theme: {
  extend: {
    colors: {
      border: "hsl(var(--border))",
      input: "hsl(var(--input))",
      ring: "hsl(var(--ring))",
      background: "hsl(var(--background))",
      foreground: "hsl(var(--foreground))",
      primary: {
        DEFAULT: "hsl(var(--primary))",
        foreground: "hsl(var(--primary-foreground))",
      },
      secondary: {
        DEFAULT: "hsl(var(--secondary))",
        foreground: "hsl(var(--secondary-foreground))",
      },
      destructive: {
        DEFAULT: "hsl(var(--destructive))",
        foreground: "hsl(var(--destructive-foreground))",
      },
      muted: {
        DEFAULT: "hsl(var(--muted))",
        foreground: "hsl(var(--muted-foreground))",
      },
      accent: {
        DEFAULT: "hsl(var(--accent))",
        foreground: "hsl(var(--accent-foreground))",
      },
      popover: {
        DEFAULT: "hsl(var(--popover))",
        foreground: "hsl(var(--popover-foreground))",
      },
      card: {
        DEFAULT: "hsl(var(--card))",
        foreground: "hsl(var(--card-foreground))",
      },
    },
    borderRadius: {
      lg: "var(--radius)",
      md: "calc(var(--radius) - 2px)",
      sm: "calc(var(--radius) - 4px)",
    },
  },
},
plugins: [require("tailwindcss-animate")],
}

Usage Example

After installation, you can import components directly:

jsx

// Basic usage
import { Button, AuroraBackground } from '@empireui/components';

function MyComponent() {
return (
  <AuroraBackground>
    <div className="flex flex-col items-center justify-center min-h-screen p-6">
      <h1 className="text-4xl font-bold mb-6 text-white">My AI Application</h1>
      <Button>Get Started</Button>
    </div>
  </AuroraBackground>
);
}

Environment Variables

Some AI-enabled components require API keys to function properly. Create a .env.local file in your project root with the following variables:

plaintext

# OpenAI API key for AI components
OPENAI_API_KEY=your_openai_api_key

# Optional: Groq API key for faster inference
GROQ_API_KEY=your_groq_api_key

Additional Peer Dependencies

Empire UI has the following peer dependencies that you might need to install:

bash

npm install framer-motion react-dom tailwindcss tailwindcss-animate

Troubleshooting

If you encounter any issues during installation:

Make sure you've installed all peer dependencies.
Check that your Tailwind CSS configuration includes the Empire UI component paths.
Verify that your environment variables are set up correctly.
Clear your cache and node_modules folder if you're updating from a previous version.

For more detailed information, visit our GitHub repository or join our Discord community.