shadcn-dashboard

KO | EN

gitlite — search

#typescript #ai-agents #deepseek-harness #dsh-plugin #open-source #ai #claude-code #cli #windows #codex #developer-tools #dsh

shadcn-dashboard

★ 52 Open GitHub ↗

A free, open-source admin shadcn dashboard template built with Next.js, shadcn/ui, Tailwind CSS, and TypeScript. Modern, accessible, fully responsive, perfect as a starter for SaaS dashboards, admin panels, and internal tools.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Shadcn Dashboard — Open Source Admin Dashboard Template (Next.js + shadcn/ui + TypeScript)

**A free, open-source admin dashboard template built with Next.js, shadcn/ui, Tailwind CSS, and TypeScript.**
Modern, accessible, fully responsive — perfect as a starter for SaaS dashboards, admin panels, and internal tools.

[![Live Demo](https://img.shields.io/badge/demo-live-success?style=for-the-badge)](https://shadcn-dashboard.netlify.app/)
[![Stars](https://img.shields.io/github/stars/sachidumaleesha/shadcn-dashboard?style=for-the-badge)](https://github.com/sachidumaleesha/shadcn-dashboard/stargazers)
[![Forks](https://img.shields.io/github/forks/sachidumaleesha/shadcn-dashboard?style=for-the-badge)](https://github.com/sachidumaleesha/shadcn-dashboard/forks)
[![Next.js](https://img.shields.io/badge/Next.js-black?style=for-the-badge&logo=next.js)](https://nextjs.org/)
[![TypeScript](https://img.shields.io/badge/TypeScript-blue?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)

[**🔗 Live Demo**](https://shadcn-dashboard.netlify.app/) · [**🐛 Report Bug**](https://github.com/sachidumaleesha/shadcn-dashboard/issues) · [**✨ Request Feature**](https://github.com/sachidumaleesha/shadcn-dashboard/issues)

</div>

---

## 📖 About

**Shadcn Dashboard** is a simple, open-source **admin dashboard template** built on top of **Next.js**, **shadcn/ui**, **Radix UI**, and **Tailwind CSS**. It's designed as a clean starting point for developers who want to build a **React admin panel**, **SaaS dashboard**, **analytics dashboard**, or **internal tool UI** without starting from scratch.

If you're searching for a **shadcn/ui dashboard example**, a **Next.js admin template**, or a **free open-source dashboard boilerplate**, this project gives you a production-ready layout you can customize in minutes.

## ✨ Features

- ⚡ **Next.js App Router** — fast, modern React framework with server-side rendering
- 🎨 **shadcn/ui components** — accessible, unstyled, copy-paste UI primitives built on Radix UI
- 💨 **Tailwind CSS** — utility-first styling, fully customizable theme
- 🟦 **TypeScript** — type-safe codebase from end to end
- 📱 **Fully responsive** — works on desktop, tablet, and mobile
- 🌗 **Dark mode ready** — light/dark theme support out of the box
- 🧩 **Reusable components** — sidebar, navbar, cards, tables, and dashboard widgets
- 🚀 **Easy to deploy** — one-click deploy to Vercel or Netlify

## 🖼️ Preview

> Live demo: **[shadcn-dashboard.netlify.app](https://shadcn-dashboard.netlify.app/)**

| Dashboard |
|---|
|<img width="1920" height="943" alt="image" src="https://github.com/user-attachments/assets/6c8a5064-f0ee-4b8a-9c6c-7da2fbbd5b3e" />|

## 🛠️ Tech Stack

| Category | Technology |
|---|---|
| Framework | [Next.js](https://nextjs.org/) |
| Language | [TypeScript](https://www.typescriptlang.org/) |
| UI Components | [shadcn/ui](https://ui.shadcn.com/) + [Radix UI](https://www.radix-ui.com/) |
| Styling | [Tailwind CSS](https://tailwindcss.com/) |
| Deployment | [Vercel](https://vercel.com/) / [Netlify](https://www.netlify.com/) |

## 🚀 Getting Started

### Prerequisites

- Node.js 18+
- npm, yarn, pnpm, or bun

### Installation

```bash
# Clone the repository
git clone https://github.com/sachidumaleesha/shadcn-dashboard.git

# Move into the project directory
cd shadcn-dashboard

# Install dependencies
npm install
# or
yarn install
# or
pnpm install
# or
bun install
```

### Run the development server

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) in your browser to see the dashboard.

You can start editing the UI by modifying files inside `src/app`. The page auto-updates as you save changes.

## 📦 Available Scripts

| Command | Description |
|---|---|
| `npm run dev` | Start local development server |
| `npm run build` | Build app for production |
| `npm run start` | Run the production build |
| `npm run lint` | Lint the codebase |

## 📁 Project Structure

```
shadcn-dashboard/
├── public/          # Static assets (images, icons)
├── src/
│   ├── app/          # Next.js App Router pages & layouts
│   ├── components/   # shadcn/ui & custom dashboard components
│   └── lib/          # Utilities and helpers
├── components.json   # shadcn/ui configuration
├── tailwind.config.js
└── tsconfig.json
```

## ☁️ Deployment

The easiest way to deploy this Next.js dashboard is via [Vercel](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme), the creators of Next.js. It's also deployable on [Netlify](https://www.netlify.com/), as shown in the [live demo](https://shadcn-dashboard.netlify.app/).

See the [Next.js deployment docs](https://nextjs.org/docs/deployment) for more details.

## 🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the project
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

Please check the [issues page](https://github.com/sachidumaleesha/shadcn-dashboard/issues) first.

## ⭐ Show Your Support

If this project helped you, please consider giving it a **star** — it helps others discover this open-source shadcn/ui dashboard template too!

## 📄 License

This project does not currently specify a license. Add a `LICENSE` file (e.g. [MIT](https://choosealicense.com/licenses/mit/)) to clarify usage terms for contributors and users.

## 👤 Author

**Sachidu Maleesha**

- GitHub: [@sachidumaleesha](https://github.com/sachidumaleesha)

---

**Keywords:** shadcn dashboard, shadcn/ui dashboard, Next.js admin dashboard, Next.js dashboard template, React admin panel, open source dashboard, free dashboard template, Tailwind CSS dashboard, TypeScript dashboard, SaaS dashboard UI, Radix UI components

</div>

shadcn-dashboard

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README