CounterBadge

counterbadge-1779393692650.tsx

'use client'
import { useState, useEffect } from 'react'

export default function CounterBadge({ count = 0, max = 99, color = '#ef4444' }) {
  const [displayed, setDisplayed] = useState(0)
  useEffect(() => {
    const t = setTimeout(() => setDisplayed(count), 100)
    return () => clearTimeout(t)
  }, [count])
  const label = displayed > max ? max + '+' : displayed
  if (displayed === 0) return null
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      minWidth: '20px', height: '20px', padding: '0 5px',
      background: color, color: '#fff', borderRadius: '9999px',
      fontSize: '11px', fontWeight: 700,
      animation: 'bounceIn 0.3s ease',
    }}>
      <style>{'@keyframes bounceIn{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}'}</style>
      {label}
    </span>
  )
}

Component info

CategoryBadges

Frameworkreact

TierFREE

Copies0

About

Animated counter badge for notifications and counts

More from Badges

'use client'
import { useState } from 'react'

export default function BadgeShowcase() {
  const [tags, setTags] = useState(['React', 'TypeScript', 'Next.js', 'Tailwind', 'Prisma'])
  const [count, setCount] = useState(12)

  return (
    <div style=

BadgeShowcase

Badges

'use client';
import { useState } from 'react';

export default function TechStackBadges() {
  const [hovered, setHovered] = useState(null);
  const stack = [
    { name: 'Next.js', icon: '▲', color: '#fff', desc: 'React framework' },
    { name: 'Ty

TechStackBadges

Badges

'use client'
const VARIANTS = {
  success: { bg: '#d1fae5', color: '#065f46', dot: '#10b981' },
  error:   { bg: '#fee2e2', color: '#991b1b', dot: '#ef4444' },
  warning: { bg: '#fef3c7', color: '#92400e', dot: '#f59e0b' },
  info:    { bg: '#dbeafe'

PillBadge

Badges

'use client'
import { useState } from 'react'

const INIT_CHIPS = [
  { id:1, label:'React', icon:'⚛️', color:'#dbeafe', textColor:'#1d4ed8' },
  { id:2, label:'TypeScript', icon:'📘', color:'#ede9fe', textColor:'#6d28d9' },
  { id:3, label:'Tailwind

Chip

Badges