Discover your front-end universe with UI Layouts 🔥

github

projects

youtube

Naymur Rahman  • Peerlist

Blocks | UI-Layouts offers a comprehensive suite of creatively crafted blocks built with Tailwind CSS and shadcn/ui, designed for seamless integration into real-world React and Next.js projects. These blocks are clean, responsive, and easy to customize, making them ideal for startups, agencies, and indie makers who prioritize speed and design quality. <ul><li>Production-ready blocks: Beautifully designed sections that you can copy and paste straight into your apps.</li><li>Versatile sections: Includes Hero, Feature, About, Team, Stats, Testimonial, Experience, Pricing, FAQ, and Footer sections.</li><li>Premium components: Save hours with ready-to-use premium components designed for serious products.</li></ul> Whether you're building a landing page or a complex web application, these blocks provide a solid foundation for your frontend universe.

Blocks | UI-Layouts

Testimonials Blocks | UI Layouts Pro offers a comprehensive suite of professional testimonial components designed to enhance your website's credibility and boost conversions. Featuring customer reviews, client feedback, and social proof displays, these components are crafted to build trust and showcase your brand's reliability. Key features include:<ul><li>Variety of Layouts: Choose from grid, carousel, and minimal layouts to suit your design needs.</li><li>Responsive Design: All components are fully responsive, ensuring a seamless experience across devices.</li><li>Modern Aesthetics: Utilize clean and modern design elements to enhance visual appeal.</li><li>Easy Integration: Built with React, Tailwind, and TypeScript for smooth integration into existing projects.</li><li>Interactive Elements: Incorporate motion and animation for engaging user experiences.</li></ul>Whether you're looking to highlight customer stories or showcase client testimonials, UI Layouts Pro provides the tools you need to effectively communicate your brand's value and trustworthiness.

Testimonials Blocks

Pricing Blocks | UI Layouts Pro offers professional pricing table components that are perfect for SaaS, products, and service businesses. These components feature subscription plans, pricing tiers, feature comparisons, and conversion-optimized layouts designed to showcase value and drive purchases. Key features include:<ul><li>Multiple pricing layouts such as grid pricing, card pricing, and minimal pricing.</li><li>Interactive elements like toggle switches for monthly/yearly pricing and tooltips for feature explanations.</li><li>Responsive design using Tailwind and TypeScript for seamless integration.</li><li>Support for dark mode and theme switching for modern aesthetics.</li><li>Easy installation with npm packages for quick setup.</li></ul>Enhance your product's pricing presentation with these versatile and customizable components.

Pricing Blocks

UI-Layouts MCP is a Model Context Protocol (MCP) server that enables AI assistants to search, understand, and retrieve UI components directly from <a target="_blank" rel="noopener noreferrer" class="break-all link-break text-gray-500 hover:underline" href="http://ui-layouts.com">ui-layouts.com</a>.It’s designed for use inside AI-powered development environments like Cursor, Claude Desktop, and other MCP-compatible AI platforms, allowing AI to work with real, production-ready UI components instead of guessing or hallucinating code.<h3>How it’s used in AI IDEs &amp; assistants</h3>When connected to Cursor, Claude, or any MCP client, UI-Layouts MCP lets the AI:<ul><li>Search UI components by name, category, tags, or keywords</li><li>Read full component documentation to understand usage, variants, and structure</li><li>Extract metadata to understand a component’s intent and context</li><li>Fetch actual React/TypeScript source code directly from the UI-Layouts registry</li></ul>This allows AI assistants to:<ul><li>Recommend the right component for a use case</li><li>Explain how a component works before writing code</li><li>Insert or adapt real component implementations into your project</li><li>Reduce trial-and-error when building landing pages or product UIs</li></ul><h3>Key Features</h3><ul><li>Component Search – Find components using intelligent matching (name, group, tags, href)</li><li>Documentation Retrieval – Access raw HTML, plain text, or main content snippets</li><li>Metadata Extraction – Retrieve structured metadata for better understanding and previews</li><li>Source Code Access – Pull real React/TypeScript component code for implementation</li></ul><h3>Why it matters</h3>Instead of generating generic UI code, AI assistants can now explore, reason about, and reuse real UI components—making AI-driven development faster, more accurate, and more production-ready.

@ui-layouts/mcp

