Nuxt UI Dashboard

Component tree

UApp (App.vue)
└── DashboardLayout.vue
    └── UDashboardGroup
        ├── UDashboardSidebar (collapsible, resizable)
        │   ├── #header → logo / team selector
        │   ├── #default → UDashboardSearchButton + UNavigationMenu
        │   └── #footer → UDropdownMenu (user menu)
        ├── UDashboardSearch (command palette — outside sidebar)
        └── <slot /> → <RouterView />
            └── UDashboardPanel (per page)
                ├── #header → UDashboardNavbar + UDashboardToolbar
                ├── #body (scrollable content)
                └── #footer (optional)

Quick start: App.vue

<script setup lang="ts">
import DashboardLayout from '@/layouts/DashboardLayout.vue'
</script>

<template>
  <UApp>
    <DashboardLayout>
      <RouterView />
    </DashboardLayout>
  </UApp>
</template>

Quick start: Layout

<!-- src/layouts/DashboardLayout.vue -->
<script setup lang="ts">
import { computed, ref } from 'vue'
import type { NavigationMenuItem, DropdownMenuItem } from '@nuxt/ui'

const open = ref(false)

const navItems = computed<NavigationMenuItem[][]>(() => [
  [
    { label: 'Home', icon: 'i-lucide-house', to: '/' },
    { label: 'Users', icon: 'i-lucide-users', to: '/users' },
    { label: 'Settings', icon: 'i-lucide-settings', to: '/settings' },
  ],
])

const userMenuItems = computed<DropdownMenuItem[][]>(() => [
  [{ type: 'label', label: 'User Name', icon: 'i-lucide-user' }],
  [
    { label: 'Profile', icon: 'i-lucide-user' },
    { label: 'Settings', icon: 'i-lucide-settings', to: '/settings' },
  ],
  [{ label: 'Log out', icon: 'i-lucide-log-out' }],
])
</script>

<template>
  <UDashboardGroup unit="rem" storage="local">
    <UDashboardSidebar
      v-model:open="open"
      collapsible
      resizable
      :ui="{ footer: 'lg:border-t lg:border-default' }"
    >
      <template #header="{ collapsed }">
        <div class="flex items-center gap-2">
          <span v-if="!collapsed" class="font-heading text-lg font-bold text-highlighted">App</span>
          <span v-else class="font-heading text-lg font-bold text-highlighted">A</span>
        </div>
      </template>

      <template #default="{ collapsed }">
        <UNavigationMenu
          :collapsed="collapsed"
          :items="navItems[0]"
          orientation="vertical"
          tooltip
        />
      </template>

      <template #footer="{ collapsed }">
        <UDropdownMenu
          :items="userMenuItems"
          :content="{ align: 'center', collisionPadding: 12 }"
          :ui="{ content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)' }"
        >
          <UButton
            :label="collapsed ? undefined : 'User Name'"
            :trailing-icon="collapsed ? undefined : 'i-lucide-chevrons-up-down'"
            color="neutral"
            variant="ghost"
            block
            :square="collapsed"
            class="data-[state=open]:bg-elevated"
            :ui="{ trailingIcon: 'text-dimmed' }"
          >
            <template #leading>
              <UAvatar src="" alt="User" icon="i-lucide-user" size="2xs" />
            </template>
          </UButton>
        </UDropdownMenu>
      </template>
    </UDashboardSidebar>

    <slot />
  </UDashboardGroup>
</template>

Quick start: Page

<!-- src/pages/Home.vue -->
<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar title="Home">
        <template #leading>
          <UDashboardSidebarCollapse />
        </template>
        <template #right>
          <UButton icon="i-lucide-plus" label="New" />
        </template>
      </UDashboardNavbar>
    </template>

    <template #body>
      <!-- Scrollable page content -->
    </template>
  </UDashboardPanel>
</template>

Component quick reference

References

Load based on your task:

• references/components.md — Full props, slots, and customization for each dashboard component
• references/patterns.md — Navigation, user menus, multi-panel, search, composables, empty states
• nuxt-ui skill's references/theming.md — CSS variables, semantic colors, component overrides
• nuxt-ui skill's references/components.md — Non-dashboard components (UTable, UButton, UInput, etc.)
• Generated theme files — node_modules/.nuxt-ui/ui/dashboard-*.ts for all slots and variants