Go to AntUIKit homepage

Get Started

Install the components you need, set up the styles once, and the rest of the system follows.

  1. Requirements

    antuikit installs into a React project that already has Tailwind v4 wired and a path alias configured.

    • Node 20.18.1 or newer
    • React 19
    • Tailwind CSS v4, installed and imported
    • A @/* alias resolving in both your bundler config and your tsconfig

    Ant Design v6 itself arrives with the first install, so you do not need to add it yourself.

  2. Start a new project

    create scaffolds a project from a template and then installs antuikit into the result, so a working project is one command away. Run it from an empty directory, since it only scaffolds where there is no package.json.

    npx antuikit@latest create my-app --template vite

    The available templates are next, start, vite, react-router, astro and laravel. Omit the flag and the name to pick one interactively.

    The scaffold comes with Tailwind v4, the alias in the bundler config and the tsconfigs, and the Tailwind import in the entry stylesheet, so you can skip the next step.

  3. Or add to a project you have

    init is the once-per-project step. It installs the token stylesheet, the provider and the theme file, then wires the four things a registry item cannot do for itself:

    npx antuikit@latest init
    • the @antuikit namespace in components.json
    • the cascade layer statement at the very front of your Tailwind entry CSS
    • an @import of antuikit.css, right after the Tailwind import
    • a tokens:build script, which compiles your theme file

  4. Check the layer order

    Every override in the kit depends on this. Your Tailwind entry stylesheet has to start with the layer statement:

    @layer theme, base, antd, components, utilities;
    @import "tailwindcss";
    @import "./antuikit.css";

    CSS orders layers by where they are first named, so the line has to come before the Tailwind import. With it in place, a Tailwind utility beats an antd style and you never need !important.

  5. Wrap your app in the provider

    <AntuikitProvider> renders antd's <App> as its one element. That element carries the CSS variables every descendant reads, so antd components and your utility classes follow the same theme.

    import { AntuikitProvider } from "@/components/antuikit-provider";
    export function Root() {
    return (
    <AntuikitProvider>
    <div className="min-h-screen bg-layout">
    <App />
    </div>
    </AntuikitProvider>
    );
    }

    Do not nest a second provider. For a differently themed region use <ThemeScope>, which ships alongside it. The Theming page explains why a raw nested ConfigProvider is not the same thing.

  6. Add components

    Components are copied into your project one at a time, and each one brings the dependencies it needs.

    npx antuikit@latest add button tag alert

    They land under your ui alias, and from that point the file is yours.

    import { Button } from "@/components/ui/button";
    export function SaveBar() {
    return (
    <div className="flex items-center gap-sm bg-container p-md rounded-sm">
    <Button type="primary">Save</Button>
    <Button>Cancel</Button>
    </div>
    );
    }

    If that button renders with your theme's primary color and no console errors, everything above is wired correctly.

  7. Pick an icon pack

    Components never import an icon library. They ask for a semantic role and resolve it through one file, so swapping packs is an overwrite of that file and every component follows at once.

    npx antuikit@latest icons set lucide

    Seven packs ship today: fluent (the default), lucide, anticon, tabler, phosphor, remix and hugeicons. Pick anticon when you want antuikit to look like stock Ant Design. It is the only pack whose status glyphs are antd's own.

    Each pack has its own look. Size, color, baseline and alignment are the same across all of them.

  8. Next.js notes

    Three things a server-rendered app needs that a client-rendered one does not:

    • Persist the mode in a cookie and pass it as defaultMode. A server cannot know the visitor's OS preference, so under auto it renders light and a dark visitor's first paint is wrong until hydration.
    • Add suppressHydrationWarning to <html>, because the inline theme script mutates the element React hydrates.
    • Wrap the tree in <AntdRegistry> from @ant-design/nextjs-registry, so antd's styles are in the first response with the layer wrapper intact.
    // app/layout.tsx
    import { cookies } from "next/headers";
    import { AntdRegistry } from "@ant-design/nextjs-registry";
    import { AntuikitProvider } from "@/components/antuikit-provider";
    export default async function RootLayout({
    children,
    }: {
    children: React.ReactNode;
    }) {
    const mode = (await cookies()).get("theme")?.value === "dark" ? "dark" : "light";
    return (
    <html lang="en" suppressHydrationWarning>
    <body>
    <AntdRegistry>
    <AntuikitProvider defaultMode={mode}>
    <div className="min-h-screen bg-layout">{children}</div>
    </AntuikitProvider>
    </AntdRegistry>
    </body>
    </html>
    );
    }

  9. Where to go next

    Theme it, then browse what is available. The Theming page covers the theme file, light and dark, compact and scoped regions. The Tokens explorer lists every value across modes, and Components has a live preview and an API table for each one.

IntroductionTheming
© 2026 AntUIKit . All rights reserved.