Hero Blocks | UI Layouts Pro offers premium hero section components that are perfect for creating stunning landing pages, websites, and marketing campaigns. These components feature compelling headlines, persuasive copy, call-to-action buttons, background videos, and stunning visuals designed to capture attention and drive conversions. Key features include a variety of hero section layouts such as Agency Hero, UI-Layouts Hero, and Neutral Hero, each tailored to different business needs. <ul><li>Compelling headlines and persuasive copy</li><li>Call-to-action buttons</li><li>Background videos and stunning visuals</li><li>Designed for high conversion rates</li><li>Perfect for landing pages and marketing campaigns</li></ul> Built with modern technologies like React, Next.js, and Tailwind, these components ensure a seamless and responsive user experience. Whether you are building a corporate website or a product landing page, Hero Blocks provides the essential tools to enhance your web presence.

Hero Blocks

Explore a comprehensive collection of over 55 beautifully crafted footer components designed to enhance your web projects. These components feature modern layouts, social links, newsletter forms, and multi-column designs, all built with React, TypeScript, and Tailwind CSS. Each footer block is fully responsive, ensuring seamless integration across various devices and screen sizes. Key features include multi-column navigation, newsletter signups, social media integration, and legal links. Whether you're looking to add a touch of elegance or functionality to your website, these footer components provide the perfect solution. <ul><li>Multi-column navigation</li><li>Newsletter signups</li><li>Social media integration</li><li>Legal links</li><li>Responsive layouts</li></ul> Enhance your design projects with these professional footer components, tailored to meet the needs of modern web development.

Footer Blocks

Template Builder is an innovative tool designed to streamline the creation of landing pages through a user-friendly drag-and-drop interface. This powerful builder allows users to mix, match, reorder, and preview components effortlessly, providing a seamless experience for developers and designers alike. With the ability to export clean, production-ready React and Next.js code, it ensures that your projects are not only visually appealing but also technically robust.<h3>Key Features</h3><ul><li>Drag-and-Drop Interface: Easily build and customize layouts with intuitive controls.</li><li>Instant Code Export: Generate React or Next.js code instantly for seamless integration into your projects.</li><li>Component Library: Access a wide range of pre-designed components to enhance your designs.</li><li>Responsive Design: Ensure your layouts look great on all devices with built-in responsive features.</li><li>Theme Customization: Toggle between light and dark themes to suit your preferences.</li></ul>Whether you're a seasoned developer or a design enthusiast, Template Builder offers the tools you need to create stunning web pages quickly and efficiently.

Template Builder

NextCodez is a modern agency template designed to elevate your web presence with its comprehensive features and sleek design. This template includes essential sections like Hero, About, Services, and Projects, ensuring a fully responsive and conversion-optimized experience. NextCodez is powered by a robust tech stack, including TailwindCSS v4, React 19, and Next.js 16, providing long-term stability and top-tier performance.The template features a complete MDX-powered blog system, allowing for static generation of blogs for instant page loads. Each page is SEO optimized with full metadata, OG tags, and structured titles to enhance search visibility. The integration of GSAP and Motion Animations offers smooth transitions and a premium interactive feel.With built-in Discord integration, you can receive real-time notifications for contact and newsletter form submissions. The template is easy to deploy and customize, thanks to its simple file structure and flexible components. Future updates will bring continuous improvements and new features.<ul><li>Time-Saving Templates: Launch projects faster with pre-built templates.</li><li>Customizable Designs: Easily adjust templates to match your brand.</li><li>Clean, Efficient Code: Built with best practices for modern web standards.</li></ul>

NextCodez Template

Discover verified developer contacts directly from GitHub with Repos Lead, the ultimate tool for founders, recruiters, and marketers seeking high-intent developer leads. Turn any GitHub profile into a lead by accessing real emails, companies, and open-source activity insights. Save hours of manual work as Repos Lead scrapes, filters, and delivers real emails from your GitHub stars, allowing you to focus on connecting, not collecting.<h3>Key Features</h3><ul><li>Smart Filtering: Quickly filter developers by repo, email availability, location, and more.</li><li>Fast &amp; Scalable Pagination: Browse through thousands of stargazers or developer profiles without slowing down.</li><li>Seamless GitHub Sync: Connect your GitHub account in seconds and access your repo stargazers instantly.</li><li>Developer Email Finder: Discover public emails from GitHub profiles for collaborations, partnerships, or community building.</li><li>Stargazer Insights: Understand your community with trends, growth stats, and stargazer origins.</li><li>One-Click Export: Easily export your filtered stargazer data to CSV for outreach, analysis, or integration with your workflow.</li></ul>Join thousands of developers who are already using Repos Lead to build stronger connections with their GitHub community. Explore flexible pricing plans to find the best fit for your budget and start building meaningful connections today.

