Installation

Set Up Your Project

Name: Aurenza UI
Author: Aurenza UI

Step-by-step guide to configure Next.js, install Tailwind CSS, and drop in Aurenza UI components.

Create a Next.js project

Start a fresh Next.js project with TypeScript and App Router.

npx create-next-app@latest my-app --ts --tailwind --app --src-dir

Install Tailwind CSS v4

If adding to an existing project, install Tailwind CSS and the PostCSS plugin.

npm install tailwindcss @tailwindcss/postcss postcss

Configure globals.css

Import Tailwind into your main CSS stylesheet.

step-3.tsx

1@import "tailwindcss";

Install Lucide & React Icons

Install the icon libraries required by interactive components and brand icons.

npm install lucide-react react-icons

Copy a component

Choose any component from the collection and paste it into your local components folder.

step-5.tsx

1'use client';
2import React from 'react';
3
4export default function MovingBorderButton() {
5  return (
6    <div className="relative inline-block overflow-hidden rounded-xl p-[2px]">
7      <div className="absolute inset-[-1000%] animate-[spin_4s_linear_infinite]
8        bg-[conic-gradient(from_90deg_at_50%_50%,#2563eb_0%,#a855f7_50%,#2563eb_100%)]" />
9      <button className="relative flex items-center justify-center rounded-[10px]
10        bg-white dark:bg-slate-950 px-6 py-3 text-sm font-semibold text-slate-900 dark:text-white">
11        Moving Border
12      </button>
13    </div>
14  );
15}

Import and use the component

Import your newly created component anywhere inside your page or layout.

step-6.tsx

1import MovingBorderButton from '@/components/buttons/MovingBorderButton';
2
3export default function Page() {
4  return (
5    <main className="p-8">
6      <MovingBorderButton />
7    </main>
8  );
9}

Customize to your brand

Directly modify Tailwind utility classes to match your exact styling requirements.

step-7.tsx

1<div className="absolute inset-[-1000%] animate-[spin_4s_linear_infinite]
2  bg-[conic-gradient(from_90deg_at_50%_50%,#10b981_0%,#14b8a6_50%,#10b981_100%)]" />

Browse All Components

Frequently Asked Questions & Compatibility

Essential developer answers for commercial licensing, framework setup, and token customizability.

MIT License

Are these components free for commercial projects?

Yes, 100% free under the permissive MIT license. You can use Aurenza UI in personal apps, commercial SaaS websites, and client projects without royalties or attribution requirements.

Zero Dependencies

Do I need to install an npm UI package?

No npm package lock-in. Simply copy and paste the TSX or JSX source code directly into your repository. All styling is standard Tailwind CSS with zero runtime bloat.

Tailwind v4 & v3

Does Aurenza UI support Tailwind CSS v4 and v3?

Yes, all components are built using modern CSS tokens and standard utility classes fully compatible with both Tailwind CSS v4 and v3 setups.

Universal React

Which frameworks are supported?

Next.js 15 (App Router & Pages Router), React 19, Vite, Remix, Astro, Gatsby, and React Native Web environments.