Block

Pricing Wall

A billing switch, a row of plan cards where the featured one costs no extra height, and the questions that always follow a price.

Pricing Card
Tabs
Accordion

Priced per seat, cheaper the more you add

Pick a billing period. Everything in Pro is included either way. The block takes as many plans as you give it, two reads best.

MonthlyYearly2 months free

Solo

per month

One seat, every Pro component.

All Pro components
All Blocks
Email support

Start solo

Team

Best value

per seat / month

Seat discounts start at two.

Everything in Solo
The Console template
Seat discounts
Priority support

Start a team

Blocks you already installed keep working. You stop receiving new ones until you renew.

Yes. Every plan covers client and commercial projects. None of them cover reselling the source itself.

Yes. Pick the number of seats at checkout and the per-seat price moves to the matching tier.

page.tsx

import { PricingWall } from "@/components/blocks/pricing-wall";

export default function Page() {
  return (
    <PricingWall
      title="Priced per seat, cheaper the more you add"
      plans={[
        {
          name: "Team",
          price: { monthly: "$29", yearly: "$249" },
          period: { monthly: "per seat / month", yearly: "per seat / year" },
          features: ["Everything in Solo", "The Console template"],
          featured: true,
          actionLabel: "Start a team",
          actionHref: "/checkout",
        },
      ]}
      faq={[{ q: "What happens if I stop paying?", a: "Blocks you installed keep working." }]}
    />
  );
}

"use client";

import { useId, useState } from "react";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/accordion";
import { PricingCard } from "@/components/registry/pricing-card";
import { cn } from "@/lib/utils";

export interface PricingWallPlan {
  name: string;
  /** Already formatted, one entry per billing period, keyed to match `periods`. */
  price: Record<string, string>;
  /** What the price is per, one entry per billing period. */

134 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/pricing-wall

Props

PricingWall

titleRequiredstring

The section heading.

descriptionstring

One line under the heading.

periods{ id: string; label: string; note?: string }[]Default monthly and yearly

The billing switch. The first one starts selected, and ids have to match the keys on each plan.

plansRequiredPricingWallPlan[]

As many as you give it. Two or three read best in one row.

faq{ q: string; a: string }[]

Questions under the cards. Each one eases open and shut with a grid template rather than a height, so no frame does layout work.

classNamestring

Merged last, so anything passed here wins over the component's own classes.

PricingWallPlan

nameRequiredstring

The plan's name.

priceRequiredRecord<string, string>

One already formatted price per billing period, keyed by period id.

periodRequiredRecord<string, string>

What the price is per, keyed the same way.

descriptionstring

One line under the price.

featuresRequiredstring[]

One check mark each.

badgestring

Short pill in the header.

featuredbooleanDefault false

Rings the card in the accent and fills its button.

actionLabelRequiredstring

Text on the button.

actionHrefRequiredstring

Where the button goes.