starck
componentpricing-blocksource: ok · hit
Pricing Block
A responsive multi-plan block built from the single pricing card.
npx shadcn add "https://ui.starck.studio/r/pricing-block.json"free
Where it goes
pricing
Use cases
saas-landing
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightRegistry dependencies
https://ui.starck.studio/r/single-pricing-card.json
Files1 · source cached 10/15/2026, 7:55:44 AM
registry/default/pricing-block.tsx
import { SinglePricingCard, type PricingPlan } from "./single-pricing-card"
type PricingBlockProps = {
plans: readonly PricingPlan[]
className?: string
}
function PricingBlock({ plans, className = "" }: PricingBlockProps) {
return (
<div
className={`grid items-stretch gap-4 ${plans.length > 1 ? "md:grid-cols-2" : "max-w-md"} ${plans.length > 2 ? "lg:grid-cols-3" : ""} ${className}`}
>
{plans.map((plan) => (
<SinglePricingCard key={plan.name} {...plan} />
))}
</div>
)
}
export { PricingBlock }
export type { PricingBlockProps }