shadcndashboard/shadcndashboard installation guide

Install Shadcn Dashboard on macOS Tahoe (Apple silicon)

What you are installing

`shadcndashboard/shadcndashboard` is a free, MIT-licensed admin-dashboard starter built with React 19, Vite, TypeScript, Tailwind CSS v4, Shadcn-style components, and Base UI. It is a client-side single-page application rather than a finished native Mac app. You run it through a local development server and view it in a web browser.

The project includes dashboard widgets, Blog, Notes, and Tickets examples, authentication screens, forms, data tables, charts, a user profile, and light/dark themes. Its apparent API behavior is mocked locally with MSW and static data; the supplied project documentation says there is no backend in this repository.

How it relates to Claude Code

**Classification: context injection through a bundled project-local skill.**

The repository contains `.claude/skills/shadcn-dashboard-free/SKILL.md`. That file gives Claude Code project-specific guidance about routes, components, tables, forms, mock data, charts, icons, theming, linting, and builds. A matching skill also exists under `.agents/skills/` for compatible coding agents.

This is not evidenced as a Claude Code marketplace plugin, MCP server, hook, desktop interface, or model gateway. The reliable mechanism is a Markdown skill that supplies project context. No separate Claude-specific installation command is documented: the skill is already part of the repository checkout. Claude Code version requirements and skill-discovery behavior are not stated in the supplied files, so this guide does not claim compatibility with a particular Claude Code release.

Before you begin

You need:

• A Mac running macOS Tahoe on Apple silicon.
• Node.js **18, 20, or 22+**, as listed by the repository README.
• npm, which is the repository’s documented package manager.
• About 40 MB for the repository itself, plus additional space for installed npm dependencies and generated build files.

The repository does not document a Homebrew command, a Node Version Manager command, or any other macOS-specific Node installation procedure. Therefore, none is included here. Install a supported Node.js release and npm by a trusted method before continuing.

The files also provide no Tahoe-specific workaround or Intel/Rosetta requirement. Do not add architecture workarounds unless you encounter a real problem and can verify the remedy independently.

1. Obtain the project

Open **Terminal** on your Mac. You can find it through Spotlight or in Applications → Utilities.

The repository metadata supplies this public HTTPS clone URL. Copy and run:

git clone https://github.com/shadcndashboard/shadcndashboard.git

When cloning completes, enter the downloaded project directory:

cd shadcndashboard

If the `git` command is unavailable, use the repository’s public GitHub page at <https://github.com/shadcndashboard/shadcndashboard> to download the source through the browser. The supplied files do not document a Terminal command for installing Git, so this guide does not provide one. After extracting a browser download, open Terminal in that extracted project folder before continuing.

2. Install project dependencies

From inside the project directory, run the repository’s documented installation command:

npm install

This reads `package.json` and installs the packages required by the dashboard. The project records npm as its package manager and uses `package-lock.json` as its lockfile. Do not substitute pnpm, Yarn, or Bun commands when following this repository’s documented setup.

Installation may take a few minutes. npm creates a local dependency directory for the project; you do not need to open or edit it.

If this step reports that npm is missing, stop and install Node.js with npm before trying again. If npm reports an unsupported Node version, compare your installed version with the README’s stated prerequisite: Node.js 18, 20, or 22+.

3. Start the dashboard

Run the development server:

npm run dev

The README says the site will be available at:

<http://localhost:5173>

Open that address in your browser. You should see the Shadcn Dashboard interface. The development server supports hot reload, so saved source changes should appear during development without creating a fresh production build each time.

Keep the Terminal window running while you use the local site. When you are finished, stop the process using Terminal’s normal interrupt action, **Control-C**. That is a keyboard action rather than an additional shell command.

If the browser cannot connect, first look at the Terminal window for an error. Confirm that dependency installation completed and that the development process is still running. The supplied repository evidence does not document alternate ports, firewall changes, or special macOS network configuration, so this guide does not recommend any.

4. Understand what you are seeing

This local dashboard is a frontend template. Its Blog, Notes, and Tickets data flows use static mock data, MSW request handlers, SWR fetchers, and project contexts. The supplied documentation explicitly says there is no real backend. Consequently, sample authentication screens and application pages should not be mistaken for a production authentication service or persistent server database.

Important source locations include:

• `src/views/` for page-level screens.
• `src/components/` for reusable interface pieces.
• `src/routes/Router.tsx` for client-side routes.
• `src/api/` for mock data, fetchers, and handlers.
• `src/context/` for feature state and theme context.
• `src/css/` for global styling.
• `src/components/ui/` for Shadcn-style primitives.

You do not need to modify any of these files merely to install and view the template.

5. Check the project

The repository provides a lint script that treats warnings as failures. Run it from the project directory:

npm run lint

This checks TypeScript and TSX files with ESLint. It is especially useful after editing the project, but it also gives you a documented check of the downloaded source and installed toolchain.

Next, create a production build:

npm run build

According to `package.json`, this runs TypeScript compilation first and then Vite’s production build. A TypeScript error will therefore prevent the build from completing. The project documentation says the resulting static production output is placed in `dist/`.

A successful build confirms more than simply loading the development page: it shows that the full project type-checks and that Vite can generate optimized static assets with your installed environment.

6. Preview the production build

After a successful build, start the documented local preview:

npm run preview

Open the local address printed by Vite in Terminal. Although the README documents the development server specifically at `http://localhost:5173`, it does not promise that exact address for the preview server; use the address actually displayed for this command.

The preview is intended to let you inspect the production build locally before deployment. Keep its Terminal process running while viewing the site, and stop it with **Control-C** when finished.

7. Using the bundled Claude Code guidance

No extra command is required to copy or install the included Claude skill. The relevant file is already present at:

` .claude/skills/shadcn-dashboard-free/SKILL.md `

When the repository is opened in a Claude Code environment that supports this project-local skill arrangement, the file can provide guidance for adding pages, registering routes, using existing table and chart components, following the mock-data pattern, and running the project’s checks. Because the supplied repository files do not document how to install or launch Claude Code itself, this guide intentionally provides no Claude installation or invocation command.

The skill is guidance, not a backend or executable dashboard dependency. The React application can be installed, run, built, and previewed with the npm commands above whether or not you use Claude Code.

8. Everyday workflow

For later sessions, open Terminal in the existing `shadcndashboard` folder and start the development server with:

npm run dev

After making changes, run the two documented quality checks:

npm run lint

npm run build

Use the production preview when needed:

npm run preview

That completes the source-supported local installation process for macOS Tahoe on Apple silicon. The repository provides deployment configuration for static hosting, Netlify routing, and Docker/nginx, but the supplied README’s local quick start requires only a supported Node.js version, npm, dependency installation, and the documented npm scripts.