Skip to content

Getting started

Tabular UI installs as source: the shadcn registry copies each component into your app, where you own it. The app needs React 19, Tailwind CSS 4 and a components.json from shadcn init.

Set up with shadcn

Four steps, once per app. After that, each component page gives the one command that adds it.

  1. Add components

    pnpm dlx shadcn@latest add https://tabularui.com/r/all.json      # everythingpnpm dlx shadcn@latest add https://tabularui.com/r/button.json   # or one component and what it needs

    Files land under components/tabular-ui/, and your own lib/utils is never replaced. Each component brings what it imports.

  2. Add the tokens

    @import 'tailwindcss';@import './components/tabular-ui/tokens.css';

    The tokens bring the fonts, the animations, Base UI’s state variants and a base layer, so delete the copies shadcn init wrote: its :root, .dark, @theme inline and @custom-variant dark blocks, its @layer base block (it halves the focus ring), and its shadcn/tailwind.css, font and tw-animate-css imports. Then remove the packages it installed for them.

    pnpm remove shadcn @fontsource-variable/geist

  3. Set up the app root

    Call useTheme() once at the root for the colour mode, and put one TooltipProvider above every icon-only control.

    import { TooltipProvider, useTheme } from '@/components/tabular-ui'; function App() {  useTheme(); // sets data-theme on <html>: dark by default, remembered, can follow the OS  return <TooltipProvider>{/* the app */}</TooltipProvider>;}

    Without everything added, useTheme and TooltipProvider come from their own items.

    pnpm dlx shadcn@latest add https://tabularui.com/r/theme-mode.json   # useTheme, from @/components/tabular-ui/lib/themepnpm dlx shadcn@latest add https://tabularui.com/r/tooltip.json      # TooltipProvider, from @/components/tabular-ui/components/foundational/Tooltip

  4. Use

    With everything added, imports read from one index.

    import { AgentBlock, Button, StatusBadge } from '@/components/tabular-ui'; <Button>Run models</Button><StatusBadge status="failed" /><AgentBlock authorship="AI · Awaiting review">Two models changed since the last run.</AgentBlock>

    A single component is imported from its own folder.

    import { AgentBlock } from '@/components/tabular-ui/components/product/AgentBlock';

    Every component, its props and its states are in Storybook. In a Next.js App Router project, render them from a file marked ‘use client’.