Documentation

Getting started

Tailwind Dashboard UI is a React + Tailwind CSS v4 component library. Add the package, import its theme, and every component is styled and typed out of the box.

Get started

Two lines to a styled app.

Requires React and Tailwind CSS v4 as peers. The heavy widgets (charts, calendar, map, editor) are code-split into their own chunks, so importing the light components keeps your bundle small and SSR-safe.

✓TypeScript types included
✓ESM + CJS builds
✓Tree-shakeable, SSR-safe exports

# 1 — install
npm i @andreagiugni/tailwind-dashboard-ui

# 2 — import the theme in your Tailwind entry CSS
@import "@andreagiugni/tailwind-dashboard-ui/theme.css";

import { Button, Badge } from "@andreagiugni/tailwind-dashboard-ui";

export function Toolbar() {
  return (
    <div className="flex gap-2">
      <Button variant="primary" onClick={save}>Save</Button>
      <Badge color="success">Synced</Badge>
    </div>
  );
}

Optional peer dependencies

The light components have zero runtime peers. The heavy widgets — charts, calendar, vector map and the Tiptap Editor — are code-split and pull optional peers only when you import them, so the core stays small and SSR-safe.

# only if you use the heavy widgets:
npm i apexcharts react-apexcharts                       # BarChart / LineChart
npm i @tiptap/react @tiptap/pm @tiptap/starter-kit \
      @tiptap/extension-link @tiptap/extension-placeholder  # Editor

Light & dark mode

Theming is driven by the .dark class on an ancestor (usually <html>). Toggle it to switch themes — exactly like the button in this site's top bar.

<!-- dark mode is driven by the .dark class on an ancestor -->
<html class="dark">

Explore all components