Docs / Pricing

Pricing

vel-src: components/pricing.css

A pricing table component for displaying tiered plans. Supports a featured card with a gradient border glow effect, a Most Popular badge, price display, feature lists with check icons, and CTA button slots.

ClassProperties
vel-pricing-gridflex wrap, centered, gap: 6, align-items: stretch
vel-pricing-cardflex column, flex: 1 1 280px, max-width: 360px, surface-2 bg, border, border-radius: 2xl, hover: lift + shadow-xl
vel-pricing-card-featuredgradient border via ::before mask, surface-3 bg, shadow-xl + primary glow, scale(1.02)
vel-pricing-badgeabsolute positioned pill above card — gradient bg, primary-fg text, rounded-full, glow
vel-pricing-namexs, bold, uppercase, widest tracking, primary-400 color, margin-bottom
vel-pricing-price6xl font-size, extrabold, tight tracking, color: text, line-height: 1
vel-pricing-periodbase size, normal weight, muted color — suffix appended to price (e.g. /mo)
vel-pricing-descriptionsm font, muted color, relaxed line-height, margin-top
vel-pricing-divider1px hr separator — border-base color, margin: 6 (vertical)
vel-pricing-featuresflex column list, gap: 3, no list-style, flex: 1
vel-pricing-featureflex row, gap: 3, sm font, color: text, align-items: flex-start
vel-pricing-feature-check1.1rem circle — green bg tint, success-400 color, centered checkmark
vel-pricing-ctamargin-top: auto, padding-top; child buttons expand to full width

Examples

Pricing table with Starter, Pro (featured), and Enterprise cards

Starter

$0/mo

Perfect for personal projects and exploration.

  • ✓ Up to 3 projects
  • ✓ Community support
  • ✓ Core components
Most Popular

Pro

$19/mo

For teams building production-grade products.

  • ✓ Unlimited projects
  • ✓ Priority support
  • ✓ All components + Phase 6
  • ✓ Design token export

Enterprise

$79/mo

Custom branding, SLAs, and dedicated support.

  • ✓ Everything in Pro
  • ✓ White-label builds
  • ✓ Dedicated Slack channel
  • ✓ 99.9% uptime SLA
example.html
<div style="padding:32px 24px;background:#060b17;font-family:system-ui,sans-serif;border-radius:12px;">
  <div class="vel-pricing-grid">

    <!-- Starter -->
    <div class="vel-pricing-card">
      <p class="vel-pricing-name">Starter</p>
      <p class="vel-pricing-price">$0<span class="vel-pricing-period">/mo</span></p>
      <p class="vel-pricing-description">Perfect for personal projects and exploration.</p>
      <hr class="vel-pricing-divider">
      <ul class="vel-pricing-features">
        <li class="vel-pricing-feature">
          <span class="vel-pricing-feature-check">✓</span>
          <span>Up to 3 projects</span>
        </li>
        <li class="vel-pricing-feature">
          <span class="vel-pricing-feature-check">✓</span>
          <span>Community support</span>
        </li>
        <li class="vel-pricing-feature">
          <span class="vel-pricing-feature-check">✓</span>
          <span>Core components</span>
        </li>
      </ul>
      <div class="vel-pricing-cta">
        <button class="vel-btn">Get Started Free</button>
      </div>
    </div>

    <!-- Pro (featured) -->
    <div class="vel-pricing-card vel-pricing-card-featured" style="position:relative;">
      <span class="vel-pricing-badge">Most Popular</span>
      <p class="vel-pricing-name">Pro</p>
      <p class="vel-pricing-price">$19<span class="vel-pricing-period">/mo</span></p>
      <p class="vel-pricing-description">For teams building production-grade products.</p>
      <hr class="vel-pricing-divider">
      <ul class="vel-pricing-features">
        <li class="vel-pricing-feature">
          <span class="vel-pricing-feature-check">✓</span>
          <span>Unlimited projects</span>
        </li>
        <li class="vel-pricing-feature">
          <span class="vel-pricing-feature-check">✓</span>
          <span>Priority support</span>
        </li>
        <li class="vel-pricing-feature">
          <span class="vel-pricing-feature-check">✓</span>
          <span>All components + Phase 6</span>
        </li>
        <li class="vel-pricing-feature">
          <span class="vel-pricing-feature-check">✓</span>
          <span>Design token export</span>
        </li>
      </ul>
      <div class="vel-pricing-cta">
        <button class="vel-btn vel-btn-primary">Upgrade to Pro</button>
      </div>
    </div>

    <!-- Enterprise -->
    <div class="vel-pricing-card">
      <p class="vel-pricing-name">Enterprise</p>
      <p class="vel-pricing-price">$79<span class="vel-pricing-period">/mo</span></p>
      <p class="vel-pricing-description">Custom branding, SLAs, and dedicated support.</p>
      <hr class="vel-pricing-divider">
      <ul class="vel-pricing-features">
        <li class="vel-pricing-feature">
          <span class="vel-pricing-feature-check">✓</span>
          <span>Everything in Pro</span>
        </li>
        <li class="vel-pricing-feature">
          <span class="vel-pricing-feature-check">✓</span>
          <span>White-label builds</span>
        </li>
        <li class="vel-pricing-feature">
          <span class="vel-pricing-feature-check">✓</span>
          <span>Dedicated Slack channel</span>
        </li>
        <li class="vel-pricing-feature">
          <span class="vel-pricing-feature-check">✓</span>
          <span>99.9% uptime SLA</span>
        </li>
      </ul>
      <div class="vel-pricing-cta">
        <button class="vel-btn">Contact Sales</button>
      </div>
    </div>

  </div>
</div>