Bill total header above an overlapping avatar stack with the per-person share on the right.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Money10 } from "@/components/beste/piece/money10";
<Money10
total="$248.60"
perPerson="$62.15"
people={[
{
"src": "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face",
"alt": "Ayşe",
"fallback": "AK"
},
{
"src": "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face",
"alt": "Merve",
"fallback": "MÖ"
},
{
"src": "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face",
"alt": "Sarah",
"fallback": "SB"
},
{
"src": "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face",
"alt": "John",
"fallback": "JD"
}
]}
/>Ranked categories, each with an amount and a bar sized to its share.
Category row with spent over budget caption and a progress bar that colors emerald, amber, or rose as it fills.
Compact invoice card with an ID header, line items, and a subtotal, tax, and total block at the bottom.
Portfolio split shown as a single tonal bar with a matching percentage legend.
Directional arrow bubble beside a merchant name, category and date meta, and a signed amount on the right.
Gradient wallet card with an uppercase label, big balance, and currency code.