Next.js

Step-by-Step configuration for Next.js

Kickstart with our Next.js Starter 🚀
Everything is set up to use AlignUI!

Initialize a NextJS Project

If you don’t already have a Next.js project set up, you can follow the official Next.js setup guide to create a new project quickly.

Make sure you have Tailwind CSS v4 installed

Follow these instructions if you don't have Tailwind CSS v4 installed in your project. You just need to have a globals.css file. Note: Tailwind CSS v4 doesn't require a config file by default.

Add AlignUI Styles

Run the following command in the root directory of your project.

terminal
npx @alignui/cli tailwind
Warning

This will overwrite your CSS file.

This command will prompt you to choose following options.

┌  AlignUI Tailwind Setup
│
◇ Which color would you like to use as primary color?
│  ● Blue 
│  ○ Purple
│  ○ Orange
│  ○ Sky
│
◇ Which color would you like to use as neutral color?
│  ● Gray 
│  ○ Slate
│
◇ Which color format would you like to use?
│  ● oklch (Recommended for Tailwind v4.1) 
│  ○ hex
│  ○ rgb
│  ○ hsl
│
◇ Use a custom prefix for AlignUI classes? (Leave blank for none)
│  undefined
│
◇ Create tailwind.config file? (Optional in v4.1 - CSS-first configuration)
│  ● No - Use CSS-only configuration (Recommended for v4.1) 
│  ○ Yes - Create minimal config file
│
◇ Where is your global CSS file?
│  app/globals.css
└

Note: The above code includes the complete AlignUI design system with colors, typography, shadows, animations, and dark mode support. You can also get this CSS content by running the CLI command.

That's all! Now you have all AlignUI tokens.

Add the required utils

  1. Go to cn page and setup the utility in your project.
  2. Go to tv page and setup the utility in your project.
  3. Go to recursiveCloneChildren page and setup the utility in your project.
  4. Go to Polymorphic page and setup the utility in your project.

Add the icon library

AlignUI uses Remix Icon.

terminal
npm install @remixicon/react

Setup Inter font

Include Inter font from 'next/font/google':

/app/layout.tsx
import { Inter as FontSans } from 'next/font/google';
import './globals.css';
import { cn } from '@/utils/cn';
 
const inter = FontSans({
  subsets: ['latin'],
  variable: '--font-sans',
});
 
export default function RootLayout({ children }) {
  return (
    <html lang='en' className={cn(inter.variable, 'antialiased')}>
      <body>{/* ... */}</body>
    </html>
  );
}

Note for Tailwind CSS v4: Font configuration is handled via CSS variables in the @theme block, so no additional config file setup is needed.

Add Dark Mode (Optional)

All you need to do to enable dark mode in your app is add the dark class to your root element.

/app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html lang='en' className='dark'>
      <body>{/* ... */}</body>
    </html>
  );
}

Note: With Tailwind CSS v4, dark mode classes are automatically included when using our @theme configuration.

I recommend next-themes package for an easy dark mode toggle in your app.

That's all!

Now you can start adding components to your app. You can begin by adding a button first.

© 2024 AlignUI Design System. All rights reserved.