PricingToggleCard

pricingtogglecard-1779388705635.tsx

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

export default function PricingToggleCard() {
  const [annual, setAnnual] = useState(false);
  const monthly = 49;
  const price = annual ? Math.round(monthly * 0.75) : monthly;

  const features = ['Unlimited projects', 'AI assistant', 'Priority support', 'Custom domain', 'Analytics dashboard', 'API access'];

  return (
    <div style={{
      fontFamily: 'system-ui, sans-serif',
      maxWidth: '340px',
      background: 'linear-gradient(145deg, rgba(201,168,76,0.08), rgba(99,102,241,0.05))',
      border: '1px solid rgba(201,168,76,0.25)',
      borderRadius: '24px',
      padding: '32px',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '24px' }}>
        <h3 style={{ color: '#F5F5F0', margin: 0, fontSize: '18px', fontWeight: 700 }}>Pro Plan</h3>
        <div
          onClick={() => setAnnual(a => !a)}
          style={{
            display: 'flex', alignItems: 'center', gap: '8px',
            background: 'rgba(255,255,255,0.05)',
            borderRadius: '20px',
            padding: '4px 10px',
            cursor: 'pointer',
            fontSize: '12px',
          }}
        >
          <span style={{ color: !annual ? '#C9A84C' : 'rgba(245,245,240,0.4)' }}>Mo</span>
          <div style={{
            width: '32px', height: '16px', borderRadius: '8px',
            background: annual ? '#6366f1' : 'rgba(255,255,255,0.1)',
            position: 'relative', transition: 'background 0.3s',
          }}>
            <div style={{
              position: 'absolute', top: '2px', left: annual ? '16px' : '2px',
              width: '12px', height: '12px', borderRadius: '50%',
              background: 'white', transition: 'left 0.3s',
            }} />
          </div>
          <span style={{ color: annual ? '#6366f1' : 'rgba(245,245,240,0.4)' }}>Yr</span>
        </div>
      </div>
      <div style={{ marginBottom: '24px' }}>
        <span style={{ color: '#C9A84C', fontSize: '42px', fontWeight: 800 }}>${price}</span>
        <span style={{ color: 'rgba(245,245,240,0.4)', fontSize: '14px' }}>/month</span>
        {annual && <span style={{ marginLeft: '8px', background: 'rgba(74,222,128,0.1)', color: '#4ade80', borderRadius: '6px', padding: '2px 8px', fontSize: '11px', fontWeight: 600 }}>Save 25%</span>}
      </div>
      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 24px 0' }}>
        {features.map((f, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'center', gap: '10px', color: 'rgba(245,245,240,0.75)', fontSize: '14px', padding: '7px 0', borderBottom: '1px solid rgba(255,255,255,0.04)' }}>
            <span style={{ color: '#C9A84C', fontSize: '12px' }}>✓</span>{f}
          </li>
        ))}
      </ul>
      <button style={{
        width: '100%', background: 'linear-gradient(135deg, #C9A84C, #e8c96d)',
        border: 'none', borderRadius: '12px', padding: '14px',
        color: '#0A0A0A', fontWeight: 700, fontSize: '15px', cursor: 'pointer',
      }}>
        Get Started
      </button>
    </div>
  );
}

Component info

CategorySaas Dashboard

Frameworkreact

TierFREE

Copies0

About

Single pricing card with monthly/annual billing toggle

More from Saas Dashboard

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

export default function ResourceUsageBar() {
  const [resources, setResources] = useState([
    { name: 'CPU', value: 42, color: '#6366f1' },
    { name: 'Memory', value: 71, color: '#C9A84C

ResourceUsageBar

Saas Dashboard

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

export default function UsageQuota() {
  const quotas = [
    { name: 'API Calls', used: 87420, limit: 100000, unit: 'calls' },
    { name: 'Storage', used: 47.3, limit: 50, unit: 'GB' },
    { name: '

UsageQuota

Saas Dashboard

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

export default function SaaSMetricsDashboard() {
  const [metrics, setMetrics] = useState({
    mrr: 48293, mrrChange: 12.4,
    churn: 1.8, churnChange: -0.3,
    nps: 72, npsChange: 5,

SaaSMetricsDashboard

Saas Dashboard