DashboardCard

A pre-built Card to display stats, charts or any data you’d need in a dashboard.

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

Usage

Built on top of the Card component, the DashboardCard can be used inside a DashboardPanelContent to display stats, charts, etc.

Use the title, description, and icon props to customize the card.

<template>
  <UDashboardCard
    title="Recent sales"
    description="You made 265 sales this month."
    icon="i-heroicons-chart-bar"
  >
    <UProgress />
  </UDashboardCard>
</template>

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

<template>
  <UDashboardCard
    title="Top countries"
    description="You have 12,000 users from 150 countries."
    :links="[{ label: 'Learn more', color: 'gray', trailingIcon: 'i-heroicons-arrow-right-20-solid' }]"
  />
</template>

Slots

• header - {}
• icon - {}
• title - {}
• description - {}
• links - {}
• default - {}
• footer - {}

Props

• icon - string (default: undefined)
• title - string (default: undefined)
• description - string (default: undefined)
• links - (Button & { click?: (…args: any[]) => void; })[] (default: [])
• ui - any (default: {})

Config

{
  divide: '',
  header: {
    base: 'flex flex-wrap items-center justify-between gap-2',
    inner: 'flex items-start gap-4',
    padding: 'px-4 py-4 sm:px-6'
  },
  title: 'text-gray-900 dark:text-white font-semibold',
  description: 'mt-1 text-gray-500 dark:text-gray-400 text-sm',
  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'
  }
}