Pricing Section Blocks based on shadcn/ui
Your pricing page is where people decide to pay you, so it earns the time it takes to get right. These shadcn/ui pricing blocks give you the tiers, the feature lists, the highlighted plan, and the monthly-yearly toggle already laid out, so you can focus on what the plans say instead of how to build the grid.
They are built on shadcn/ui and Tailwind and look right on mobile, where half your traffic actually reads them. Copy the code or install it with one npx shadcn add command, then plug your prices, your features, and your checkout button. The layout holds whether you ship two plans or four.
Pick a pricing layout below that matches your offer, a simple two-tier, a three-column SaaS table, or a full feature comparison, and start from a version that already converts cleanly.
Clean 4-column pricing grid featuring Starter, PRO, Premium, and Enterprise plans with highlighted premium tier. Includes pricing, features list with checkmarks, and CTA buttons.
Pick the best plan for you
You have Free Unlimited Updates and Premium Support on each package.
Starter
Free access for 2 members
- Complete documentation
- Working materials in Sketch
PRO
Free access for 30 members
- Complete documentation
- Working materials in Sketch
- 2GB cloud storage
Premium
Free access for 200 members
- Complete documentation
- Working materials in Sketch
- 20GB cloud storage
- 100 team members
Enterprise
Free access for all members
- Complete documentation
- Working materials in Sketch
- 100GB cloud storage
- 500 team members
- Premium support
import SimplePricingBlock from "@/components/creative-tim/blocks/simple-pricing-block"
export default function SimplePricingBlockPage() {
return <SimplePricingBlock />
}
3-column pricing layout with monthly/annual toggle tabs. Features Freelance, Startup, and Company plans with dynamic pricing and feature cards. Perfect for subscription-based services.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROChoose a plan for your next project
You have Free Unlimited Updates and Premium Support on each package. You also have 20 days to request a refund.
Freelance
$59
per month
- 3 Projects
- 1 Team Member
- Basic Support
- 50 Messages
Startup
$99
per month
- 10 Projects
- 1 Team Member
- Basic Support
- 100 Messages
Company
$129
per month
- 50 Projects
- 10 Team Members
- Premium Support
- 500 Messages
import PricingWithSwitcher from "@/components/creative-tim/blocks/pricing-with-switcher"
export default function PricingWithSwitcherPage() {
return <PricingWithSwitcher />
}
Three-tier web studio engagement pricing — Brand Sprint, Flagship Site, Ongoing Partnership — with 'from $45k' style ranges, durations, deliverable lists, and an inverted featured tier. Joined by a single hairline grid gap for a premium agency feel.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROWays to work together.
Every project is scoped and quoted individually — the ranges below are where most engagements land. No retainers you can't leave, no surprises on the invoice.
Brand Sprint
3–4 weeksfrom $45k
A focused engagement to sharpen positioning and ship an identity refresh or a single flagship page.
- Positioning & messaging thesis
- Visual identity direction
- One flagship page, designed & built
- Two-week support window
Flagship Site
8–12 weeksfrom $120k
Our signature engagement — a full digital flagship from strategy through engineering and launch.
- Discovery & strategy sprint
- Full identity & design system
- 8–14 pages, custom-built
- Motion & interaction design
- CMS integration & team handoff
- Four-week post-launch support
Ongoing Partnership
Rolling · 6-mo min.from $18k / mo
A dedicated senior team on retainer for brands that treat design as a continuous advantage.
- Dedicated design + engineering pod
- Quarterly roadmap & priorities
- Unlimited briefs, one at a time
- Performance & growth reporting
export { default } from "../pricing-agency-engagements"
Three-tier agency pricing with a Fixed project / Retainer toggle that swaps every price. Landing, Flagship, and Studio tiers with inverted featured card, hairline grid, and a discovery-sprint disclaimer. The high-end studio version of a pricing-with-switcher block.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROPriced for the outcome, not the hours.
Landing
$28k
One high-craft page
- Single flagship landing page
- Copy direction & art direction
- Responsive build & QA
- Analytics & launch support
Flagship
Most booked$95k
Full site, end to end
- Strategy & positioning sprint
- Identity & design system
- Up to 12 custom pages
- Motion & interaction design
- CMS build & team training
- Post-launch support window
Studio
Custom
Embedded senior team
- Dedicated design + eng pod
- Multi-brand / product scope
- Quarterly strategy reviews
- Priority turnaround
- Direct line to studio leads
All engagements begin with a paid discovery sprint. Final scope and pricing are confirmed in a written proposal before any work begins.
export { default } from "../pricing-agency-retainer"
Comprehensive pricing comparison table with Team, Growth, and Enterprise plans. Features side-by-side feature comparison with checkmarks, minus icons, and 'Upon Request' indicators.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROPick the best plan for you
You have Free Unlimited Updates and Premium Support on each package.
| Space Individual | Team $39 | Growth $79 | Enterprise $99 |
|---|---|---|---|
Community Support | |||
100+ Example Pages | |||
50+ Section Examples | |||
Multiple use | Upon Request | Upon Request | |
Developer Tools | |||
Custom messages | |||
Multiple requests | |||
import PricingComparisonTable from "@/components/creative-tim/blocks/pricing-comparison-table"
export default function PricingComparisonTablePage() {
return <PricingComparisonTable />
}
2-column layout with freelancer/startup toggle. Features Standard/Gold and Premium/Platinum plans with highlighted premium tier. Ideal for businesses targeting different customer segments.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROChoose a plan for your next project
You have Free Unlimited Updates and Premium Support on each package. You also have 20 days to request a refund.
Standard
$25
per month
- 20GB File Storage
- 15 Users
- Standard Support
Premium
$59
per month
- 50GB File Storage
- 100 Users
- Premium Support
import PricingBlockWithSwitcher from "@/components/creative-tim/blocks/pricing-block-with-switcher"
export default function PricingBlockWithSwitcherPage() {
return <PricingBlockWithSwitcher />
}
Eye-catching pricing section with dark primary background header and elevated pricing cards. Features 3 plans with staggered card positioning for visual hierarchy.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROSee Our Pricing
You have Free Unlimited Updates and Premium Support on each package
Starter
Complete Documentation
Working materials in Sketch
500MB cloud storage
Life support
PRO
Complete documentation
Working materials in Sketch
100GB cloud storage
500 team members
Premium support
Premium
Complete documentation
Working materials in Sketch
2GB cloud storage
Premium support
import DarkBakgroundPricing from "@/components/creative-tim/blocks/dark-bakground-pricing"
export default function DarkBakgroundPricingPage() {
return <DarkBakgroundPricing />
}
Premium pricing section with gradient background header and elevated cards. Includes monthly/annual toggle and badge labels for each plan tier.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROPricing
See Our Pricing
Creative Tim UI has got you covered. With our awesome plans it has never been easier to design beautiful interfaces.
2 team members
20GB Cloud storage
Integration help
Sketch Files
API Access
Complete documentation
10 team members
40GB Cloud storage
Integration help
Sketch Files
API Access
Complete documentation
Unlimited team members
100GB Cloud storage
Integration help
Sketch Files
API Access
Complete documentation
import GradientBackgroundPricing from "@/components/creative-tim/blocks/gradient-background-pricing"
export default function GradientBackgroundPricingPage() {
return <GradientBackgroundPricing />
}
Side-by-side pricing comparison with Starter and Company plans. Features highlighted premium plan with dark background and 'Popular' badge.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROChoose a plan for your next project
You have Free Unlimited Updates and Premium Support on each package. You also have 20 days to request a refund.
Starter
Free access for 2 members
Complete documentation
Working materials in Sketch
Integration help
40GB Cloud storage
Company
Free access for 10 members
Complete documentation
Working materials in Sketch
Integration help
40GB Cloud storage
import HighlightedPricing from "@/components/creative-tim/blocks/highlighted-pricing"
export default function HighlightedPricingPage() {
return <HighlightedPricing />
}
Horizontal pricing cards with side-by-side pricing and features. Includes enterprise 'Contact Us' card with detailed description. Perfect for businesses offering custom enterprise solutions.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROPricing Plans
Choose Your Perfect Plan
Compare the benefits and features of each plan below to find the ideal match for your business's budget and ambitions.
Starter
Free access for 2 members
Complete documentation
Working materials in Sketch
Integration help
40GB Cloud storage
Premium
Free access for 2 members
Complete documentation
Working materials in Sketch
Integration help
100GB Cloud storage
Company
Access for 10+ members.
Dedicated account management
Custom integrations, and strategic consultations to ensure your growth trajectory remains on the steepest curve.
You have Free Unlimited Updates and Premium Support on each package. You also have 30 days to request a refund.
import HorizontalPricing from "@/components/creative-tim/blocks/horizontal-pricing"
export default function HorizontalPricingPage() {
return <HorizontalPricing />
}
Clean single-plan pricing layout for lifetime membership. Features included benefits grid and one-time payment option. Ideal for SaaS products with lifetime access.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROBest no-tricks pricing
If you are not satisfied, contact us within the first 30 days and we will send you a full refund.
Lifetime Membership
You have Free Unlimited Updates and Premium Support on each package. You also have 30 days to request a refund.
What is included
Private code access
Pro member accounts
Free entry to all repositories
Support team full assist
Pay once, own it forever
$399
Get a free sample (20MB)
import OnePlanPricing from "@/components/creative-tim/blocks/one-plan-pricing"
export default function OnePlanPricingPage() {
return <OnePlanPricing />
}
3-column pricing grid with Starter, Premium, and Company plans. Features detailed comparison using check and minus circle icons to show included/excluded features.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROPricing Plans
Invest in a plan that's as ambitious as your corporate goals.
Compare the benefits and features of each plan below to find the ideal match for your business's budget and ambitions.
Starter
Free access for 2 members
Complete documentation
Working materials in Sketch
Integration help
40GB Cloud storage
Support team full assist
Premium
Free access for 30 members
Complete documentation
Working materials in Sketch
Integration help
40GB Cloud storage
Support team full assist
Company
Free access for 200 members
Complete documentation
Working materials in Sketch
Integration help
40GB Cloud storage
Support team full assist
You have Free Unlimited Updates and Premium Support on each package. You also have 30 days to request a refund.
import PricingBlockExample from "@/components/creative-tim/blocks/pricing-block-example"
export default function PricingBlockExamplePage() {
return <PricingBlockExample />
}
Dramatic pricing section with full-width background image header and overlaid dark gradient. Features elevated pricing cards with staggered positioning.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROSee Our Pricing
You have Free Unlimited Updates and Premium Support on each package
Complete Documentation
Working materials in Sketch
500MB cloud storage
Premium support
500 team members
Complete documentation
Working materials in Sketch
100GB cloud storage
Premium support
500 team members
Complete documentation
Working materials in Sketch
2GB cloud storage
Premium support
500 team members
import PricingBlockWithImage from "@/components/creative-tim/blocks/pricing-block-with-image"
export default function PricingBlockWithImagePage() {
return <PricingBlockWithImage />
}
Clean 2-column pricing with Standard and Premium plans. Features highlighted premium plan with dark background and 'Request a demo' CTA buttons.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROChoose a plan for your next project
You have Free Unlimited Updates and Premium Support on each package. You also have 20 days to request a refund.
Standard
- 20GB File Storage
- 15 Users
- Standard Support
Premium
- 50GB File Storage
- 100 Users
- Premium Support
import RequestCtaPricing from "@/components/creative-tim/blocks/request-cta-pricing"
export default function RequestCtaPricingPage() {
return <RequestCtaPricing />
}
Frequently asked questions
Are these pricing blocks free to use?
Yes, the free ones are copy-paste with no account and fine for commercial projects. A few advanced comparison tables are PRO and marked on the block.
Do they include a monthly/yearly toggle?
Several do. The toggle is in the component code, so you control the two price sets and the switch behaviour, and you can remove it if you only bill one way.
Can I connect my own checkout?
Yes. The call-to-action is a normal button, so you point it at Stripe, Paddle, Lemon Squeezy, or your own flow. The block handles the layout, you handle the payment link.
How do I change the plans and features?
Edit the component once it is in your project. Add or remove tiers, rewrite the feature rows, change which plan is highlighted, and restyle with Tailwind classes.
Do they work with Next.js?
Yes, they are React components built for Next.js and Tailwind, and they work in any React setup with shadcn/ui installed.