Pricing Section With Soft Gradient
ProThree plan cards on a blue to peach wash, with a yearly switch and a handwritten save scribble beside the popular middle seat.
When to use Pricing Section With Soft Gradient
Reach for this when pricing should feel like a landing, not a ledger. A periwinkle to peach wash sits behind the header and fades to a quiet floor. Three white cards follow. Sample, Bench, and Atelier are named seats. Yearly lives on a switch, not a pill, and a looped arrow marks the twenty five percent save. Bench is the taller popular card. Atelier is custom, with a contact action. Checks sit in a purple disc.
Skip it when the buyer needs a matrix, nested extras, or a live receipt. A wash behind a comparison table is decoration. The shipped copy is a fictional maker shop called Pollen, so replace the names, the rates, and the feature lines before this goes to production. The surface is fixed light. There is no dark variant, because the periwinkle to peach wash is the whole read.
Block details
- Category
- Pricing Sections
- Renders
- JavaScript animation. Paints first, then animates
- Theme
- Fixed light surface. No dark variant
- Responsive
- Mobile, tablet and desktop breakpoints are already set
- Dependencies
clsxframer-motiontailwind-merge- Source
- 356 lines, 18 KB in one file
- Install
wensity add pricing-section-with-soft-gradient --type block- Stack
- React, Next.js, TypeScript and Tailwind CSS v4
- Licence
- Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
- Tags
- light, pricing, gradient, toggle, saas
- Last updated

