Plan Fit
- from @keyframeui
- by KeyframeUI <https://keyframeui.com>
A pricing grid with a usage slider over it, cut into one stretch per plan. Drag it and every card measures your usage against its allowance: past the limit the overage shows as a hatched stretch and that card's price climbs a pack at a time. The highlight glides to whichever plan is cheapest at that usage, so a smaller plan with overage can keep it until the next one costs less.
Install
New to shadcn? Set up your project
If your project already has a shadcn components.json, skip initialization. Otherwise, run this once from your project root.
pnpm dlx shadcn@latest initpnpm dlx shadcn@latest add @keyframeui/plan-fitLive preview
No live preview has been built for this component yet.
Registry dependencies1
- utils
