Is 3D Gem Pricing Section free to use?

3D Gem Pricing Section is a Premium AI Canvas block. Premium unlocks the full source code, the full remix prompt, and one-command installs for every Premium component, block, and template.

How do I install 3D Gem Pricing Section?

Premium unlocks one-command installs: run the shadcn CLI with your AI Canvas token, or connect the AI Canvas MCP server and ask your AI editor to install it for you. Premium also unlocks the full remix prompt in the Remix panel.

What is 3D Gem Pricing Section built with?

3D Gem Pricing Section is built with React and TypeScript, using Three.js, Canvas, and Tailwind CSS. It ships with both light and dark styling.

Where would I use 3D Gem Pricing Section?

Common uses include SaaS pricing page, Subscription plans, and Plan comparison. Like every AI Canvas block, it is self-contained and drops into any React project.

Can I remix 3D Gem Pricing Section with AI?

Yes. Open "Remix with AI" on this page to read the setup and the constants 3D Gem Pricing Section is built from. The engine, the markup and the notes on how it works are part of Premium. For the exact block, install it with the one-command CLI.

3D Gem Pricing SectionThree pricing cards, each topped by a still faceted gem that grows and spins on hover.

PremiumBlocksSaaS pricing pageSubscription plansPlan comparison

Add to your projectPremium block

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

For dark mode, add the dark class to your <html> element:

Optional

<html class="dark">

Install with AI Canvas MCP

With AI Canvas MCP, your AI knows every component we ship. Ask for one inside Claude Code, Codex, or Cursor and it installs the component you pick. Works with any AI Canvas account, free or premium.

Get MCP

Props

Every prop this component accepts. Any other prop is forwarded to the underlying element.

PricingTier

Prop	Type	Default	Description
namereq	`string`	-	Plan name shown as the card heading.
proreq	`boolean`	-	Whether this is the highlighted/hero plan.
monthlyreq	`string`	-	Price shown when billed monthly (e.g. "$19").
yearlyreq	`string`	-	Price shown when billed yearly (e.g. "$15").
suffixreq	`string`	-	Text after the price (e.g. "/month"); empty for a custom-quote plan.
ctareq	`string`	-	Call-to-action button label.
introreq	`string`	-	Line introducing the checklist (e.g. "What's included:").
featuresreq	`string[]`	-	Checklist rows shown under the CTA.
seatsreq	`string`	-	Footer band left stat (e.g. "5 Team Seats").
storagereq	`string`	-	Footer band right stat (e.g. "10 GB").

GemPricingSection

Prop	Type	Default	Description
tiers	`PricingTier[]`	DEFAULT_TIERS	The three plans shown left to right. Exactly one should have `pro: true`; the gem accessory and shape order pair by position (1st/2nd/3rd), so custom tiers keep the same three-plan shape.
onSelectPlan	`(tierName: string) => void`	-	Called with the plan name when a CTA button is clicked.
className	`string`	-	Extra classes merged onto the outermost root element.

About 3D Gem Pricing Section

3D Gem Pricing Section is a three-tier plan table where every card carries its own crystal. At rest the gem reads as a flat constellation of dots and lines in the card's top corner, and on hover, focus, or a tap it swells into a faceted solid that tilts, turns slowly, and casts a soft contact shadow. A pyramid, a cube, and an octahedron separate the tiers. One shared Three.js layer sits over the section and tracks the cards as they reflow, so the markup underneath stays plain: a monthly-to-yearly billing switch with an animated price swap, a feature checklist, and a seats-and-storage footer. The palette is a warm orange that holds up in both light and dark. It suits a SaaS pricing page, a subscription upgrade screen, or a plan comparison.

Built with

Three.jsCanvasTailwind CSS

Frequently asked questions

Is 3D Gem Pricing Section free to use?: 3D Gem Pricing Section is a Premium AI Canvas block. Premium unlocks the full source code, the full remix prompt, and one-command installs for every Premium component, block, and template.
How do I install 3D Gem Pricing Section?: Premium unlocks one-command installs: run the shadcn CLI with your AI Canvas token, or connect the AI Canvas MCP server and ask your AI editor to install it for you. Premium also unlocks the full remix prompt in the Remix panel.
What is 3D Gem Pricing Section built with?: 3D Gem Pricing Section is built with React and TypeScript, using Three.js, Canvas, and Tailwind CSS. It ships with both light and dark styling.
Where would I use 3D Gem Pricing Section?: Common uses include SaaS pricing page, Subscription plans, and Plan comparison. Like every AI Canvas block, it is self-contained and drops into any React project.
Can I remix 3D Gem Pricing Section with AI?: Yes. Open "Remix with AI" on this page to read the setup and the constants 3D Gem Pricing Section is built from. The engine, the markup and the notes on how it works are part of Premium. For the exact block, install it with the one-command CLI.