Next.js

New Project

Create project

Start by creating a new Next.js project with the exaBase design system:

npx shadcn@latest init -t next https://exawizards.com/exabase/design/registry/base.json

This command will do the following:

Create a new Next.js project
Install Tailwind CSS v4, @tailwindcss/postcss, and other dependencies
Create components.json
Configure app/globals.css with exaBase color variables (light / dark)
Create lib/utils.ts (cn utility function)
Configure postcss.config.mjs

Add fonts

The default shadcn setup installs its own font. Replace it with Inter and Noto Sans JP, which are used by the exaBase design system. Update your app/layout.tsx as follows:

app/layout.tsx

import { Inter, Noto_Sans_JP } from "next/font/google"

import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
})

const notoSansJp = Noto_Sans_JP({
  subsets: ["latin"],
  variable: "--font-noto-sans-jp",
})

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html
      lang="en"
      suppressHydrationWarning
      className={`${inter.variable} ${notoSansJp.variable}`}
    >
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

Update Button

The shadcn init command includes a default Button component. Replace it with the exaBase version:

npx shadcn@latest add @exabase/button

Add components

You can now start adding more components to your project:

npx shadcn@latest add @exabase/input

You can then import it like this:

import { Input } from "@/components/ui/input"

export default function Home() {
  return (
    <div>
      <Input placeholder="Enter text" />
    </div>
  )
}

Existing Project

Install Tailwind CSS

Make sure Tailwind CSS v4 is installed. Follow the Next.js guide to install Tailwind CSS.

Configure path aliases

Ensure your tsconfig.json includes the @/* alias:

tsconfig.json

{
  "compilerOptions": {
    "paths": { 
      "@/*": ["./*"] 
    } 
  }
}

Run the CLI

Run the shadcn CLI to set up your project with the exaBase design system:

npx shadcn@latest init https://exawizards.com/exabase/design/registry/base.json

This command will do the following:

Install dependencies (clsx, class-variance-authority, tailwind-merge, @exawizards/exabase-design-system-icons-react)
Create components.json
Update your globals.css with exaBase color variables (light / dark)
Install the cn utility function

Configure registry

Add the exaBase registry to components.json so you can install components using the @exabase namespace:

components.json

{
  "registries": {
    "@exabase": "https://exawizards.com/exabase/design/registry/{name}.json"
  } 
}

Add fonts

The exaBase design system uses Inter and Noto Sans JP. Add them to your app/layout.tsx using next/font/google:

app/layout.tsx

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",
})

Then apply the CSS variables to the <html> element:

app/layout.tsx

<html className={`${inter.variable} ${notoSansJp.variable}`}>

The base.json style already configures --font-sans to reference these variables, so no additional CSS changes are needed.

Update Button

The shadcn init command includes a default Button component. Replace it with the exaBase version:

npx shadcn@latest add @exabase/button

Add components

You can now start adding more components to your project:

npx shadcn@latest add @exabase/input

You can then import it like this:

import { Input } from "@/components/ui/input"

export default function Home() {
  return (
    <div>
      <Input placeholder="Enter text" />
    </div>
  )
}

Next.js

On this page