Chip

chip-1779394345574.tsx

'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', icon:'🎨', color:'#d1fae5', textColor:'#065f46' },
  { id:4, label:'Next.js', icon:'▲', color:'#f3f4f6', textColor:'#111827' },
  { id:5, label:'Prisma', icon:'🔷', color:'#fef3c7', textColor:'#92400e' },
]

export default function ChipGroup({ chips: initChips = INIT_CHIPS, dismissible = true }) {
  const [chips, setChips] = useState(initChips)
  const [adding, setAdding] = useState(false)
  const [newLabel, setNewLabel] = useState('')
  const dismiss = (id) => setChips(c => c.filter(x => x.id !== id))
  const add = () => {
    if (!newLabel.trim()) return
    setChips(c => [...c, { id:Date.now(), label:newLabel.trim(), icon:'🏷️', color:'#f5f3ff', textColor:'#6d28d9' }])
    setNewLabel('')
    setAdding(false)
  }
  return (
    <div style={{ display:'flex', flexWrap:'wrap', gap:'8px', alignItems:'center' }}>
      {chips.map(chip => (
        <div key={chip.id} style={{
          display:'inline-flex', alignItems:'center', gap:'5px',
          background:chip.color, color:chip.textColor,
          padding:'5px 10px', borderRadius:'9999px',
          fontSize:'13px', fontWeight:600,
        }}>
          <span>{chip.icon}</span>
          {chip.label}
          {dismissible && (
            <button onClick={()=>dismiss(chip.id)} style={{ background:'none', border:'none', color:'inherit', cursor:'pointer', opacity:0.6, fontSize:'14px', padding:0, marginLeft:'2px', lineHeight:1 }}>×</button>
          )}
        </div>
      ))}
      {adding ? (
        <div style={{ display:'flex', gap:'6px', alignItems:'center' }}>
          <input autoFocus value={newLabel} onChange={e=>setNewLabel(e.target.value)}
            onKeyDown={e=>{if(e.key==='Enter')add();if(e.key==='Escape'){setAdding(false);setNewLabel('')}}}
            placeholder="Tag name..." style={{ border:'2px solid #6d28d9', borderRadius:'9999px', padding:'4px 12px', fontSize:'13px', outline:'none', width:'100px' }}
          />
          <button onClick={add} style={{ background:'#6d28d9', color:'#fff', border:'none', borderRadius:'9999px', padding:'5px 12px', cursor:'pointer', fontSize:'12px', fontWeight:700 }}>Add</button>
        </div>
      ) : (
        <button onClick={()=>setAdding(true)} style={{ background:'#f1f5f9', color:'#64748b', border:'2px dashed #cbd5e1', borderRadius:'9999px', padding:'5px 12px', cursor:'pointer', fontSize:'12px', fontWeight:600 }}>+ Add</button>
      )}
    </div>
  )
}

Component info

CategoryBadges

Frameworkreact

TierFREE

Copies0

About

Chip/tag component with avatar, icon and dismiss variants

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, useEffect } from 'react'

export default function CounterBadge({ count = 0, max = 99, color = '#ef4444' }) {
  const [displayed, setDisplayed] = useState(0)
  useEffect(() => {
    const t = setTimeout(() => setDisplay

CounterBadge

Badges