Content

WinsCard

The rewarding part of Home: a ring that fills as the month's projects get published, a short cheer that changes as you go, and a couple of wins beside it (money paid to you, brands worked with).

Preview

Live, in this page’s themeOpen on its own

Props

Prop	Type	Description
`title`	`string`	e.g. "October so far".
`done`Required	`number`	The month's finished and total to-dos; the ring fills with done / total.
`total`Required	`number`
`unit`	`string`	Default "to-dos".
`doneWord`	`string`	Default "done"; Home uses "published".
`wins`	`{ icon?: IconName; value: React.ReactNode; label: React.ReactNode }[]`	Things already achieved, two is plenty: { icon, value, label }.
`message`	`string`	Overrides the cheer line.
`size`	`'S' \| 'M'`
`headingLevel`	`number`
`label`	`string`
`className`	`string`

Guidelines

The rewarding part of Home: a ring that fills as the month's projects get published, a short cheer that changes as you go, and a couple of wins beside it (money paid to you, brands worked with). Each new one makes the count pop and sends a small burst in the logo's yellow, mint and sky.

Provide: title ("October so far"), done and total, unit and doneWord (Home uses "projects" and "published"; the defaults are "to-dos" and "done"), wins: a list of { icon, value, label } (two is plenty), message to override the cheer, size (S on phones), headingLevel.

On Home, done counts the month's published projects, so dragging a card into Published on the board fills the ring right away.
The cheer is always encouraging and never counts what is missing in a way that stings: "Nice. 4 down, 5 to go.", "Another one published. Keep it rolling.", and "All 9 published. Enjoy it." when the month is done. No exclamation points.
Wins are things already achieved, never targets. Keep the card to one per screen, beside the numbers that need you.
The ring is green because it counts finished work. The burst is the one place the logo's sky and mint appear in the interface, and it is skipped with reduced motion.