Rank Component

List ranking indicator with dynamic sizing, variants, shapes, and color support. Uses aspect-ratio: 1/1 for square sizing.

Notes

Base: .rank. Default is text-only color (no background).
Variants: rank-solid (filled), rank-muted (subtle border), rank-outline (thick border), rank-subtle (soft background).
Prefer compound variant classes like rank-solid-primary over rank rank-solid rank-primary — smaller CSS output.
Sizes: rank-2xs (12px) to rank-5xl (32px) — default is rank-md (16px).
Shapes: rank-square, rank-rounded, rank-circle / rank-pill, rank-fluid.

Basic usage

Default rank (text only)

1 2 3 A B

With text color

1 2 3 4

Variants

Default (text color)

1 2 3

rank-solid (filled)

1 2 3

rank-muted (subtle border)

1 2 3

rank-outline (thick border)

1 2 3

rank-subtle (soft bg)

1 2 3

Comparison

1 1 1 1 1

Shapes

Default (small radius)

1 2

rank-square

1 2

rank-circle / rank-pill (rank-circle === rank-pill)

1 2

rank-fluid

1 2 3

Sizes

12px (rank-2xs)

14px (rank-xs)

14px (rank-sm)

16px (rank-md, default)

16px (rank-lg)

16px (rank-xl)

20px (rank-2xl)

24px (rank-3xl)

28px (rank-4xl)

32px (rank-5xl)

Theme colors

Each color shown in 3 variants: default / solid / muted.

Primary / Secondary / Tertiary

111 222 333

Success / Error / Info

SSS EEE III

Highlight / Warning / Caution

!!! ??? CCC

Ink / Title / Description / Caption / Disabled

NNN TTT DDD CCC XXX

Compound shortcut variants

Use rank-solid-primary instead of rank rank-solid rank-primary for smaller CSS output.

rank-solid-*

1 2 3 4

rank-muted-*

1 2 3

rank-outline-*

1 2 3

rank-subtle-*

1 2 3

rank-plain-* (text only)

1 2 3

Custom colors

Multiple color formats are supported:

1. Theme semantic colors, e.g. *-error, *-error-hover
2. Tailwind built-in colors, e.g. *-indigo-500
3. Raw color values, e.g. *-[#ff0000]
4. CSS named colors, e.g. *-[red], *-[green]

Default variant

1 1 1

Solid variant

1 1 1 1

Muted variant

1 1 1

Subtle variant

1 1 1

Outline variant

1 1 1