Stat Row

Component

About

Responsive 4-up grid of stat cards (2 col on mobile, 4 col on desktop). Each card has a circular brand-red icon, a large numeric value, and a small label. Lucide icons via icon-name prop.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Stat Row to your project and fits it to your theme.

Code

How Stat Row is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import StatRow from '@/components/ui/statrow'

export default function Demo() {
  return (
    <div className="p-8 bg-white">
      <StatRow
        stats={[
          { icon: 'briefcase', value: '500+', label: 'Projecten opgeleverd' },
          { icon: 'award', value: '25+', label: 'Jaar ervaring' },
          { icon: 'users', value: '3', label: 'Generaties vakmanschap' },
          { icon: 'star', value: '1000+', label: 'Tevreden klanten' },
        ]}
      />
    </div>
  )
}