Three-tier pricing

Three plan cards with a monthly/yearly switch, a savings badge and a highlighted middle plan.

Library

Velora UI

Framework

React

Type

block

License

MIT

Dependencies

lucide-react

Install

npx shadcn@latest add https://velora.colorlib.com/r/pricing-three-tiers.json

Files

• src/components/blocks/pricing-three-tiers.tsx
• src/components/velora/blur-fade.tsx
• src/components/velora/border-beam.tsx
• src/components/velora/grid-pattern.tsx
• src/components/velora/number-ticker.tsx
• src/lib/utils.ts
• src/components/ui/badge.tsx
• src/components/ui/button.tsx

Source

https://github.com/ColorlibHQ/velora-ui

Categories

• Card Components
• React Card Components
• Tailwind CSS Card Components
• Animated Card Components
• shadcn/ui Card Components
• Commerce Components
• React Commerce Components
• Tailwind CSS Commerce Components
• Animated Commerce Components
• shadcn/ui Commerce Components
• Data Display Components
• React Data Display Components

More from Velora UI

• 3D Card
• 3D Pin
• Animated Testimonials
• Split login page
• Card Stack
• Direction Aware Hover
• Draggable Card
• Evervault Card
• Expandable Card
• Icon feature grid
• Focus Cards
• Glare Card