V1.0

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 installed

Follow these instructions if you don't have Tailwind installed in your project. You just need to have a globals.css and tailwind.config.{js,ts}. They will be overwritten by our CLI.

Add AlignUI Styles

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

terminal
npx @alignui/cli tailwind
Warning

This will overwrite your Tailwind Config and 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?
│  ● hex 
│  ○ rgb
│  ○ hsl
│
◇ Use a custom prefix for AlignUI classes? (Leave blank for none)
│  undefined
│
◇ Where is your tailwind config file?
│  tailwind.config.ts
│
◇ Where is your global CSS file?
│  app/globals.css
└

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>
  );
}

Then apply the --font-sans variable as the default tailwind font.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    /* ... */
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-sans)'],
      },
    },
  },
  plugins: [],
};

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>
  );
}

We need to include the 'dark' class in the safelist in Tailwind Config. Otherwise, dark colors will not be included if the 'dark' class is absent in your JSX at build-time.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    /* ... */
  ],
  safelist: ['.dark'],
  plugins: [],
};

I recommend next-themes package for an easy dark mode toggle in your app. Simply follow the instructions on the page.

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.