Back to Components
bash
npm install @hua-labs/huatsx
import { SummaryCard } from "@hua-labs/ui/advanced/dashboard";default
Default
1,234
gradient
Gradient
1,234
outline
Outline
1,234
blue
1,234
purple
1,234
green
1,234
orange
1,234
red
1,234
indigo
1,234
pink
1,234
gray
1,234
Loading
Props
title* | string | - | Card title |
value* | string | number | - | Summary value to display |
subtitle | string | - | Subtitle text below the value |
icon | IconName | React.ReactNode | - | Icon to display |
color | "blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray" | "blue" | Color theme |
variant | "default" | "gradient" | "outline" | "default" | Visual style variant |
href | string | - | Link URL for action button |
onClick | () => void | - | Click handler for action button |
loading | boolean | false | Show loading state |
badge | string | React.ReactNode | - | Badge to display in header |
footer | React.ReactNode | - | Footer content |
showAction | boolean | true | Whether to show action button |
actionLabel | string | "View Details" | Action button label |
BasicSummaryCard.tsxtsx
import { SummaryCard } from "@hua-labs/ui/advanced/dashboard";
export function BasicSummaryCard() {
return (
<SummaryCard
title="Total Revenue"
value="₩10,000,000"
subtitle="This month"
icon="dollarSign"
href="/revenue"
/>
);
}SummaryCardVariants.tsxtsx
import { SummaryCard } from "@hua-labs/ui/advanced/dashboard";
export function SummaryCardVariants() {
return (
<div className="grid grid-cols-3 gap-4">
<SummaryCard
title="Orders"
value="1,234"
variant="default"
color="blue"
/>
<SummaryCard
title="Revenue"
value="₩5,000,000"
variant="gradient"
color="purple"
/>
<SummaryCard
title="Customers"
value="567"
variant="outline"
color="green"
/>
</div>
);
}