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.
{
"message": "You should use slots with <ContentRenderer>",
"value": {},
"excerpt": false,
"tag": "div"
}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.
{
"message": "You should use slots with <ContentRenderer>",
"value": {},
"excerpt": false,
"tag": "div"
}Slots
header
{}
icon
{}
title
{}
description
{}
links
{}
default
{}
footer
{}
Props
icon
string
undefinedtitle
string
undefineddescription
string
undefinedlinks
(Button & { click?: (...args: any[]) => void; })[]
[]ui
any
{}Config
{
divide: '',
header: {
base: 'flex flex-wrap items-center justify-between gap-2',
inner: 'flex items-start gap-4',
wrapper: '',
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'
}
}