Grid Pricing

Three-tier pricing section with monthly and annual billing, a highlighted plan, and a metric strip.

Add to your project

Checking access...

Works with your AI tools

ClaudeClaude*
CodexCodex*
LovableLovable
Base44Base44
Figma MakeFigma Make
ReplitReplit*
CursorCursor*
v0v0

* Compatible with most projects that use the default React/Next.js framework.

Built With

ReactTailwind CSSSolar Icons

Props

PropTypeDescription
eyebrowstringSmall label above the heading.
titlestringSection heading.
descriptionstringSupporting section copy.
plansPricingPlan[]Plan copy, monthly and annual prices, features, actions, and highlight state.
metricsPricingMetric[]Values and labels shown below the plans.
annualDiscountLabelstringSavings label shown on the highlighted annual plan.
classNamestringStyles for the outer section.