PricingComparison

'use client'
const FEATURES = [
  { name:'Components', free:'50', pro:'17,500+', team:'17,500+' },
  { name:'MCP Access', free:false, pro:true, team:true },
  { name:'Commercial License', free:false, pro:true, team:true },
  { name:'Priority Support', free:false, pro:true, team:true },
  { name:'Team Members', free:'1', pro:'1', team:'Unlimited' },
  { name:'API Access', free:false, pro:true, team:true },
  { name:'Custom Branding', free:false, pro:false, team:true },
  { name:'SSO', free:false, pro:false, team:true },
]
const render = (v) => {
  if (v === true) return <span style={{ color:'#10b981', fontSize:'18px' }}>✓</span>
  if (v === false) return <span style={{ color:'#e2e8f0', fontSize:'18px' }}>—</span>
  return <span style={{ fontSize:'13px', fontWeight:600, color:'#374151' }}>{v}</span>
}

export default function PricingComparison() {
  return (
    <div style={{ background:'#fff', borderRadius:'16px', overflow:'hidden', boxShadow:'0 2px 20px rgba(0,0,0,0.06)', maxWidth:'600px' }}>
      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', background:'#f8fafc', borderBottom:'2px solid #e2e8f0' }}>
        <div style={{ padding:'16px 20px', fontWeight:700, color:'#94a3b8', fontSize:'12px', textTransform:'uppercase' }}>Feature</div>
        {['Free','Pro','Team'].map((t, i) => (
          <div key={t} style={{ padding:'16px', textAlign:'center', fontWeight:700, color:i===1?'#6d28d9':'#374151', fontSize:'14px' }}>{t}</div>
        ))}
      </div>
      {FEATURES.map((f, i) => (
        <div key={f.name} style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', background:i%2===0?'#fff':'#fafbfc', borderBottom:'1px solid #f1f5f9' }}>
          <div style={{ padding:'14px 20px', fontSize:'13px', fontWeight:500, color:'#374151' }}>{f.name}</div>
          <div style={{ padding:'14px', textAlign:'center' }}>{render(f.free)}</div>
          <div style={{ padding:'14px', textAlign:'center', background:'rgba(109,40,217,0.03)' }}>{render(f.pro)}</div>
          <div style={{ padding:'14px', textAlign:'center' }}>{render(f.team)}</div>
        </div>
      ))}
    </div>
  )
}

Component info

About

Feature comparison table across pricing tiers with check/cross marks