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
Guide
Install YaYaw Table, the open-source React data table for Shadcn UI and TanStack Table, via the Shadcn registry
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
From your project root: To target a specific released version, use a registry snapshot: If your project has the YaYaw registry namespace configured (@yayaw), you can also run: With shadcn CLI v4, the root site URL also...
For new projects that want a YaYaw-ready Shadcn baseline, install the optional base item: The base item configures base-vega, lucide, TypeScript, React Server Components, the neutral base color, the @yayaw registry name...
What this page covers
The original MDX source has been condensed into CMS-native cards so the page can be edited and republished from the control plane.
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
From your project root: To target a specific released version, use a registry snapshot: If your project has the YaYaw registry namespace configured (@yayaw), you can also run: With shadcn CLI v4, the root site URL also...
For new projects that want a YaYaw-ready Shadcn baseline, install the optional base item: The base item configures base-vega, lucide, TypeScript, React Server Components, the neutral base color, the @yayaw registry name...
The shadcn CLI v4 can inspect registry payloads before writing files: You can also inspect or discover registry items: To capture local project context for debugging or agent workflows:
Import from your local copied code: const queryClient = new QueryClient(); export const MyTable = () = ( tableType="products"
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...
Implementation notes
Step-by-step setup with a concrete Next.js example
$ const queryClient = new QueryClient();
$ export const MyTable = () => (
$ <QueryClientProvider client={queryClient}>
$ <DataTable
$ tableType="products"