Badges & Chips.

The smallest components carry the most meaning. Status pills, tags, counters, avatar stacks and rating chips — each one pairs colour with a glyph so meaning never depends on hue alone.

55 componentsHover to copyTailwind CSSAccessible pairs

Buttons Inputs Badges & Chips Cards Forms Loaders Navigation Overlay Feedback Data Display Text Effects Backgrounds Effects Hero Sections Landing Blog & Content Layout Dashboard AI Interfaces E-commerce Auth Settings

State

Status pills

Deploy states, health indicators and uptime strips — colour plus an icon, never colour alone.

11 variants

Live

Live (pinging)

tsx

Building

tsx

✓ Deployed

Success

tsx

✕ Failed

Failed

tsx

◷ Queued

Queued

tsx

⚠ Degraded

Warning

tsx

ⓘ Scheduled

Info

tsx

Archived

tsx

In review

Left rail

tsx

Boosted

Glow pill

tsx

99.2%

Uptime dots

tsx

Taxonomy

Tags & labels

Category labels, version chips, removable tags and interactive filter groups.

12 variants

reacttailwindtypescript

Stateful

Removable tags

tsx

Stateful

Filter chips

tsx

DESIGN

Solid tag

tsx

ENGINEERING

Soft tag

tsx

changelog

Outline tag

tsx

v2.4.1

Mono tag

tsx

Featured

Gradient tag

tsx

Marketing

Dot tag

tsx

Early bird

Ticket notch

tsx

npm1.2M/wk

Tag group

tsx

New

Shimmer label

tsx

Beta

Beta ring

tsx

Attention

Counters & notifications

Notification dots, unread counts, trend deltas, ribbons and keyboard hints.

10 variants

Icon + count

tsx

✉

Pinging dot

tsx

99+

99+ counter

tsx

Neutral counter

tsx

▲ 18.2%

Trend up

tsx

▼ 4.7%

Trend down

tsx

Pro

Corner ribbon

tsx

LIVE · 2.4K

Live viewers

tsx

70% complete

Progress badge

tsx

⌘K

Keyboard hint

tsx

Identity

Avatars

Initials, stacks with overflow, presence rings and typing indicators. Swap the gradient for an <img> and they all still work.

10 variants

Initials

tsx

Squircle

tsx

Online ring

tsx

AKPSRMSJ+12

Stack + overflow

tsx

AKPSRM

Hover fan

tsx

Gradient ring

tsx

AKAyush K.

With label

tsx

Typing avatar

tsx

AAAA

Sizes

tsx

Placeholder

tsx

Metadata

Plans, ratings & meta

Tier badges, star ratings, price tags, language dots and stat chips.

12 variants

★ Pro

PRO badge

tsx

Free

Free plan

tsx

Enterprise

tsx

★★★★★4.2

Star rating

tsx

★ 4.9 (2.1k)

Rating pill

tsx

Ayush K.✓

Verified

tsx

$89$129-30%

Price tag

tsx

TypeScript

Language dot

tsx

Intermediate

Difficulty

tsx

5 min readAug 2026

Read time

tsx

★ 2.4k⑂ 318◷ 12h

Stat chip

tsx

🇮🇳 India

Country flag

tsx

Badges & Chips.

The smallest components carry the most meaning. Status pills, tags, counters, avatar stacks and rating chips — each one pairs colour with a glyph so meaning never depends on hue alone.

55 componentsHover to copyTailwind CSSAccessible pairs

State

Status pills

Deploy states, health indicators and uptime strips — colour plus an icon, never colour alone.

11 variants

Live

Live (pinging)

tsx

Building

tsx

✓ Deployed

Success

tsx

✕ Failed

Failed

tsx

◷ Queued

Queued

tsx

⚠ Degraded

Warning

tsx

ⓘ Scheduled

Info

tsx

Archived

tsx

In review

Left rail

tsx

Boosted

Glow pill

tsx

99.2%

Uptime dots

tsx

Taxonomy

Tags & labels

Category labels, version chips, removable tags and interactive filter groups.

12 variants

reacttailwindtypescript

Stateful

Removable tags

tsx

Stateful

Filter chips

tsx

DESIGN

Solid tag

tsx

ENGINEERING

Soft tag

tsx

changelog

Outline tag

tsx

v2.4.1

Mono tag

tsx

Featured

Gradient tag

tsx

Marketing

Dot tag

tsx

Early bird

Ticket notch

tsx

npm1.2M/wk

Tag group

tsx

New

Shimmer label

tsx

Beta

Beta ring

tsx

Attention

Counters & notifications

Notification dots, unread counts, trend deltas, ribbons and keyboard hints.

10 variants

Icon + count

tsx

✉

Pinging dot

tsx

99+

99+ counter

tsx

Neutral counter

tsx

▲ 18.2%

Trend up

tsx

▼ 4.7%

Trend down

tsx

Pro

Corner ribbon

tsx

LIVE · 2.4K

Live viewers

tsx

70% complete

Progress badge

tsx

⌘K

Keyboard hint

tsx

Identity

Avatars

Initials, stacks with overflow, presence rings and typing indicators. Swap the gradient for an <img> and they all still work.

10 variants

Initials

tsx

Squircle

tsx

Online ring

tsx

AKPSRMSJ+12

Stack + overflow

tsx

AKPSRM

Hover fan

tsx

Gradient ring

tsx

AKAyush K.

With label

tsx

Typing avatar

tsx

AAAA

Sizes

tsx

Placeholder

tsx

Metadata

Plans, ratings & meta

Tier badges, star ratings, price tags, language dots and stat chips.

12 variants

★ Pro

PRO badge

tsx

Free

Free plan

tsx

Enterprise

tsx

★★★★★4.2

Star rating

tsx

★ 4.9 (2.1k)

Rating pill

tsx

Ayush K.✓

Verified

tsx

$89$129-30%

Price tag

tsx

TypeScript

Language dot

tsx

Intermediate

Difficulty

tsx

5 min readAug 2026

Read time

tsx

★ 2.4k⑂ 318◷ 12h

Stat chip

tsx

🇮🇳 India

Country flag

tsx