shadcn/ui monorepo template

This template is for creating a monorepo with shadcn/ui.

Usage

pnpm dlx shadcn@latest init

Adding components

To add components to your app, run the following command at the root of your web app:

pnpm dlx shadcn@latest add button -c apps/web

This will place the ui components in the packages/ui/src/components directory.

Tailwind

Your tailwind.config.ts and globals.css are already set up to use the components from the ui package.

Using components

To use the components in your app, import them from the ui package.

import { Button } from "@workspace/ui/components/button"

Available Components

The UI package now includes the following components:

• Button: Standard button component with multiple variants
• Table: Basic table components (Table, TableHeader, TableBody, TableRow, TableCell, etc.)
• Data Table: Feature-rich data table with sorting, filtering, and pagination (uses TanStack Table)
• Calendar: Full-featured calendar component (uses react-day-picker)
• Date Picker: Date selection component that combines calendar and popover
• Popover: Floating container component (uses @radix-ui/react-popover)
• ComponentDemo: Ready-to-use demo component showcasing all components

For detailed usage examples and documentation, see packages/ui/COMPONENTS.md.

Demo

A demo page showcasing all components is available at /demo when running the web app. The demo component is provided by the UI package:

import { ComponentDemo } from "@workspace/ui/components/demo"

function DemoPage() {
  return <ComponentDemo />
}

To view the demo:

pnpm dev
# Visit http://localhost:3000/demo