Pricing Section With Credit Plan Columns
ProFour plan columns in one bordered shell, with a yearly billing switch, credit menus, and a highlighted Pro action.
When to use Pricing Section With Credit Plan Columns
Use this when the product is a ladder of named seats and credits, not a matrix of checks. Four columns share one rounded frame. Yearly billing sits on a switch next to the heading. Basic and Pro expose a credit menu that reprints the monthly figure. Free and Enterprise keep a static credit line. The Pro action is the only filled accent, and the four buttons sit on one baseline even when the feature lists are different lengths.
Skip it when the visitor needs a row by row comparison, or when price is a live receipt of mixed meters. A column that cannot change credits is just a card. The shipped copy is a fictional writing desk called Kindling, so replace the plans, the token ladders, the add-on lines, and the writer footnote before this goes to production. The section follows light and dark. The switch and the Pro button stay the same blue in both.
Block details
- Category
- Pricing Sections
- Renders
- CSS only. Paints as soon as the stylesheet arrives
- Theme
- Follows the site theme in light and dark
- Responsive
- Mobile, tablet and desktop breakpoints are already set
- Dependencies
clsxtailwind-merge- Source
- 374 lines, 12 KB in one file
- Install
wensity add pricing-section-with-credit-plan-columns --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, dark, pricing, credits, columns, saas
- Last updated

