Open-source Next.js + shadcn/ui layout templates for developers, dashboards, productivity apps, and more, with a Pro tier.
What it does
Square UI is an open-source collection of Next.js and shadcn/ui layouts and templates built by Leonel Ngoya. It offers free and premium dashboard, app, and productivity UI templates for developers who want polished starting points without building from scratch.
Scaffolding a polished dashboard from zero costs days of component plumbing. Square UI gives Next.js developers a ready-made layout with real data patterns, per the GitHub README, so the first commit looks production-grade rather than prototype-grade.
Square UI is a growing collection of open-source UI layouts built on Next.js, TypeScript, shadcn/ui, and Tailwind CSS. The free tier lives on GitHub and ships two source-code variants per template: one using Radix UI primitives, one using Base UI. Every template has a live Vercel demo you can inspect before pulling the code.
Pick a template from the catalog, clone the relevant folder from the templates/ or templates-baseui/ directory, and drop it into your Next.js project. Because everything is built with shadcn/ui and Tailwind, you can restyle it using your existing design tokens without fighting a custom CSS system.
The free tier covers a wide range of common app shapes: multiple dashboards, a CRM, HR and payroll views, a leads manager, calendar, kanban, file manager, bookmarks, maps, and an AI chat interface. The Pro tier, priced at a one-time $169, unlocks 19 additional layouts including a live airline operations dashboard (Skyport), a wine-cellar tracker (Cellar), and a music-producer studio dashboard (Atelier).
All 19 Pro templates are paywalled from day one; there is no free version of any Pro layout to evaluate before buying. The free templates are genuinely open-source (hosted publicly on GitHub), but the catalog is still relatively young, with the earliest templates dating from late 2025.
Square UI is the fastest on-ramp for a developer who needs a convincing, customizable Next.js app shell today. The free layouts cover the most common internal-tool shapes, and the Pro tier is a one-time fee rather than a subscription, which makes it easy to evaluate the value-to-cost ratio upfront.
Features
Field notes
Reviewed Jun 26, 2026
Best for
Builder outcomes
Watch out
Tested with
Cost
">Free tier is genuinely open-source and hosted publicly on GitHub. Pro tier is a one-time fee of $169 unlocking 19 additional layouts, with no recurring subscription.
Square UI is an open-source collection of full-page UI layouts and app templates built with Next.js, TypeScript, shadcn/ui, and Tailwind CSS. It was created by Leonel Ngoya (lndev) and covers common app shapes like dashboards, CRM, HR tools, task management, and productivity apps. Free templates are hosted on GitHub; a Pro tier adds 19 premium layouts for a one-time fee.
Per the GitHub README, free templates live in the `templates/` directory (Radix UI) or `templates-baseui/` directory (Base UI). You clone the relevant folder into your Next.js project, and since everything uses shadcn/ui and Tailwind CSS, you can apply your own design tokens right away. Every template also has a live Vercel demo so you can see it in action before writing any code.
Square UI follows a freemium model. The free tier is fully open-source on GitHub and includes a solid set of layouts covering dashboards, kanban, calendar, file manager, email client, and more. The Pro tier costs a one-time $169 and unlocks 19 additional premium templates, including specialty layouts like a live airline operations dashboard and a music-producer studio dashboard.
Square UI is best for Next.js developers who need a polished, data-heavy app layout fast, without hand-rolling every panel and chart from components. It is especially strong for internal tools, SaaS MVPs, and admin dashboards because the templates model realistic data structures rather than simple placeholder UI. Teams already using shadcn/ui and Tailwind will see the fastest onboarding.
shadcn/ui gives you individual components (buttons, tables, cards), while Square UI assembles those components into complete, working application layouts. Reaching for Square UI skips the layout-architecture phase entirely, which is the part that typically takes the most time on a new project. The tradeoff is that you are starting from an opinionated layout structure rather than designing your own information hierarchy.
The biggest limitation is that all Pro templates are paywalled with no free individual preview, so you must trust the live demos before purchasing. The free template library is narrower than larger marketplace alternatives, and the project is maintained by a solo developer, which means update pace and long-term support depend on one person. Additionally, the templates are tightly coupled to Next.js, so they are not useful for React projects using a different framework or for non-React stacks.
78+ animated shadcn/ui components plus 100+ AI agent patterns, distributed as copy-paste source, free, open-source, and zero npm lock-in.
Best for React and Tailwind teams already using shadcn/ui who want animated, accessible components without npm package overheadshadcn/ui, open-source, copy-owned UI components for developers building their own design system with full code control.
Best for Teams building a custom design system who need full ownership of component source codeFree, MIT-licensed React loading animation registry for shadcn-style projects, copy-paste spinners, skeletons, and motion primitives.
Best for Teams building React and Tailwind CSS products that already use shadcn/ui and need consistent pending states fastOpen-source glassmorphism component library for shadcn/ui, 21 Apple-inspired glass UI components for Next.js and React, installed via the shadcn registry.
Best for Teams building Next.js or React apps that already use shadcn/ui and want a coherent glass aesthetic fastOpen-source React loading animation library with 55+ dot-matrix loaders for shadcn/Tailwind projects, install in one command.
Best for React and Tailwind CSS teams who want polished, on-brand loading animations without building from scratchOpen Design is the open-source, local-first Claude Design alternative for builders who want agent-native design, prototypes, decks, and video, without a vendor lock-in.
Best for Developers who want to generate design artifacts from a brief using their existing coding agent