Skip to content
Get Pro
Sections

Pricing

Two or three plans side by side, stacked when narrow.

$149 once · every Pro piece

Customize

Borderless filled cards share one row grid, so prices, buttons and features line up across them. An optional monthly/yearly switch, shown only when a plan is billed per month, slides a raised thumb on a spring and rolls every price to its new figure digit by digit while the billing line cross-fades; feature lists tick themselves off with drawn checks when the section comes into view. The recommended plan sits on a slightly lifted card with a faint warm light under its top.

Install

npx shadcn@latest add @obsyde/pricing

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Pricing } from '@/components/obsyde/ember/pricing/Pricing';

export function Example() {
  return (
    <Pricing />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/pricing/Pricing.tsxcomponent
  • ember/pricing/pricing-demo.cssstyles
  • ember/pricing/pricing.cssstyles
  • ember/pricing/PricingDemo.tsxdemo
  • ember/actions-kit/kit.tsshared
  • ember/segmented/segmented.cssshared
  • ember/segmented/Segmented.tsxshared
  • ember/shared/ember.cssshared
  • ember/shared/accent.tsshared
  • ember/shared/spring.tsshared
  • ember/effects-kit/kit.tsshared
  • ember/ticker/ticker.cssshared
  • ember/ticker/Ticker.tsxshared
  • ember/blocks-kit/check.cssshared
  • ember/blocks-kit/Check.tsxshared
  • ember/blocks-kit/blocks-kit.cssshared
  • ember/blocks-kit/kit.tsxshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
plansPlans'ember' | 'placeholder''ember'
billingBilling (placeholder plans)'monthly' | 'yearly''monthly'