Blocks

Pricing

Three-tier pricing with a segmented billing toggle: a single pill slides between monthly and yearly while every price crossfades to its new value.

Simple, honest pricing

Pay for polish, not seats. Switch billing any time — yearly saves around 20%.

Spark

For side projects finding their light.

$0/mo
  • All core components
  • Dark & light themes
  • Community gallery access
  • MIT-licensed source
Most loved

Studio

For teams shipping polished product every week.

$24/mo
  • Everything in Spark
  • All landing blocks
  • Figma-ready token kit
  • Priority issue triage
  • Unlimited team seats

Atelier

For studios that want a hand on the lighting rig.

$79/mo
  • Everything in Studio
  • Custom theme engineering
  • Motion audit each quarter
  • Dedicated support channel

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal
npx lumora-ui@latest add pricing

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx
import { Pricing } from "@lumora/ui/blocks/pricing";
// or from the barrel:
import { Pricing } from "@lumora/ui";

Props worth knowing

tiers carry name, description, monthly/yearly prices, features and ctaLabel; mark one highlighted for the lumen glow. defaultPeriod picks the billing toggle's start; onTierSelect receives the tier and period. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.