nuxt-shadcn-dashboard - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #llm #golang #android #rust #deep-learning #docker #awesome #vue #awesome-list #security

nuxt-shadcn-dashboard

(★ 672)

Template Dashboard with Nuxt 4 + Shadcn + TailwindCSS 4

File Explorer

Download Latest Version (.zip)

- - ci.yml
  - deploy.yml
  - release.yml
- - AppSettings.vue
  - DarkToggle.vue
  - PasswordInput.vue
  - Search.vue
  - ThemeCustomize.vue
- - defineShortcuts.ts
  - useAppSettings.ts
  - useKanban.ts
  - useShortcuts.ts
- - menus.ts
  - themes.ts
- - blank.vue
  - default.vue
- - utils.ts
- - email.vue
  - index.vue
  - kanban.vue
  - tasks.vue
- - ssrWidth.ts
- - appSettings.d.ts
  - kanban.ts
  - nav.d.ts
- app.config.ts
- app.vue
- components.json
- error.vue
- - avatartion.png
  - shadcn.png
- favicon.ico
- placeholder.svg
- social-card.png
- tsconfig.json
.gitignore
.npmrc
.nvmrc
.release-it.json
components.json
eslint.config.js
index.d.ts
LICENSE
nuxt.config.ts
package.json
pnpm-lock.yaml
README.md
renovate.json
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/dianprata/nuxt-shadcn-dashboard

Downloads the entire project code from GitHub to your computer.

cd nuxt-shadcn-dashboard

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![nuxt-shadcn-dashboard-social-card](https://nuxt-shadcn-dashboard.vercel.app/social-card.png)

# Nuxt Shadcn Vue TailwindCSS 4 - Dashboard

[![built with nuxt][nuxt-src]][nuxt-href]

- [Live demo](https://nuxt-shadcn-dashboard.vercel.app)
- [Component Documentation](https://shadcn-vue.com/docs/introduction)

## Quick Start

```bash [Terminal]
npx nuxi@latest init -t github:dianprata/nuxt-shadcn-dashboard my-dashboard-app
cd my-dashboard-app
pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
```

## App Settings
You can change the app settings in `app.config.ts` file.
If you want to change app settings, you have to clear cookie 'app_settings' first.
```
export default defineAppConfig({
  appSettings: {
    sidebar: {
      collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
      side: 'left', // 'left' | 'right'
      variant: 'inset', // 'sidebar' | 'floating' | 'inset'
    },
    theme: {
      color: 'default', // 'default' | 'blue' | 'green' | 'orange' | 'purple' | 'red' | 'teal' | 'yellow' | 'rose'
      type: 'scaled', // 'default' | 'mono' | 'scaled'
    }
  },
})
```

## Contributing

1. Clone this repository.
2. Install dependencies `pnpm install`.
3. Use `pnpm run dev` to start dev server.

## Credits

- [Nuxt.js](https://nuxtjs.org/)
- [Shadcn Vue](https://shadcn-vue.com/)
- [TailwindCSS](https://tailwindcss.com/)

## License

MIT

[nuxt-src]: https://img.shields.io/badge/Built%20With%20Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com/