Next.js

Install and configure Next.js.

If you're using Next.js 15, see the Next.js 15 + React19 (opens in a new tab) guide.

Create Next.js project

Follow the Tailwind CSS installation instructions (opens in a new tab) to get started.

TL;DR

npx create-next-app@latest my-project --typescript --eslint
 
cd my-project

Chose the following options:

✔ Would you like to use Tailwind CSS? … Yes
✔ Would you like ...
✔ Would you like to customize the import alias (@/* by default)? … No

Add Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
 
npx tailwindcss init -p

Configure the tailwind template paths in tailwind.config.js:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  // Add the paths to all of your template files
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
 
    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add this import header in your main css file (e.g. app/globals.css):

globals.css

/* Only these three lines are recommended.  */
@tailwind base;
@tailwind components;
@tailwind utilities;

Create components.json file

Create a components.json file in the root of your project.

components.json

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js", // You may need to change the config path depending on your project.
    "css": "app/globals.css", // Configure according to the path of the main css file for your project.
    "baseColor": "slate",
    "cssVariables": true
  },
  "aliases": {
    "components": "@/components",
    "hooks": "@/hooks",
    "utils": "@/lib/utils"
  }
}

Run the CLI

Run the shadcn cli command to setup your project:

npx shadcn@latest add https://exawizards.com/exabase/design/registry/preflight.json

This command will do the following:

Install dependencies
Update your tailwind.config.js and global.css file
Install utilities

Depending on the project configuration, you may need to change your tailwind.config.js file.

tailwind.config.js

-  plugins: [require("tailwindcss-animate"), require("@tailwindcss/forms")],
+  plugins: [import(“tailwindcss-animate”), import(“@tailwindcss/forms”)],

Add fonts

Install the Inter and Noto Sans JP fonts used in the design system.

We suggest you install the fonts by next/font. Read the Next.js font guide (opens in a new tab) for details.

pages/_app.tsx

import "@/styles/globals.css"
 
import type { AppProps } from "next/app"
import { Inter, Noto_Sans_JP } from "next/font/google"
 
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
})
 
const notoSansJp = Noto_Sans_JP({
  subsets: ["latin"],
  variable: "--font-noto-sans-jp",
})
 
function MyApp({ Component, pageProps }: AppProps) {
  return (
    <>
      <style jsx global>{`
        :root {
          --font-inter: ${inter.style.fontFamily};
          --font-noto-sans-jp: ${notoSansJp.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />
      <Toaster />
    </>
  )
}
 
export default MyApp

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  // ...
  theme: {
    // ...
    extend: {
      fontFamily: {
        sans: ["var(--font-inter)", "var(--font-noto-sans-jp)", "sans-serif"],
      },
    },
  },
}

Add components

You can now start adding components to your project.

This command will add the all components to your project:

npx shadcn@latest add https://exawizards.com/exabase/design/registry/all.json

This command will add the Button component to your project:

npx shadcn@latest add https://exawizards.com/exabase/design/registry/button.json

You can then import it like this:

import { Button } from "@/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

Installation Vite