analytics

Shadcn Admin

Name: Shadcn Admin
Author: satnaing

Admin Dashboard UI built with Shadcn and Vite.

13,976 stars2,151 forksTypeScriptUpdated 7/21/2026100% free · open source

What it does

A ready‑to‑use admin dashboard UI built with shadcn/ui components and Vite, so you can launch a modern React admin panel in minutes.

When to use it

•You need a clean, responsive admin interface for a SaaS product and want to avoid building the UI from scratch.
•Your team prefers React + Vite and wants a component library (shadcn/ui) already wired up with Tailwind.
•You want a starter that includes common admin pages (tables, charts, auth) and is easy to customize.

Ready-to-paste prompt

npx shadcn-ui@latest add table && pnpm dev  # adds a reusable Table component and hot‑reloads the dashboard with the new component available

Heads up: The project requires Node ≥ 18 and pnpm; using npm or an older Node version will cause Vite/Tailwind build errors.

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/shadcn-admin && curl -fsSL https://workflowstacks.com/api/skills/shadcn-admin/claude-skill -o ~/.claude/skills/shadcn-admin/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How Shadcn Admin works

Codeflow

Free to inspect

Shadcn Admin is a large TypeScript project (~16k lines across 235 code files). It is a full software project: use it through its install path rather than reading it end to end. Last commit this month, MIT license, has a test suite.

Size

Large codebase

~16k lines · 235 code files · ~2 h to skim

Setup

Developer setup

A real software project. Use it via its install path; don't expect to read it all.

Runs on

Node.js

Needs API keys (.env)

TypeScript 98%CSS 1%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
src/main.tsx
Where the program starts running
3
package.json
Dependencies and the commands it exposes
4
.env.example
The API keys and settings you must provide

What's in each folder

src/Core code — the actual logic237 files

.github/CI / automation (GitHub Actions)9 files

public/Images & static assets5 files

.vscode/Editor / agent settings2 files

READMEHas testsDocumentedCI checksMIT licenseUpdated this month

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

🛠️ Technical setup

Expect 20–40 minutes in a terminal — or let your AI agent drive it.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/shadcn-admin && curl -fsSL https://workflowstacks.com/api/skills/shadcn-admin/claude-skill -o ~/.claude/skills/shadcn-admin/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

satnaing

Language

TypeScript