Pricing Featured

A focused two-plan pricing block with a highlighted recommended plan.

Simple pricing for focused teams

Choose the plan that fits how you build today.

Free

For trying the essentials.

$0 / month

Core components
One project
Community support

Pro

Recommended

For teams ready to move faster.

$24 / month

Everything in Free
Unlimited projects
Priority support

A focused two-plan pricing block with a highlighted recommended plan.

Installation

text

Add the pricing-featured component from Hangry UI to this project.

Use the project's package manager to run:
shadcn@latest add https://ui.razeev.com/r/pricing-featured.json

Integrate the component with the existing layout and styling.
Keep its interactions and reduced-motion support intact.

How to use

tsx

import { PricingFeatured } from "@/components/hangry-ui/blocks/pricing-featured";

<PricingFeatured />

Props

Prop	Type	Default	Description
`title`	`string`	`Simple pricing for focused teams`	Optional.
`description`	`string`	`Choose the plan that fits how you build today.`	Optional.
`plans`	`{ name: string; description: string; price: string; features: string[]; href: string; label?: string; featured?: boolean; }[]`	`—`	Optional.

Dependencies

lucide-react