SubscriptionCard

subscriptioncard-1779394345664.tsx

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

export default function SubscriptionCard({
  plan = 'Pro',
  price = 29,
  nextBilling = 'June 22, 2025',
  features = ['17,500+ Components','MCP Access','Priority Support','API Access'],
}) {
  const [canceling, setCanceling] = useState(false)
  return (
    <div style={{ background:'linear-gradient(135deg,#1e1e2e,#2d1b69)', borderRadius:'20px', padding:'28px', maxWidth:'340px', color:'#fff' }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:'20px' }}>
        <div>
          <div style={{ fontSize:'12px', color:'#a78bfa', fontWeight:700, textTransform:'uppercase', letterSpacing:'0.1em', marginBottom:'4px' }}>Current Plan</div>
          <div style={{ fontSize:'24px', fontWeight:900 }}>{plan} Plan</div>
        </div>
        <div style={{ background:'rgba(167,139,250,0.2)', borderRadius:'10px', padding:'8px 14px', textAlign:'center' }}>
          <div style={{ fontSize:'22px', fontWeight:900, color:'#a78bfa' }}>{price}</div>
          <div style={{ fontSize:'10px', color:'#94a3b8' }}>USD/month</div>
        </div>
      </div>
      <div style={{ background:'rgba(255,255,255,0.05)', borderRadius:'12px', padding:'14px', marginBottom:'20px' }}>
        <div style={{ fontSize:'11px', color:'#94a3b8', marginBottom:'12px', textTransform:'uppercase', letterSpacing:'0.05em' }}>Included</div>
        {features.map(f => (
          <div key={f} style={{ display:'flex', gap:'8px', marginBottom:'8px', fontSize:'13px', color:'#e2e8f0' }}>
            <span style={{ color:'#a78bfa' }}>✓</span> {f}
          </div>
        ))}
      </div>
      <div style={{ fontSize:'12px', color:'#94a3b8', marginBottom:'16px' }}>
        Next billing date: <span style={{ color:'#e2e8f0', fontWeight:600 }}>{nextBilling}</span>
      </div>
      {!canceling ? (
        <div style={{ display:'flex', gap:'10px' }}>
          <button style={{ flex:1, background:'rgba(255,255,255,0.1)', border:'1px solid rgba(255,255,255,0.2)', color:'#fff', borderRadius:'10px', padding:'10px', cursor:'pointer', fontSize:'13px', fontWeight:600 }}>Upgrade</button>
          <button onClick={()=>setCanceling(true)} style={{ background:'none', border:'1px solid rgba(239,68,68,0.4)', color:'#fca5a5', borderRadius:'10px', padding:'10px 16px', cursor:'pointer', fontSize:'13px' }}>Cancel</button>
        </div>
      ) : (
        <div style={{ background:'rgba(239,68,68,0.15)', border:'1px solid rgba(239,68,68,0.3)', borderRadius:'12px', padding:'14px' }}>
          <div style={{ fontSize:'13px', color:'#fca5a5', marginBottom:'12px' }}>Are you sure you want to cancel?</div>
          <div style={{ display:'flex', gap:'8px' }}>
            <button onClick={()=>setCanceling(false)} style={{ flex:1, background:'#6d28d9', color:'#fff', border:'none', borderRadius:'8px', padding:'8px', cursor:'pointer', fontSize:'12px', fontWeight:600 }}>Keep Plan</button>
            <button style={{ flex:1, background:'none', border:'1px solid #ef4444', color:'#ef4444', borderRadius:'8px', padding:'8px', cursor:'pointer', fontSize:'12px' }}>Confirm Cancel</button>
          </div>
        </div>
      )}
    </div>
  )
}

Component info

CategoryE-commerce

Frameworkreact

TierFREE

Copies0

About

Subscription plan card with features, billing cycle and cancel option

More from E-commerce

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

interface CartItem { id: number; name: string; price: number; qty: number; color: string }

const INITIAL_ITEMS: CartItem[] = [
  { id: 1, name: 'Empire UI Pro', price: 19, qty: 1, color: '#C9A84C' },

CartDrawer

E-commerce

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

const images = ['🖥️', '💻', '⌨️', '🖱️']
const colors = [{ name: 'Space Gray', hex: '#4a4a4a' }, { name: 'Silver', hex: '#c0c0c0' }, { name: 'Gold', hex: '#C9A84C' }]
const sizes = ['8GB / 256GB', '16GB

ProductQuickView

E-commerce

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

export default function SubscriptionManager() {
  const [current, setCurrent] = useState('pro');
  const [confirming, setConfirming] = useState(null);

  const plans = [
    { id: 'starter', name: 'Sta

SubscriptionManager

E-commerce

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

export default function CartItem({
  name = 'Pro Subscription',
  price = 29,
  emoji = '⭐',
}) {
  const [qty, setQty] = useState(1)
  return (
    <div style={{
      display: 'flex', alignItems: 'cent

CartItem

E-commerce