Installation

1. Install

The package is public on npm. React, Base UI and the other peers are probably in your app already.

# the kit
pnpm add @zikzuk/ui

# its peers
pnpm add react react-dom @base-ui/react @animate-ui/react motion lucide-react sonner date-fns react-day-picker tailwindcss

Optional peers, needed only for their entry point: cmdk (/command), recharts (/chart), input-otp (/input-otp), @shadcn/react (/questionnaire).

2. Add the styles

In the stylesheet where you import Tailwind CSS v4:

@import "tailwindcss";
@import "@zikzuk/ui/styles.css";
@source "../node_modules/@zikzuk/ui/dist";   /* Tailwind scans the kit's classes */

Point @source at your own node_modules, relative to the stylesheet.

3. Add the provider

KitProvider sets the motion tempo, honours reduced motion, mounts the toaster and tells the kit how your app links. In Next.js, wrap the app once in a client component:

"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { KitProvider } from "@zikzuk/ui";

export function Providers({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  return (
    <KitProvider navigation={{ Link, usePathname, navigate: (href) => router.push(href) }}>
      {children}
    </KitProvider>
  );
}

Outside Next.js, leave out navigation: links render as plain anchors.

Fonts (optional)

The kit reads two font variables: --font-zikpe for text and --font-geist-mono for ids and code. Set them with next/font on <html> to use your own faces; without them it falls back to the system fonts.

import { Inter, Geist_Mono } from "next/font/google";

const sans = Inter({ variable: "--font-zikpe", subsets: ["latin"] });
const mono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"] });

<html lang="en" className={`${sans.variable} ${mono.variable}`}>

Good to know

• Page transitions use React's <ViewTransition>: set experimental.viewTransition: true in next.config.ts.
• Server components can import helpers from @zikzuk/ui/lib; every client module carries its own "use client".
• The kit is light only and sets color-scheme: light.