A collection of beautifully crafted, production-ready UI blocks built with shadcn/ui, designed specifically for SaaS and marketing websites.
Layered UI is a modern ecosystem of responsive UI blocks built with shadcn/ui, Tailwind CSS 4, and Next.js 16. It empowers developers to build high-converting landing pages and SaaS products with speed and precision.
All components are:
- Customizable: Built on top of shadcn/ui primitives.
- Accessible: WAI-ARIA compliant and screen-reader friendly.
- Composable: Mix and match blocks to create unique layouts.
- CLI-Ready: Install directly into your project via the shadcn registry.
- shadcn/ui Integration: Native support for the industry-standard UI library.
- Tailwind CSS 4: Leverages the latest styling engine for performance.
- Fully Responsive: Crafted for desktop, tablet, and mobile out of the box.
- Registry Powered: No more copy-pasting; just run a command.
- Modern Stack: Powered by React 19, Next.js 16, and Motion (Framer Motion).
- MCP Support: AI-ready components for your coding assistants.
| Tool | Description |
|---|---|
| Framework | Next.js 16 (App Router) |
| Library | React 19 |
| Styling | Tailwind CSS 4 |
| Components | shadcn/ui |
| Icons | Lucide React |
| Animations | Motion |
For a senior-engineer-level view of the full system, including routing, registry generation, block preview flow, ownership boundaries, and operational risks, see ARCHITECTURE.md.
git clone https://github.com/KingTroy125/Layered-UI.git
cd Layered-UI
npm installnpm run devOpen http://localhost:3000 to explore the blocks.
Install production-ready blocks directly into your own project using the shadcn CLI.
Add the Layered registry to your components.json:
{
"registries": {
"@layeredui": "https://layered-ui.vercel.app/r/{name}.json"
}
}Run the following command to add a block:
npx shadcn add @layeredui/hero-section-1Explore all available blocks on the Official Website.
- Hero Sections: High-impact headers that convert.
- Features: Highlight your product's value proposition.
- Pricing: Conversion-optimized pricing tables.
- Testimonials: Build trust with elegant social proof.
- Forms: Pre-built Login, Sign-up, and Contact sections.
- Navigation: Sophisticated Navbars and Footers.
- And More: Bento Grids, Logo Clouds, Stats, and Team sections.
Layered UI supports the Model Context Protocol (MCP), allowing AI assistants to browse and insert components directly.
npx shadcn mcp init- "Find me a hero from layered registry"
- "Build a landing page with a hero and features section from layered registry"
Distributed under the MIT License. See LICENSE.md for details.
Built by KingTroy125 and contributors on top of the Next.js, React, Tailwind CSS, shadcn/ui, Radix UI, Lucide, Motion, Shiki, and Vercel ecosystems. See ARCHITECTURE.md for architecture-level attribution notes.