nuxt-shadcn-dashboard

To create a new project based on this dashboard template, use the Nuxt CLI to initialize from the GitHub repository and then install dependencies using pnpm.

npx nuxi@latest init -t github:dianprata/nuxt-shadcn-dashboard my-dashboard-app
cd my-dashboard-app
pnpm i

Global application settings for the sidebar and theme are managed in the app.config.ts file.

Important: If you modify these settings, you must clear the app_settings cookie in your browser for the changes to take effect.

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'
    }
  },
})

You can set global defaults for the <Icon> component used throughout the dashboard. This allows you to control the default size and CSS classes applied to all icons in the application.

export default defineAppConfig({
  icon: {
    size: '', // default <Icon> size applied
    class: '', // default <Icon> class applied
  },
})

The appSettings.sidebar object allows you to customize the behavior and appearance of the dashboard sidebar.

Available options:

• collapsible: Determines how the sidebar collapses. Options are 'offcanvas' (hides completely), 'icon' (collapses to a narrow icon bar), or 'none' (fixed).
• side: Determines which side of the screen the sidebar appears on. Options are 'left' or 'right'.
• variant: Determines the visual style of the sidebar. Options are 'sidebar' (standard), 'floating' (detached look), or 'inset' (integrated with content padding).

export default defineAppConfig({
  appSettings: {
    sidebar: {
      collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
      side: 'left', // 'left' | 'right'
      variant: 'inset', // 'sidebar' | 'floating' | 'inset'
    },
  },
})

The following keys are available within the appSettings object in app.config.ts:

Sidebar Settings

• collapsible: Controls how the sidebar collapses. Options: 'offcanvas', 'icon', or 'none'.
• side: Determines the sidebar position. Options: 'left' or 'right'.
• variant: Sets the visual style of the sidebar. Options: 'sidebar', 'floating', or 'inset'.

Theme Settings

• color: Sets the primary theme color. Options: 'default', 'blue', 'green', 'orange', 'purple', 'red', 'teal', 'yellow', or 'rose'.
• type: Sets the theme scaling type. Options: 'default', 'mono', or 'scaled'.

The pagination system is composed of several sub-components that work together to build a complete pagination UI. You should use the Pagination root component to manage the state and wrap the other sub-components to define the layout and navigation controls.

<script setup>
import {
  Pagination,
  PaginationContent,
  PaginationItem,
  PaginationLink,
  PaginationNext,
  PaginationPrevious
} from '@/components/ui/pagination'
</script>

<template>
  <Pagination :total="100" :sibling-count="1">
    <PaginationContent>
      <PaginationItem>
        <PaginationPrevious />
      </PaginationItem>
      <PaginationItem>
        <PaginationNext />
      </PaginationItem>
    </PaginationContent>
  </Pagination>
</template>

The Sidebar component accepts several props to control its positioning, visual style, and behavior when collapsing.

• side: Determines which side of the screen the sidebar appears on. Options: 'left' | 'right'.
• variant: Defines the visual layout style. Options: 'sidebar' | 'floating' | 'inset'.
• collapsible: Controls how the sidebar behaves when collapsed. Options: 'offcanvas' | 'icon' | 'none'.
• class: Standard HTML attributes for custom styling.

<Sidebar 
  side="left" 
  variant="inset" 
  collapsible="icon"
>
  <!-- Sidebar content -->
</Sidebar>

The Avatar component system is composed of three main parts that work together to display a user's profile image or a fallback UI if the image fails to load:

1. Avatar: The root container component.
2. AvatarImage: The component responsible for rendering the user's image.
3. AvatarFallback: The component that renders when the image is loading or fails to load (e.g., initials or a placeholder icon).

To use them, wrap the AvatarImage and AvatarFallback inside the Avatar component.

<script setup>
import {
  Avatar,
  AvatarImage,
  AvatarFallback
} from '@/components/ui/avatar'
</script>

<template>
  <Avatar>
    <AvatarImage src="https://github.com/shadcn.png" />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
</template>

The Tooltip system is composed of four main components that work together to provide contextual information on hover or focus. To use them, wrap your trigger element in a TooltipProvider, use TooltipTrigger to define the element that activates the tooltip, and place the descriptive text inside TooltipContent.

<script setup>
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger
} from '~/components/ui/tooltip'
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger>Hover me</TooltipTrigger>
      <TooltipContent>
        This is the tooltip content
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

The Alert component is used to display important messages or warnings. It consists of a main Alert container, an AlertTitle for the heading, and an AlertDescription for the body text. The layout automatically adjusts if an icon (SVG) is present inside the container.

<script setup>
import { Alert, AlertTitle, AlertDescription } from '~/components/ui/alert'
</script>

<template>
  <Alert>
    <AlertTitle>Heads up!</AlertTitle>
    <AlertDescription>
      You can add a description here.
    </AlertDescription>
  </Alert>
</template>