Skip to content
Aback UI

Installation

Next.js

Set up Aback UI in a Next.js App Router project. Verified with create-next-app on Next.js 16, React 19, and Tailwind CSS v4.

  1. Create the app

    Skip this for an existing app that already uses Tailwind CSS v4 and the @/ alias. The default options include TypeScript, Tailwind CSS v4, the App Router, and an @/* path alias:

    npx create-next-app@latest my-app --yes

  2. Run init

    In the project root:

    npx aback-ui@latest init

    init finds app/globals.css, writes styles/aback.css, lib/utils.ts, and aback-ui.json, and adds one import after the Tailwind import:

    app/globals.csscss
    @import "tailwindcss";
@import "../styles/aback.css";

  3. Remove the starter styles

    The globals.css that create-next-app writes declares its own --background and --foreground, a @theme inline block, a dark-mode media query, and a body rule. Because they come after the Aback import, they override the theme: the page background ignores the Aback values and follows the operating system instead of your theme toggle. Delete everything after the two imports, so the file is just:

    app/globals.csscss
    @import "tailwindcss";
@import "../styles/aback.css";

    The Aback theme already sets the page background, text colour, and the Geist font stacks. The --font-geist-sans and --font-geist-mono variables that the starter layout creates with next/font are picked up as they are.

  4. Add components

    npx aback-ui@latest add button dialog

    The files land in components/ui. Import them with the alias:

    app/page.tsxtsx
    import { Button } from "@/components/ui/button";

export default function Page() {
  return <Button>Save changes</Button>;
}

Add dark mode

npx aback-ui@latest add theme-toggle

Render ThemeScript in the root layout's head so the saved theme is applied before the first paint, and add suppressHydrationWarning to html, because the script sets its class before React hydrates.

app/layout.tsxtsx
import { ThemeScript } from "@/components/ui/theme-toggle";
import "./globals.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <ThemeScript />
      </head>
      <body>{children}</body>
    </html>
  );
}

Then place <ThemeToggle /> in your header. The dark mode guide covers useTheme, labels, and Content Security Policy nonces.

Server Components

Components that need state or event handlers, such as Dialog, Tabs, and ThemeToggle, start with "use client", so you can import them from Server Components without adding the directive yourself. Pass them serializable props; event handlers have to come from a Client Component.

Static export works

abackui.com itself is a Next.js app built with output: "export" and the same components, so a fully static build is a supported setup.

Where to next