Pricing 28 - Cards with limit metersPro
Plan cards that visualise their quotas as horizontal meters for projects, seats and storage, filled relative to the largest plan on scroll.
About Pricing 28
Plan cards that visualise their quotas as horizontal meters for projects, seats and storage, filled relative to the largest plan on scroll.
Pricing 28 is a pro pricing block for React, built on shadcn/ui and Tailwind CSS with motion animations that respect reduced-motion settings. It ships as 95 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.
- meters
- limits
- quotas
- storage
- seats
Installation
- Add the Chocolate UI registry to your
components.json(see the installation guide). - Run the shadcn CLI:
npx shadcn@latest add @chocolate/pricing-28Dependencies installed automatically: motion.
Uses: button, motion-presets, reveal, use-reduced-motion, utils.
Usage
import Pricing28 from "@/components/blocks/pricing-28"
export default function Page() {
return <Pricing28 />
}