Introduction

ZikZuk UI is a set of React components for dashboards, modelled on Stripe's: a white canvas, structure from type, whitespace and hairlines instead of boxes, colour only where it means something, and motion that answers the pointer at once.

What you get

One package, @zikzuk/ui, with 29 documented components and the tokens they share. 25of them stand in for a component from Stripe's Apps UI kit — TaskList, OnboardingView, FocusView, MeterChart, Sparkline and the rest — so a page reaches for a known pattern before inventing one.

React 19, Tailwind CSS v4, Base UI underneath, lucide icons.
Works in Next.js (App Router) or any React app — the kit never imports next.
Published unbundled: a page pays only for the modules it imports.
Light only, by design. The brand is one colour ramp you can swap.

Principles

Flat canvas. A page is a title, sections and flat tables separated by hairlines and space. Cards are for small, clickable things.
Colour means something. Grey for text and borders, teal for the brand and the one primary action, status colours only for status.
Every record has a page. A list row opens the record's own two-pane page, not a side sheet.
Instant feedback. Hover, press and selection change at once; motion only shows what changed.
Plain words. Sentence case, the user's vocabulary, errors that say what to do next.

Entry points

Import	What
@zikzuk/ui	Components, hooks and the pure helpers — what most pages import.
@zikzuk/ui/lib	Pure helpers (formatting, status tables, setup-flow logic). Safe in server components.
@zikzuk/ui/primitives	The shadcn primitives underneath: Button, Dialog, Sheet, Select, Calendar, Tooltip…
@zikzuk/ui/shell	An app frame: sidebar, header with ⌘K search, breadcrumbs.
@zikzuk/ui/styles.css	Tokens, animations and the Tailwind source for the kit, in one import.

A quick look

setup.tsx

import { Button, TaskList, TaskListItem } from "@zikzuk/ui";

export function GetStarted() {
  return (
    <TaskList connector progress>
      <TaskListItem title="Verify your business" status="complete" />
      <TaskListItem title="Add a bank account" status="in-progress" onPress={openBank} />
      <TaskListItem title="Go live" status="blocked" detail="Add a bank account first" />
    </TaskList>
  );
}

Next: install it, or browse the components.