# create-shadcn-dashboard

> A CLI tool to quickly set up a Next.js dashboard with Shadcn UI components and authentication.

Latest version **1.0.8** (published 2024-08-18) · The Unlicense license · 0 weekly downloads

## Install

```sh
npm install create-shadcn-dashboard
pnpm add create-shadcn-dashboard
yarn add create-shadcn-dashboard
bun add create-shadcn-dashboard
```

Provides the command `create-shadcn-dashboard`.

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.8 |
| Published | 2024-08-18 |
| First published | 2024-08-01 |
| Weekly downloads | 0 |
| License | The Unlicense |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 5 |
| Unpacked size | 190.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | sirtenzin |
| Keywords | shadcn, dashboard, create, shadcn-dashboard, shadcn-dashboard-create, create-shadcn-dashboard, nextjs, next-auth, zod, zustand, react, react-router, create-next-app, create-react-app, tailwind, tailwindcss, eslint, prettier, typescript |

## Links

- npm: https://www.npmjs.com/package/create-shadcn-dashboard
- Repository: https://github.com/sirtenzin/create-shadcn-dashboard
- Homepage: https://github.com/sirtenzin/create-shadcn-dashboard#readme
- Issues: https://github.com/sirtenzin/create-shadcn-dashboard/issues
- npm.io page: https://npm.io/package/create-shadcn-dashboard

## Dependencies (5)

- [ora](https://npm.io/package/ora.md) ^8.0.1
- [chalk](https://npm.io/package/chalk.md) ^5.3.0
- [fs-extra](https://npm.io/package/fs-extra.md) ^11.2.0
- [inquirer](https://npm.io/package/inquirer.md) ^10.1.6
- [commander](https://npm.io/package/commander.md) ^12.1.0

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 1.0.8 (latest) — 2024-08-18
- 1.0.7 — 2024-08-02
- 1.0.6 — 2024-08-02
- 1.0.5 — 2024-08-01
- 1.0.4 — 2024-08-01
- 1.0.3 — 2024-08-01
- 1.0.2 — 2024-08-01
- 1.0.1 — 2024-08-01
- 1.0.0 — 2024-08-01

## README

# Create Shadcn Dashboard

A CLI tool to quickly set up a Next.js dashboard with Shadcn UI components and authentication.

## Features

- Next.js 14+ with App Router
- [Shadcn UI components](https://ui.shadcn.com)
- Authentication setup with [NextAuth.js](https://authjs.dev)
- Dashboard layout with sidebar and header
- Responsive design
- Zod schema validation, TailwindCSS styling, Pre-commit hooks via Husky, Prettier
- TypeScript support
- Boilerplate code from https://github.com/Kiranism/next-shadcn-dashboard-starter

## Getting Started

> To create a new dashboard project, run:

```bash
npx create-shadcn-dashboard my-app
```

<img src="https://i.imgur.com/Sow6suo.png" alt="Initial" width="800"/>

> To add a new page, run:

 ```bash
npx create-shadcn-dashboard my-app

```
<img src="https://i.imgur.com/sAAAIbY.png" alt="Add Page" width="800"/>

> To add a new API route, run:

```bash
npx create-shadcn-dashboard add route 
```

<img src="https://i.imgur.com/M0t2bDn.png" alt="Add Route" width="800"/>

This also supports advanced route names such as "npx create-shadcn-dashboard add route users/[id]/info" or other Nextjs route patterns.

## Running your app

```bash
cd my-app
npm run dev
```
<img src="https://i.imgur.com/iex0o8J.png" alt="Running your app" width="800"/> 

## Photo gallery

<details>

<summary>Photo Gallery (Click to expand)</summary>

| Description | Image |
|-------------|-------|
| Login screen (Dark mode) | ![Login screen](https://i.imgur.com/LmWPw2X.png) |
| Dashboard (Dark mode) | ![Dashboard](https://i.imgur.com/H4ew17E.png) |
| Login screen (Light mode) | ![LS Light](https://i.imgur.com/igs90sk.png) |
| Dashboard (Light mode) | ![DB Light](https://i.imgur.com/5lYNvCZ.png) |

</details>

## Notes

<details>

<summary>Notes (Click to expand)</summary>

- When starting your dashboard, you may find that the auth system lets you login with any set of emails or passwords, and that is because by default the auth.config.ts file doesnt check for anything.
- You can add your own providers to the auth.config.ts file and that will be used to check for valid logins.

</details>

---
_Source: https://npm.io/package/create-shadcn-dashboard · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._