Charcoal UI

Pricing Enterprise

Self-serve plan beside an enterprise card with the sales form built in, so big buyers never leave.

  • Type: Pricing section
  • Styles: Enterprise, Dark
  • Licence: Charcoal UI Pro

About Pricing Enterprise

Pricing Enterprise shows a simple self-serve plan next to an enterprise card that has the sales form built in. Big buyers can ask for a call without leaving the page, and the form turns into a clear confirmation.

It is a full-width pricing section for React and Tailwind CSS 4, in a enterprise and dark style. Preview it at any width above, then install it with one command.

When to use Pricing Enterprise

  • B2B SaaS with a sales-led tier.
  • Security and compliance platforms.
  • Healthcare and regulated software.
  • Agencies with retainers.

How it is built

The form uses Input and Select with real labels and validation, and both plans' names, prices and features are props.

It is composed from Button, Input, Select, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Pricing Enterprise

Pricing Enterprise is part of 2 full templates, so you can see it in a finished page.

  • Sable template: Enterprise security without the theatre.
  • Rota template: Shift planning, built by nurses.
  • Pricing Tiers: A React pricing section with three plans, a billing toggle and rolling prices
  • Pricing Single: A free React pricing section for one honest plan with a guarantee
  • Pricing Comparison: A React pricing comparison table with a sticky plan header
  • Pricing Usage: A usage-based React pricing calculator with a slider and rolling estimate
  • Button: An animated React button with six variants, spring press feedback and a width-stable loading state
  • Input: An animated React text input with icons, a shake-once error and a success check that draws in
  • Select: An animated React select with staggered options, full keyboard support and type-ahead

Install Pricing Enterprise

npx shadcn@latest add @charcoal/pricing-enterprise

Pricing Enterprise is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Pricing Enterprise work with Next.js?
Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?
Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

  • Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
  • Input: Text field with a visible label, optional icons, an error that shakes once, and a success check that draws in.
  • Select: Listbox select that unfolds from its trigger with staggered options, full keyboard support and type-ahead.

Pricing Enterprise as Markdown