Reposlead - v1.1

Discover verified developer contacts directly from GitHub — including emails, companies, and open-source activity insights. Perfect for founders, recruiters, and marketers seeking high-intent developer leads. Repos Lead is designed to save hours of manual work by scraping, filtering, and delivering real emails from your GitHub stars, allowing you to focus on connecting, not collecting.<h3>Key Features</h3><ul><li>Smart Filtering: Quickly filter developers by repo, email availability, location, and more.</li><li>Fast &amp; Scalable Pagination: Browse through thousands of stargazers or developer profiles without slowing down.</li><li>Seamless GitHub Sync: Connect your GitHub account in seconds and access your repo stargazers instantly.</li><li>Developer Email Finder: Discover public emails from GitHub profiles for collaborations or partnerships.</li><li>Stargazer Insights: Understand your community with trends, growth stats, and origin data of your stargazers.</li><li>One-Click Export: Easily export your filtered stargazer data to CSV for outreach or analysis.</li></ul>Repos Lead offers flexible pricing plans to suit your needs, from a free starter plan to a lifetime access option. Join thousands of developers using Repos Lead to build stronger connections with their GitHub community.

Repos Lead

Crafting Memorable Experiences with Code and CreativityI'm Naymur, a creative full-stack developer who loves design. I strive to create websites that provide users with a better experience while scrolling.<h3>Key Features:</h3><ul><li>Creative web development with a focus on user experience</li><li>Utilizes modern technologies like React, Next.js, and Node.js</li><li>Offers design-centric solutions for web projects</li><li>Available for collaboration on innovative projects</li></ul>Explore my selected projects and let's bring your ideas to life. Reach out to discuss potential collaborations and see how we can create something amazing together.

Naymur Rahman

Unlock access to over 100 beautifully crafted sections and templates built with Tailwind CSS and React. 🚀 Latest UpdateIn this launch, I’ve added a couple of new blocks and fixed several issues, including subscription, template retrieval, and purchase problems.I’ve also introduced a Rewards Page 🎉, a new system where you can unlock specific premium blocks by posting about UI Layouts, UI Layouts Free Blocks, or sharing how others can get Pro Blocks for free.There are three reward categories, and when you unlock one, you’ll get a couple of premium blocks completely free!<h3>🧩 What’s Inside</h3><ol><li>Hero Section: 18 Blocks</li><li>Experience Section: 8 Blocks</li><li>Testimonials Section: 15 Blocks</li><li>About Section: 9 Blocks</li><li>Feature Section: 7 Blocks</li><li>Pricing Section: 18 Blocks</li><li>Newsletter Section: 7 Blocks</li><li>Carousel/Slider Section: 4 Blocks</li><li>FAQs Section: 12 Blocks</li><li>Others Section: 3 Blocks</li></ol>Supercharge your projects with ready-to-use, customizable sections that adapt perfectly to your needs. Subscribe to our newsletter to get the latest updates, tips, and exclusive offers from UI Layouts Pro.

Freemium Blocks

UI Layouts is a comprehensive toolkit designed to accelerate your frontend development process. With over 30+ production-ready blocks and 100+ components, this open-source library offers beautifully designed elements that you can easily copy and paste into your applications. <h3>🚀 Latest Update</h3>In this version, I’ve updated the entire UI and added a CLI. The best part is that I tested all the components in a real production environment and fixed every issue I found.What I realized is that most open-source UI libraries tend to break when used in production. So, I made sure to test and improve everything.<h3>🔑 Key Features</h3><ul><li>Ready-to-use Blocks: Over 30 free blocks that are pre-built and easy to integrate.</li><li>Customizable Components: 60+ components you can tailor to your specific needs.</li><li>Modern Interface Design: Utilize effects, design tools, and ready-to-use blocks to build sleek, modern interfaces.</li><li>Trusted by 1000+ Users: A reliable choice for developers looking to enhance their projects.</li></ul>UI Layouts is more than just a library — it’s your complete frontend universe, offering everything you need to build modern interfaces faster. Whether you’re previewing dashboards, exploring sales analytics, or managing account settings, UI Layouts has you covered. Experience the power of mouse trails, accordions, and more as you supercharge your projects with ready-to-use components.

