Remix

Step-by-Step configuration for Remix

If you don’t already have a Remix project set up, you can follow the official Remix 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 tailwind.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

Go to cn page and setup the utility in your project.
Go to tv page and setup the utility in your project.
Go to recursiveCloneChildren page and setup the utility in your project.
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 Google Fonts:

/app/root.tsx

import type { LinksFunction } from '@remix-run/node';
 
export const links: LinksFunction = () => [
  { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
  {
    rel: 'preconnect',
    href: 'https://fonts.gstatic.com',
    crossOrigin: 'anonymous',
  },
  {
    rel: 'stylesheet',
    href: 'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
  },
];

Then apply Inter as the default tailwind font.

tailwind.config.ts

import type { Config } from 'tailwindcss';
import defaultTheme from 'tailwindcss/defaultTheme';
 
export default {
  content: ['./app/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [],
} satisfies Config;

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/root.tsx

export default function Layout({ 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.ts

export default {
  content: [
    /* ... */
  ],
  safelist: ['.dark'],
  plugins: [],
} satisfies Config;

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.

ON THIS PAGE

Getting Started

All Products

All Components