GlassPricingCard

glasspricingcard-1779393693012.tsx

'use client'
const FEATURES = ['Unlimited projects', '10GB storage', 'Priority support', 'API access', 'Custom domain']

export default function GlassPricingCard({
  plan = 'Pro', price = '$29', period = '/month',
  features = FEATURES, popular = true,
}) {
  return (
    <div style={{
      background: popular
        ? 'linear-gradient(135deg, rgba(109,40,217,0.9), rgba(37,99,235,0.9))'
        : 'rgba(255,255,255,0.8)',
      backdropFilter: 'blur(16px)', borderRadius: '20px',
      padding: '32px 28px', border: popular ? '1px solid rgba(255,255,255,0.3)' : '1px solid #e2e8f0',
      color: popular ? '#fff' : '#1e293b', maxWidth: '280px', position: 'relative',
    }}>
      {popular && (
        <div style={{
          position: 'absolute', top: '-12px', left: '50%', transform: 'translateX(-50%)',
          background: '#f59e0b', color: '#fff', padding: '4px 14px', borderRadius: '20px',
          fontSize: '12px', fontWeight: 700,
        }}>MOST POPULAR</div>
      )}
      <h3 style={{ margin: '0 0 8px', fontSize: '20px', fontWeight: 700 }}>{plan}</h3>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: '4px', marginBottom: '24px' }}>
        <span style={{ fontSize: '42px', fontWeight: 900 }}>{price}</span>
        <span style={{ opacity: 0.7 }}>{period}</span>
      </div>
      <ul style={{ listStyle: 'none', margin: '0 0 24px', padding: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
        {features.map(f => (
          <li key={f} style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px' }}>
            <span>✓</span> {f}
          </li>
        ))}
      </ul>
      <button style={{
        width: '100%', padding: '12px',
        background: popular ? '#fff' : 'linear-gradient(135deg,#6d28d9,#2563eb)',
        color: popular ? '#6d28d9' : '#fff',
        border: 'none', borderRadius: '10px', fontWeight: 700, cursor: 'pointer', fontSize: '15px',
      }}>Get Started</button>
    </div>
  )
}

Component info

CategoryCards

Frameworkreact

TierFREE

Copies0

About

Glassmorphism pricing card with feature list and CTA

More from Cards

'use client';

import React, { useState, useEffect } from 'react';

interface StatsCardProps {
  label: string;
  value: number;
  trend: 'up' | 'down';
  percentageChange: number;
  sparklineData: number[];
}

const StatsCard: React.FC<StatsCardProp

StatsCard

Cards

import React from 'react';
import { useEffect, useState } from 'react';

interface NoisyCardProps {
  children: React.ReactNode;
  className?: string;
}

const NoisyCard: React.FC<NoisyCardProps> = ({ children, className }) => {
  const [noise, setNo

NoisyCard

Cards

import React, { useState, useEffect } from 'react';

interface HolographicCardProps {
  children: React.ReactNode;
}

const HolographicCard: React.FC<HolographicCardProps> = ({ children }) => {
  const [mousePosition, setMousePosition] = useState({ x

HolographicCard

Cards

'use client';

import React, { useState } from 'react';

interface Notification {
  id: number;
  avatar: string;
  message: string;
  time: string;
  unread: boolean;
}

const notifications: Notification[] = [
  { id: 1, avatar: 'https://via.placeho

NotificationCard

Cards