350+ handcrafted shadcn/ui Blocks
A collection of UI Blocks & AI Agents by Creative Tim on top of shadcn/ui. Integrate them in v0, Lovable, Claude, or your application.
Browse by Collection
Explore our organized collections of UI blocks and components
AI agents
AI agent and autonomous commerce components for React and Next.js. Build AI-powered interfaces, agent payments, HTTP-based stablecoin transactions, and autonomous commerce experiences using the x402 protocol.
Web 3
Complete Web3 and blockchain interface components for React and Next.js. Build decentralized applications with wallet connections, crypto charts, NFT displays, and blockchain authentication flows.
Application Admin UI
Professional admin dashboard and application UI components for React and Next.js. Build complete admin panels with widgets, charts, tables, modals, sidebars, dropdowns, and data management interfaces.
Marketing & Presentation
Eye-catching marketing and presentation components for React and Next.js. Build landing pages, testimonials, hero sections, contact forms, team pages, authentication flows, and newsletter subscriptions.
Content UI
Versatile content and editorial components for React and Next.js. Build blogs, feature sections, FAQ pages, stats displays, error pages, maintenance screens, and rich content presentations.
Ecommerce UI
Complete ecommerce and shopping UI components for React and Next.js. Build online stores with product listings, banners, pricing tables, order tracking, customer overviews, and category displays.
Featured Blocks
Three-column magazine layout using Pretext's layout() to measure precise pixel heights per column and equalize them, something CSS alone cannot do without reflow. Includes masthead bar, ghost background word 'FORM', large drop cap on intro paragraph, full-width blockquote pull quote, three columns with Roman numeral labels, and a typographic footer.
Essay
On Proportion, Rhythm,
and the Weight of Type
By Marcus Veldtman · Photography: Arno Brisse
import MagazineEditorialColumns from "@/components/creative-tim/blocks/magazine-editorial-columns"
export default function Page() {
return <MagazineEditorialColumns />
}
Magazine-style article block using Pretext's layoutNextLine() to route body text line-by-line around a right-floated photograph. Each line's available width narrows while in the image zone and returns to full column width below it, achieving true text-wrap with pixel-perfect canvas-measured typography.
The Architecture
of the Printed Word
Continued on page 24 →
import MagazineTextWrap from "@/components/creative-tim/blocks/magazine-text-wrap"
export default function Page() {
return <MagazineTextWrap />
}
Dark editorial feature spread. Giant 'SCALE' and 'VOICE' words flank the layout at near-zero opacity, a 90°-rotated 'LANGUAGE' word runs vertically on the left margin, and 'FORM' is overlaid on a cropped photo. Both text columns rendered with Pretext's layoutNextLine() + prepareWithSegments() as individually positioned absolute spans for pixel-precise typography. Ghosted 'EDITORIAL' anchors the bottom.
On the typographer's most radical gesture
import MagazineOversizedWords from "@/components/creative-tim/blocks/magazine-oversized-words"
export default function Page() {
return <MagazineOversizedWords />
}
Vogue-inspired editorial spread built around a dominant letter 'B'. The letter is rasterized to an OffscreenCanvas at runtime to extract a polygon hull of its exact typographic silhouette. Pretext's layoutNextLine() flows body text line-by-line to the right of the letter, with each line's left boundary carved by the hull so text hugs the letterform. The upper-right quadrant reserves space for a static editorial title ('bauhaus revival') by adding a second blocker interval during the title zone.
import MagazineBigLetter from "@/components/creative-tim/blocks/magazine-big-letter"
export default function Page() {
return <MagazineBigLetter />
}
Editorial magazine layout with a full-bleed castle photograph anchored to the bottom of the section. Three equal columns flow above the image, each stopping organically where the castle silhouette rises to meet the text.
Essay · Heritage
Stone & Strategy
How the great fortifications of medieval Europe shaped a continent, and why their lessons endure into the present age
import MagazineImageColumns from "@/components/creative-tim/blocks/magazine-image-columns"
export default function Page() {
return <MagazineImageColumns />
}
A comprehensive software purchase approval interface featuring company information, pricing tiers, and detailed cost breakdown with tax calculations.
Software Purchase Request
Review and approve the software purchase details below
Purchase Details
Billing Information
Additional Information
This software is critical for our cloud infrastructure management and will enable the engineering team to scale operations more efficiently. The per-seat pricing model aligns with our team growth projections for Q1 2025.
import SoftwarePurchase01 from "@/components/creative-tim/blocks/software-purchase-01"
export default function Page() {
return <SoftwarePurchase01 />
}
If you are looking for an elegant way to present your products, check out this stunning block example built with shadcn/ui for a consistent and polished layout.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PRONew Collection
Easily preview furniture, decor, and more in your space, ensuring everything fits perfectly and looks just right. It's the ultimate tool for hassle-free home customization and design!
Elegant Suite
New Arrival$449.90
$599.9025% OFFAdd a touch of sophistication to your home with our handcrafted ceramic vase. Each piece is uniquely made, blending seamlessly into both modern and classic decors.
Premium cashmere blend with cable-knit pattern. Features a classic V-neck design, ribbed cuffs and hem for a perfect fit. Made with sustainable materials and ethically sourced fibers. Temperature-regulating properties keep you comfortable in any season.
import DarkProductOverview01 from "@/components/creative-tim/blocks/dark-product-overview-01"
export default function Page() {
return <DarkProductOverview01 />
}
This Tailwind CSS block displays the most popular NFT collections using cards that showcase the collection name, a brief description, a preview image, the number of NFTs in the collection, and a verification badge built with shadcn/ui.
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROTrending Collections
The most sought-after collections across the entire ecosystem.
Dreamy Trees✓
Website visitors today demand a frictionless user experience.
@thedreamytrees
9,999 NFTs
Face NFTs✓
Website visitors today demand a frictionless user experience.
@3dfaces
3,000 NFTs
The Planets Of The Universe✓
Website visitors today demand a frictionless user experience.
@theplanetsoftheuniverse
9,999 NFTs
import Web304 from "@/components/creative-tim/blocks/web3-04"
export default function Page() {
return <Web304 />
}
The example below showcases an account settings section where a user can update their basic information. Each input field has a placeholder or dropdown menu that clearly indicates the information that needs to be entered, built with shadcn/ui for clarity and style.
Personal Information
Manage your personal details and profile information. This information will be visible to other users on the platform.
import AccountBasicInfo01 from "@/components/creative-tim/blocks/account-basic-info-01"
export default function Page() {
return <AccountBasicInfo01 />
}
Edit Apparel Item
Update product information, pricing, and categorization for your fashion inventory.
import Cruds01 from "@/components/creative-tim/blocks/cruds-01"
export default function Page() {
return <Cruds01 />
}
PRO Blocks
This is a PRO block. Upgrade your account to access the source code and install this block via CLI/MCP.
Upgrade to PROLoved by Developers & Designers
Join thousands of professionals who trust our components for their projects
1,679,700+
Active Users
4.9/5
Average Rating
50K+
Companies
The attention to detail and user experience is exceptional. This has transformed how we approach design decisions in our team.
Sarah Johnson
Product Designer
Outstanding component library that saves us countless hours. The quality and customization options are exactly what we needed.
Michael Chen
Tech Lead
A game-changer for rapid prototyping and production builds. The documentation is clear and the components are production-ready.
Emma Rodriguez
Frontend Developer
import Testimonials03 from "@/components/creative-tim/blocks/testimonials-03"
export default function Page() {
return <Testimonials03 />
}