Loading…

Star Count

beta

An animated star counter — plain or as a star button — with the stargazers' avatars beside it. The count is a prop; nothing is fetched.

Display
1 file
1 npm package
Accessibility notes

Playground

Installation

The CLI installs avatar-group and number-flow as well, because this component imports them. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add star-count

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { StarCount } from "@/components/ui/star-count";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Pill
Changing

API

Generated from the component's own types, so a prop cannot appear here without existing.

<StarCount>

Prop	Type	Default
`count` (required) The number of stars. Fetch it yourself; the component makes no network calls.	`number`	—
`animateOnMount` Count up from zero on mount. When false the count starts settled.	`boolean`	`true`
`format` Intl.NumberFormat options, e.g. `{ notation: "compact" }` for "12K".	`Intl.NumberFormatOptions`	—
`href` Makes the counter a link, e.g. to the repository.	`string`	—
`icon` The icon before the number. Defaults to a filled star.	`ReactNode`	—
`locales` Passed to Intl.NumberFormat, for the digits and the screen-reader text.	`Intl.LocalesArgument`	—
`maxAvatars` How many stargazers to show before "+N".	`number`	`5`
`stargazers` People who starred, shown as an overlapping avatar group before the count.	`AvatarGroupItem[]`	—
`stargazersLabel` Accessible name of the stargazer list.	`string`	`"Stargazers"`
`unit` The unit after the number. Defaults to "star" / "stars".	`(count: number) => ReactNode`	`(value) => (value === 1 ? "star" : "stars")`
`variant`	`"plain" \| "pill"`	`"plain"`

Plus every attribute of <div> except children.

Accessibility

The settled count is screen-reader text ("1,234 stars") while the rolling digits and the star icon are aria-hidden, so a reader never hears the count-up. With href the counter is a real link with a focus ring. Stargazers are an AvatarGroup list named by stargazersLabel. Under reduced motion the count appears settled and the star does not pop.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

count

The number of stars. Fetch it yourself; the component makes no network calls.

number

—

animateOnMount

Count up from zero on mount. When false the count starts settled.

boolean

true

format

Intl.NumberFormat options, e.g. { notation: "compact" } for "12K".

Intl.NumberFormatOptions

—

href

Makes the counter a link, e.g. to the repository.

string

—

icon

The icon before the number. Defaults to a filled star.

ReactNode

—

locales

Passed to Intl.NumberFormat, for the digits and the screen-reader text.

Intl.LocalesArgument

—

maxAvatars

How many stargazers to show before "+N".

number

5

stargazers

People who starred, shown as an overlapping avatar group before the count.

AvatarGroupItem[]

—

stargazersLabel

Accessible name of the stargazer list.

string

"Stargazers"

unit

The unit after the number. Defaults to "star" / "stars".

(count: number) => ReactNode

(value) => (value === 1 ? "star" : "stars")

variant

"plain" | "pill"

"plain"