Introduction

36 free components with live examples and copy-paste code, built on Radix UI and Tailwind CSS. Pick a component from the UI Elements menu in the sidebar.

Start a new dashboard
Clone the template. Every page, component and the theme are included — no shadcn setup needed.
git clone https://github.com/hasraltechno/multidash.git
cd multidash
pnpm install
pnpm dev
Add components to your project
Already have a React project with Tailwind CSS v4? Add only the components you need with the shadcn CLI, or copy the source by hand.

The shadcn CLI isn't a dependency: npx runs it once and it copies the source into your project, so the code is yours to edit. It needs a components.json, created by npx shadcn@latest init.

Install with the shadcn CLI · Copy by hand

Install with the shadcn CLI
Every component is also a shadcn registry item. In a project with a components.json, one command adds the component, the components it builds on, its npm packages and the extra theme tokens it uses. Your existing colors are left alone.
$ pnpm dlx shadcn@latest add https://multidash-app.vercel.app/r/button.json

Using Multidash often? Add the registry to components.json once, then add components by name, e.g. @multidash/button:

components.json
{
  "registries": {
    "@multidash": "https://multidash-app.vercel.app/r/{name}.json"
  }
}

Want the full Multidash look? Add the theme too. It replaces your color tokens with the Multidash light and dark palette:

$ pnpm dlx shadcn@latest add https://multidash-app.vercel.app/r/multidash-theme.json

Working with an AI assistant? Point it at llms.txt — every component page is also available as Markdown.

Use in this project
Every component is already available in the monorepo through the @multidash/ui package.
app/page.tsx
import { Button } from "@multidash/ui/components/button"

export default function Page() {
  return <Button>Click me</Button>
}
Copy by hand
Prefer not to use the CLI? Components are plain source files — copy the ones you need.
  1. 1

    Install dependencies

    pnpm add radix-ui class-variance-authority clsx tailwind-merge lucide-react tw-animate-css
  2. 2

    Add the cn() helper

    lib/utils.ts
    import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
  3. 3

    Add the theme tokens

    Copy globals.css into your app and import it in your root layout.

  4. 4

    Copy a component

    Open a component from the sidebar and copy its source from the Installation section into components/ui/.