NextJS

Create project

Run the init command to create a new Next.js project or to setup an existing one:

npx create-next-app@latest

Add Components

Install the Auralix UI package to start using components in your project.

npm install auralix-ui

This will also install necessary peer dependencies.

Configure

Add the following to your app/globals.css:

@import "tailwindcss";
@import "auralix-ui/styles.css";

@source "../../node_modules/auralix-ui/src";

Configure path aliases

Add the following to your tsconfig.json file:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Add utilities

Create a src/lib/utils.ts file with the following content:

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

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

Usage

You can then import components like this:

import { Button } from "auralix-ui";

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}