Installation

YaYaw Table is distributed through a Shadcn registry. The CLI copies the full code into your project, so you own and can edit it locally.

Prerequisites

• A project already set up with Shadcn UI
• A components.json with the ui alias configured (recommended: "ui": "@/components/ui")
• A single shared TanStack Query client available through QueryClientProvider

Install with Shadcn CLI

From your project root:

npx shadcn@latest add https://table.yayaw.app/r/yayaw-table.json

To target a specific released version, use a registry snapshot:

npx shadcn@latest add https://table.yayaw.app/r/v1.0.0/yayaw-table.json

If your project has the YaYaw registry namespace configured (@yayaw), you can also run:

npx shadcn@latest add @yayaw/yayaw-table

With shadcn CLI v4, the root site URL also works for CLI installs through content negotiation:

npx shadcn@latest add https://table.yayaw.app

The CLI will:

• Add missing Shadcn components we depend on
• Copy YaYaw Table files under your ui alias (for example @/components/ui/yayaw-table)
• Install required npm dependencies (@tanstack/react-table, jotai, lucide-react, etc.)

Optional CLI v4 items

For new projects that want a YaYaw-ready Shadcn baseline, install the optional base item:

npx shadcn@latest add @yayaw/yayaw-table-base

The base item configures base-vega, lucide, TypeScript, React Server Components, the neutral base color, the @yayaw registry namespace, the optional YaYaw Sans font, and YaYaw Table itself.

You can also install only the font preset:

npx shadcn@latest add @yayaw/font-yayaw-sans

These items are additive. Existing projects can keep installing yayaw-table directly.

Inspect before installing

The shadcn CLI v4 can inspect registry payloads before writing files:

npx shadcn@latest add https://table.yayaw.app/r/yayaw-table.json --dry-run

npx shadcn@latest add https://table.yayaw.app/r/yayaw-table.json --diff

npx shadcn@latest add https://table.yayaw.app/r/yayaw-table.json --view

You can also inspect or discover registry items:

npx shadcn@latest view @yayaw/yayaw-table

npx shadcn@latest search @yayaw

npx shadcn@latest list @yayaw

To capture local project context for debugging or agent workflows:

npx shadcn@latest info --json

First usage

Import from your local copied code:

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { DataTable } from "@/components/ui/yayaw-table";
import { getTableActions, getTableConfig } from "./table-config";

const queryClient = new QueryClient();

export const MyTable = () => (
  <QueryClientProvider client={queryClient}>
    <DataTable
      tableType="products"
      getTableConfig={getTableConfig}
      getTableActions={getTableActions}
    />
  </QueryClientProvider>
);

For Next.js URL state, add NuqsAdapter in app/layout.tsx. See Provider & Setup and URL state (Nuqs).

QueryClient requirement (breaking change)

YaYaw Table no longer creates an internal QueryClient automatically.

You must now provide exactly one shared client:

• either from your app-level QueryClientProvider,
• or via the queryClient prop (must be the same instance as the app provider if both are used).

If no QueryClient is available, YaYaw Table throws an explicit developer error at runtime.

CSS / Tailwind

YaYaw Table uses Tailwind CSS. Ensure Tailwind is configured in your project.

Theme support

YaYaw Table follows the host Shadcn theme. The copied components use CSS variables such as background, foreground, muted, and border, plus dark: variants for the few places that need explicit dark styling.

For light, dark, and system modes, your app should map the active theme to the .dark class. In a Next.js app, the common setup is next-themes:

"use client";

import { ThemeProvider } from "next-themes";
import type { ReactNode } from "react";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      disableTransitionOnChange
      enableSystem
    >
      {children}
    </ThemeProvider>
  );
}

With Tailwind CSS v4, keep the Shadcn dark variant in your global CSS:

@custom-variant dark (&:is(.dark *));

With Tailwind CSS v3, use class-based dark mode in tailwind.config:

export default {
  darkMode: "class",
};

TypeScript

YaYaw Table is fully typed and ships type-safe configuration helpers in the copied source.