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
description
string
undefinedicon
string
undefinedtitle
string
undefinedlinks
(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'
}
}