Getting Started

npm install shadcnui-showcase

Make a barrel file

shadcn writes each component to its own file, so add an index.ts beside them that re-exports everything:

// components/ui/index.ts
export * from "./button";
export * from "./badge";
export * from "./card";

The Chart and Sonner cards are opt-in: re-export Bar, BarChart, CartesianGrid, and XAxis from recharts, and toast from sonner, to enable them.

Pass it to ShadcnUIShowcase

"use client";

import { ShadcnUIShowcase } from "shadcnui-showcase";
import * as ui from "@/components/ui";

export default function Page() {
  return <ShadcnUIShowcase {...ui} />;
}

No barrel? Pass components directly instead:

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

<ShadcnUIShowcase {...{ Button, Badge }} />;

Unstyled grid?

Tailwind has to scan the package or the grid renders unstyled:

@source "../node_modules/shadcnui-showcase/dist/**/*.js";