Ui Layouts — Open Source

Full Stack Developer | MERN, Next.js | RWaltz Software | Building scalable web apps

Cursify is an open-source animated cursor component library for developers building with React and Next.js. It brings a wide range of creative cursor animations that instantly elevate the user experience of modern web applications.Built with TypeScript, Tailwind CSS, Framer Motion, and the Canvas API, Cursify integrates seamlessly into existing projects with minimal setup.<h3>✨ Key Features</h3><ul><li>Fairy Dust</li><li>Smooth Following</li><li>Canvas Effects</li><li>Bubble</li><li>Character</li><li>Snowflake</li><li>Rainbow</li><li>Follow Cursor</li><li>Spotlight</li><li>Springy Cursors</li><li>Patterns</li><li>Bars</li><li>Smooth Wavy</li><li>Magnetic Cursor</li><li>Fluid Cursor</li></ul>These components are production-ready and battle-tested, ensuring both performance and reliability.Cursify is the perfect toolkit for developers who want to add a creative, playful touch to their interfaces without compromising on speed or maintainability. With comprehensive documentation and easy-to-use APIs, you can ship faster and craft stunning user experiences.

Cursify

UI Tools is an innovative open-source toolbox built for designers and developers, packed with utilities to supercharge your creative projects. It’s fast, efficient, and loaded with modern design tools including:<ul><li>SVG Line Draw Generator – Create stunning animated SVG strokes.</li><li>Shadow Generator – Generate modern box and text shadows with ease.</li><li>Clip-Path Generator – Design complex shapes quickly.</li><li>Mesh Gradient Generator – Craft smooth and vibrant gradient backgrounds.</li><li>Background Snippets – Access ready-to-use patterns and textures.</li><li>Color Lab – Generate palettes, convert colors, and check contrast for accessible designs.</li></ul>Additional features include theme toggling (light/dark), GSAP animation examples, and a collection of creative UI components to build visually appealing and interactive interfaces.Built with React and Next.js, Tools delivers a seamless experience while remaining fully open-source, encouraging collaboration, creativity, and innovation among developers and designers alike.

UI Tools

UI Layouts Pro is a comprehensive solution for developers and designers looking to create stunning, responsive websites quickly and efficiently. This premium package offers over 100 sections powered by React, TypeScript, and Tailwind CSS, ensuring clean, maintainable code that adheres to modern web standards. With UI Layouts Pro, you gain access to a vast library of components and templates designed to save up to 70% of development time.<ul><li>Time-Saving Templates: Launch projects faster with pre-built templates.</li><li>Customizable Designs: Easily adjust templates to match your brand.</li><li>Clean, Efficient Code: Built with best practices for modern web standards.</li></ul> The product offers a simple and affordable pricing plan, granting unlimited access to all components and templates with a one-time purchase. Enjoy lifetime updates, commercial use rights, and priority support, making it an ideal choice for both individual developers and teams. UI Layouts Pro is trusted by top professionals and offers a unique value proposition with its fast-loading, mobile-optimized, and bug-free performance.

UI Layouts Pro

UI Layouts is a comprehensive toolkit designed to accelerate your frontend development process. With over 30+ production-ready blocks and 100+ components, this open-source library offers beautifully designed components that you can easily copy and paste into your applications. Accessible and customizable, these components are built to fit seamlessly into any project, allowing you to ship faster and more efficiently.<h3>Key Features</h3><ul><li>Ready-to-use Blocks: Over 30 free blocks that are pre-built and easy to integrate.</li><li>Customizable Components: 60+ Tailor components to fit your specific needs.</li><li>Modern Interface Design: Utilize effects, design tools, and ready-to-use blocks to build modern interfaces.</li><li>Trusted by 1000+ Users: A reliable choice for developers looking to enhance their projects.</li></ul>UI Layouts is more than just a library; it's your complete frontend universe, offering everything you need to build modern interfaces faster. Whether you're looking to preview dashboards, search sales analytics, or manage account settings, UI Layouts has you covered. Experience the power of mouse trails, accordions, and more as you supercharge your projects with ready-to-use components.