Nuxt UI Pro v1.0 is out with dashboard components! Discount ends in 7 hours.

DashboardSection

A customizable section to display content in a DashboardPanelContent.

Take a look at the Dashboard template to see what you can do! (view source)

Usage

The DashboardSection component is used to group related content together.

Use the icon, title and description props to customize the content of the section.

Profile

This information will be displayed publicly.

<template>
  <UDashboardSection
    icon="i-heroicons-user"
    title="Profile"
    description="This information will be displayed publicly."
    orientation="vertical"
    class="px-4 mt-6"
  />
</template>

You can also add some Buttons with the links prop or use the #links slot.

Profile

This information will be displayed publicly.

<template>
  <UDashboardSection
    icon="i-heroicons-user"
    title="Profile"
    description="This information will be displayed publicly."
    :links="[{ label: 'Save changes', color: 'black' }]"
  />
</template>

The DashboardSection is generally placed inside a DashboardPanelContent.

pages/settings/index.vue
<template>
  <UDashboardPanelContent>
    <UDashboardSection title="Theme">
      <template #links>
        <UColorModeSelect />
      </template>
    </UDashboardSection>

    <UDivider class="mb-4" />

    <UDashboardSection title="Profile">
      <template #links>
        <UButton type="submit" label="Save changes" color="black" />
      </template>

      <UFormGroup>
        <UInput />
      </UFormGroup>
    </UDashboardSection>
  </UDashboardPanelContent>
</template>

Slots

icon
{}
title
{}
description
{}
links
{}
default
{}

Props

icon
string
undefined
title
string
undefined
description
string
undefined
ui
any
{}
orientation
"vertical" | "horizontal"
"vertical"
links
(Button & { click?: Function; })[]
[]

Config

{
  wrapper: 'divide-y divide-gray-200 dark:divide-gray-800 space-y-6 *:pt-6 first:*:pt-2 first:*:pt-0 mb-6',
  container: 'flex flex-wrap items-center justify-between gap-4',
  inner: 'flex items-start gap-4',
  title: 'text-gray-900 dark:text-white font-semibold',
  description: 'mt-1 text-sm text-gray-500 dark:text-gray-400',
  links: 'flex flex-wrap items-center gap-1.5',
  icon: {
    wrapper: 'inline-flex',
    base: 'w-12 h-12 flex-shrink-0 text-gray-900 dark:text-white'
  }
}