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

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.

Recent sales

You made 265 sales this month.

<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.

Top countries

You have 12,000 users from 150 countries.

<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
undefined
title
string
undefined
description
string
undefined
links
(Button & { click?: Function; })[]
[]
ui
{}
{}

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