Installation

Get started with Nyxhora UI by following these installation steps to set up the component library in your project.

Prerequisites

Before you begin, make sure you have the following installed:

  • Node.js 18.17 or later
  • React 18 or later
  • Next.js 14 or later (recommended)

Quick Installation

1

Create a new project

Start by creating a new Next.js project if you don't have one:

bash
1 lines
1
npx create-next-app@latest my-app --typescript --tailwind --eslint
2

Install dependencies

Install the required dependencies for Nyxhora UI components:

bash
1 lines
1
npm install class-variance-authority clsx tailwind-merge lucide-react
3

Configure utilities

Create a lib/utils.ts file with the cn helper:

typescript
6 lines
1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
4

Add components

Copy the component files from our documentation into your components/ui directory.

Project Structure

Here's the recommended project structure for using Nyxhora UI:

plaintext
15 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── app
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── components
│   └── ui
│       ├── button.tsx
│       ├── card.tsx
│       └── ...
├── lib
│   └── utils.ts
├── tailwind.config.ts
└── package.json

Next Steps

You're all set! Check out the component documentation to start building: