Build Sites from Shadcn UI Blocks
Combine ready-made blocks into multi-page sites, edit the content right on the canvas and preview every breakpoint. When it looks right, export clean Next.js code or add it to your project with the shadcn CLI.
323+ Blocks in One Library
Search Marketing, Ecommerce and Dashboard UI blocks from a single panel. Click a block to add it to the page, or drag it exactly where you want it. Reorder, duplicate and remove blocks as your page takes shape.
Start from proven sections, not a blank page.
Edit Content Right on the Canvas
Click any text to rewrite it, swap images, change button styles and link targets, or remove the parts of a block you don't need. Every change shows up instantly, and undo and redo keep you safe along the way.
No props, no config files. Just click and type.
Multi-Page Sites with a Shared Layout
Add as many pages as your site needs and pick which one is the home page. Place the header and footer once in the shared layout and they appear on every page, exactly like a real Next.js layout.
Build a whole site, not a single landing page.
Preview Desktop, Tablet and Mobile
Switch the canvas between desktop, tablet and mobile widths. Blocks render with real breakpoints, so what you see on each device is what your visitors will get. Open the live preview to click through every page.
Catch layout issues before they reach your code.
Export a Next.js App or Use the shadcn CLI
Download a ready to run Next.js project as a .zip, or run a single shadcn CLI command to add the pages to the project you already have. Your edits are written into the source, only the blocks you used are included, and every block lands in a readable file.
Clean code you own, with nothing extra to strip out.
From blocks to a working site in three steps
A simple flow to go from ready-made sections to code you own.
Pick your blocks
Browse the library and add the sections you need to each page of your site.
Edit and arrange
Rewrite the content on the canvas, reorder blocks and check every breakpoint.
Export to code
Download a Next.js project or add the pages to your app with one CLI command.
Building and previewing are free. Exporting is included in the Pro, Team and Enterprise plans.
Get Lifetime Access Now
Unlock lifetime access today and become part of the growing shadcn ecosystem, empowering you to build your projects faster and more efficiently. Keep this continuously updated and ever-expanding collection at your fingertips, and stay ahead with the latest components, templates, and improvements.
Get All Access