Nyxhora UI

Composable UI for Modern Builders

Features • Installation • Components • Documentation • Tech Stack

---

✨ Features

• 🎨 65+ Premium Components - Beautifully designed, accessible, and fully customizable
• 🌙 Dark Mode Support - Seamless dark/light theme switching with next-themes
• 📱 Fully Responsive - Mobile-first design that works on all devices
• ♿ Accessible - Built on Radix UI primitives for WCAG-compliant accessibility
• 🎭 Animation Ready - Powered by Framer Motion for smooth, delightful animations
• 🧩 Modular Design - Copy only the components you need
• 📝 TypeScript First - Full type safety with TypeScript support
• 🎯 Developer Experience - Intuitive APIs and comprehensive documentation

---

🚀 Installation

Prerequisites

• Node.js 18.17 or later
• npm, yarn, pnpm, or bun

Clone the repository

git clone https://github.com/nyxhora/nyxhora-ui.git

Navigate to the project

cd nyxhoraui

Install dependencies

npm install

or

yarn install

or

pnpm install

or

bun install

Start the development server

npm run dev

Open [http://localhost:3000](http://localhost:3000) to view the documentation and explore components.

---

## 🧱 Components


Nyxhora UI includes **75+ components** organized into the following categories:

### 📝 Form Components
| Component | Description |
|-----------|-------------|
| `Button` | Interactive button elements with variants |
| `Awesome Button` | Enhanced animated button component |
| `Magic Button` | Enhanced Magic button component |
| `Input` | Text input fields |
| `Textarea` | Multi-line text input |
| `Checkbox` | Selection controls |
| `Radio Group` | Radio button groups |
| `Select` | Selection dropdowns |
| `Slider` | Range input controls |
| `Switch` | Toggle switches |
| `Label` | Form labels |

### 🖼️ Display Components
| Component | Description |
|-----------|-------------|
| `Alert` | Display important messages |
| `Avatar` | User profile images |
| `Badge` | Status indicators and labels |
| `Shiny Card` | Shimmering shiny card |
| `Magic Card` | Animated magic card |
| `Magic Text` | Text with magic border effect |
| `Spotlight Text` | Stencil text with spotlight |
| `Variable Shadow Text` | Variable font shadow effect |
| `Sparkles` | Sparkles effect for text or components |
| `Component Showcard` | Component showcase card |
| `Skeleton` | Loading placeholder |
| `Spinner` | Loading spinner with variants |
| `Progress` | Progress indicators |
| `Separator` | Visual dividers |
| `Cover` | Cover image component |

### 🪟 Overlay Components
| Component | Description |
|-----------|-------------|
| `Dialog` | Modal dialog windows |
| `Sheet` | Slide-out panels |
| `Action Bar` | Expanding action list |
| `3D Card` | 3D perspective card |
| `Tooltip` | Hover information tips |
| `Sonner` | Toast notifications |
| `Dynamic Island` | iOS-style notification island |

### 🧭 Navigation
| Component | Description |
|-----------|-------------|
| `Navbar Menu` | Navigation menu items |
| `Tabs` | Tabbed navigation |
| `URL Tabs` | URL-synced tabs |
| `Floating Dock Dialog` | Enhanced dock with bottom sheet dialog |
| `Footer` | Page footer component |
| `Workspace Label` | Workspace switcher with member avatars |

### 📐 Layout
| Component | Description |
|-----------|-------------|
| `Scroll Area` | Custom scrollable containers |
| `Image Slider` | Responsive image slider |
| `Corner Grid` | Tech-inspired corner grid |
| `Image Grid` | Interactive hero image grid |

### ✨ Effects & Animations
| Component | Description |
|-----------|-------------|
| `Background Beams` | Animated beam effects |
| `Background Lines` | Animated line patterns |
| `Geist Background` | Flickering geist-inspired background |
| `Shooting Stars` | Animated starfield with shooting stars |
| `Color Drip` | Animated falling color lines |
| `Glowing Dot Grid` | Interactive dot grid with glow effects |
| `Glowing Effect` | Glow animations |
| `Sparkles` | Particle effects |
| `Spotlight` | Spotlight hover effects |
| `Smooth Cursor` | Smooth cursor following |
| `Animated Shiny Text` | Shimmering text effect |
| `Gradient Text` | Customizable gradient text |
| `Hover Reveal Text` | Blur-to-reveal text effect |
| `Flip Words` | Word flip animation |
| `Text Hover Effect` | Text hover animations |
| `Rainbow Button` | Animated rainbow gradient button |
| `Ants Card` | Card with animated walking ants |
| `Gradient Background` | Configurable gradient background |
| `Code Block` | Code block with syntax highlighting |
| `Anime Card` | Glassmorphism anime card |
| `Music Player` | Glassmorphism music player |

### 🛠 Utilities
| Component | Description |
|-----------|-------------|
| `Exit Intent Demo` | Exit intent detection demo |

---

## 📖 Documentation

Visit the [documentation site](https://ui.nyxhora.com/docs) to explore:

- **Getting Started** - Installation guides and setup instructions
- **Component API** - Props, variants, and usage examples
- **Live Examples** - Interactive demos for each component
- **Theming Guide** - Customize colors, fonts, and styles

---

## 🛠️ Tech Stack

| Technology | Purpose |
|------------|---------|
| [Next.js 16](https://nextjs.org/) | React framework with App Router |
| [React 19](https://react.dev/) | UI library |
| [TypeScript 5](https://www.typescriptlang.org/) | Type safety |
| [Tailwind CSS 4](https://tailwindcss.com/) | Utility-first styling |
| [Radix UI](https://www.radix-ui.com/) | Accessible primitives |
| [Framer Motion](https://www.framer.com/motion/) | Animations |
| [Lucide React](https://lucide.dev/) | Icon library |
| [React Hook Form](https://react-hook-form.com/) | Form handling |
| [Zod](https://zod.dev/) | Schema validation |
| [next-themes](https://github.com/pacocoursey/next-themes) | Theme management |
| [Recharts](https://recharts.org/) | Data visualization |

---

## 📁 Project Structure

nyxhoraui/ ├── app/ # Next.js App Router pages │ ├── docs/ # Documentation pages │ │ ├── components/ # Component documentation │ │ ├── installation/ # Installation guides │ │ └── changelog/ # Release notes │ └── page.tsx # Landing page ├── components/ │ └── ui/ # UI component library ├── hooks/ # Custom React hooks ├── lib/ # Utility functions & configs ├── public/ # Static assets └── styles/ # Global styles

---

## 🎨 Customization

### Theming

Nyxhora UI supports full theming via CSS variables. Customize your theme in your global CSS:

```css
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  /* ... more variables */
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  /* ... more variables */
}

Using Components

Import components directly from the @/registry/ui directory:

import { Button } from "@/registry/ui/button";
import { Card, CardHeader, CardTitle, CardContent } from "@/registry/ui/card";

export default function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Welcome to Nyxhora UI</CardTitle>
      </CardHeader>
      <CardContent>
        <Button variant="default">Get Started</Button>
      </CardContent>
    </Card>
  );
}

---

📜 Scripts

Command	Description
npm run dev	Start development server
npm run build	Build for production
npm run start	Start production server
npm run lint	Run ESLint

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📄 License

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

---

💖 Acknowledgments

• shadcn/ui - For inspiration on component architecture
• Radix UI - For accessible primitives
• Aceternity UI - For animation inspiration
• Tailwind CSS - For the utility-first CSS framework

---

Made with ❤️ by the Nyxhora Team

Website • Twitter • Discord