‹ components

SocialProofChip

stablev1.0.0·open in canvas

"◔ 41 watching" — quiet social-proof count. Never louder than the price it sits by.

Installnpx shadcn add @cids/social-proof-chip
Live demo
41watching41watching7holding

Motion · tap to replay

honors reduced-motion

None.

This component declares no motion.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { SocialProofChip } from "@/design-system";

<SocialProofChip count={41} />            {/* ◔ 41 watching */}
<SocialProofChip count={41} compact />    {/* ◔ 41 */}
<SocialProofChip count={7} label="holding" />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

**Full** — glyph + count + label.**Compact** — glyph + count.

"◔ 41 watching" — quiet social-proof count. Never louder than the price it sits by.

Anatomy

 ◔ 41 watching        ◔ 41      ← compact (on cards)
 │  │  └ label, fg-muted        └ label dropped
 │  └ count, .data-sm
 └ dotted-ring glyph, brand @60%

Props

PropTypeDefaultNotes
countnumber—The proof count.
labelstring"watching"Trailing word.
compactbooleanfalseDrop the label; show glyph + count only.
classNamestring—Merged via cn.

Motion

None.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.