Best shadcn Templates in 2026: Free and Paid, Tested

This list of the best shadcn templates comes from a vendor: we build Wingo UI, which sells page templates, and our own picks get the same checks as everyone else's. What we added is testing. Every template here was checked on November 6, 2026 for license, price, Next.js and Tailwind version and the date of its last push, and every live demo we could open was loaded at 390px wide to see what happens on a phone.

The picks are grouped by job: a SaaS marketing site, a dashboard, a store and a docs site. If you are unsure whether you need a template at all or only a block or a component, read shadcn blocks vs components first; it defines all three. More comparisons live under Comparisons and alternatives, and the full map of libraries is in our shadcn alternatives guide.

How did we test these shadcn templates?

On November 6, 2026 we did three things for each template:

1. Read the code. We opened package.json on the default branch for the real Next.js, React and Tailwind versions, the LICENSE file, and the latest push to the repository from the GitHub API. Paid templates we checked against the vendor's pricing and template pages on the same day.
2. Loaded the live demo on a phone viewport. Headless Chromium through Playwright, 390 by 844 pixels, touch enabled, an iPhone user agent. We measured whether the page scrolls sideways and whether any table scrolls inside its own box, then looked at full-page screenshots.
3. Noted what the demo hides. Some demos sit behind a sign-in; we did not create accounts, so those got no phone result.

What we did not do: production builds, Lighthouse runs or a full accessibility audit. Treat the phone column as a first look.

The script is short enough to run on any template you are considering. Save it as .mts so tsx runs it as an ES module, which the top-level await needs:

// check-template.mts: npx tsx check-template.mts https://demo.example.com
import { chromium, devices } from "@playwright/test";

const url = process.argv[2];
const browser = await chromium.launch();
const page = await browser.newPage({ ...devices["iPhone 13"], viewport: { width: 390, height: 844 } });
await page.goto(url, { waitUntil: "load" });
await page.waitForTimeout(2000);

const result = await page.evaluate(() => {
  const boxes = [...document.querySelectorAll<HTMLElement>("*")].filter((el) => {
    const overflowX = getComputedStyle(el).overflowX;
    return (overflowX === "auto" || overflowX === "scroll") && el.scrollWidth > el.clientWidth + 20;
  });
  return {
    pageOverflow: document.documentElement.scrollWidth - window.innerWidth,
    sidewaysTables: boxes.filter((el) => el.querySelector("table")).map((el) => `${el.clientWidth}/${el.scrollWidth}px`),
  };
});

console.log(url, result);
await page.screenshot({ path: "template-390.png", fullPage: true });
await browser.close();

Which are the best shadcn templates at a glance?

All facts as of November 6, 2026. "Last push" is the latest push to the repository on GitHub, on any branch. "At 390px" is what our check found on the public demo.

A table that scrolls inside its box is a design choice: nothing breaks, and shadcn/ui's data table is built that way. It does mean the phone user sees two or three columns at a time and swipes for the rest, which is fine for an admin who checks a dashboard on the train and poor for anyone who works from a phone.

What is the best shadcn SaaS template?

It depends on whether you are missing the backend or the design.

next-forge is the most complete free starting point for a real product. It is a Turborepo with a marketing site, the app, an API, docs, email templates and Storybook, wired to Clerk, Stripe, Resend, PostHog and Sentry. That is a lot of accounts to create before your first deploy, and its default branch was last pushed in May 2026. Pick it when you want the whole stack decided for you.

nextjs/saas-starter from the Next.js team is the smaller version: a landing page, a pricing page connected to Stripe Checkout, email and password auth with JWT cookies, teams with Owner and Member roles, Postgres through Drizzle. It runs on a Next.js 15 canary and has not been pushed since December 2025, so plan an upgrade to Next.js 16 on day one.

Mainline is the free template from shadcnblocks: a polished marketing site with no backend. Its license is MIT plus a Commons Clause, which lets you use it commercially but not resell the template unmodified. It sits on Next.js 15.5 in the repository, while the paid shadcnblocks templates list Next.js 16.

shadcn premium templates are the paid route to a finished marketing design. shadcnblocks sells 21 paid templates from $79 each, or all of them in its $299 Premium plan, one-time, for a single user (pricing (opens in a new tab), November 6, 2026). Magic UI Pro is $199 one-time for nine templates (SaaS, Startup, AI Agent, Dev Tool, Mobile, Portfolio, Changelog, Blog and Codeforge), animated with Motion. shadcn studio lists 25 or more templates with plans from $99 one-time, but its pricing page (opens in a new tab) did not say which plan includes them when we checked.

Our entry is the Landing Page template, a SaaS home page with four designs (classic, bold, editorial, minimal), and the Pricing Page block that goes with it. They are UI only: you bring auth and billing, or put them on top of saas-starter's backend. The pricing page is the one to try on a phone: three plan cards cannot sit side by side at 390px, so ours turn into a carousel.

Wiring it to your sign-up takes one handler. This is the block's real API:

// app/(marketing)/pricing/page.tsx
"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { PricingPage } from "@/components/blocks/pricing-page";

export default function PricingRoute() {
  const router = useRouter();
  return (
    <PricingPage
      linkComponent={Link}
      defaultPeriod="yearly"
      mobileLayout="carousel"
      onSelectPlan={(planId, period, currency) =>
        router.push(`/sign-up?plan=${planId}&period=${period}&currency=${currency}`)
      }
    />
  );
}

For the full picture of building the marketing side, our SaaS website template guide walks through every page a SaaS site needs.

What are the best shadcn dashboard templates?

This is the most crowded category, and the free options are good.

shadcn dashboard-01 is the official block: a sidebar, KPI cards, an area chart and a data table. Run npx shadcn@latest add dashboard-01 and it lands in your existing project, which makes it the cheapest way to see whether you need more than a block.

shadcn-admin by Sat Naing is the most starred dashboard in this list (16,577 GitHub stars on November 6, 2026). It is a Vite app with TanStack Router, so it suits a single-page admin that talks to a separate API. Pick something else if you want Next.js server components.

Studio Admin by Arham Khan ships several dashboards (Default, CRM, Finance, Analytics, Productivity), auth screens and theme presets, and keeps separate repositories for Base UI, React Aria and TanStack Start. It was pushed the morning we checked.

next-shadcn-dashboard-starter by Kiran is built on Base UI and goes further on working code than the others: tables with server prefetch and URL-synced filters through TanStack Query and nuqs, Zod forms, Clerk auth with organizations and Clerk Billing. That also means it depends on Clerk; its demo dashboard sits behind a Clerk sign-in, which is why our phone check stopped at the landing page.

For paid, the shadcnblocks Admin Kit is $129 on its own. Ours is the Admin Dashboard Page inside the Admin Shell, and of the dashboard demos we could open, it is the only one whose tables did not scroll sideways at 390px: the recent orders become cards with Load more, the KPIs sit two by two, and an order opens in a bottom sheet you drag down to close.

npx wingo-ui@latest add admin-shell admin-dashboard-page

// app/(admin)/page.tsx (the shell wraps it in app/(admin)/layout.tsx)
"use client";

import { useRouter } from "next/navigation";
import { AdminDashboardPage } from "@/components/blocks/admin-dashboard-page";

export default function HomePage() {
  const router = useRouter();
  return (
    <AdminDashboardPage
      userName="Emma"
      currency="USD"
      onCreateOrder={() => router.push("/orders/new")}
      onOrderAction={async (action, order) => {
        const res = await fetch(`/api/orders/${order.id}/${action}`, { method: "POST" });
        if (!res.ok) throw new Error(`Order ${order.number}: ${action} failed`);
      }}
    />
  );
}

The block updates the row first and waits for your promise; a rejected promise rolls the change back, which is why the handler throws on a failed response. action is "confirm", "cancel" or "print".

If you are choosing a library for the whole admin rather than one template, the dashboard component library comparison covers data tables, charts and filters, and the Next.js admin dashboard tutorial builds one step by step. The table behavior comes from our Data Table, which renders cards on phones.

Is there a good shadcn ecommerce template?

Your Next Store is the one we would start from. It is MIT, on Next.js 16.4 with Base UI and Tailwind 4.3, and was pushed the day before we checked. Know what it is before you clone it: the storefront talks to the YNS commerce platform through its Commerce Kit SDK and needs a YNS_API_KEY from yns.store, with Stripe for payments. You get a store fast; you do not get a standalone storefront for your own backend.

skateshop by sadmann7 still shows up in many lists, but it is on Next.js 14 and Tailwind 3 and has not been pushed since April 2025. Read it for ideas; do not start a new project on it.

We now sell a store front end too: the Storefront Page template is a store home with collections, a filterable product grid with quick add, a featured product, reviews and a cart drawer. Like every template of ours it has no commerce backend, so you wire products, the cart and payments to the one you already use, and the Checkout Page (cart, four checkout steps, order placed) covers the step after the cart. Our shadcn ecommerce template guide builds a storefront from these parts, screen by screen.

What should you use for a shadcn docs site?

Fumadocs, without much competition. It is MIT, ships fumadocs-ui on Radix and a separate Base UI edition, runs on Tailwind CSS v4, and has search, MDX, OpenAPI pages and a shadcn integration. It is a docs framework, so you get the engine and the layout together.

Our Docs Home Page template covers only the portal home (search palette, quick-start cards, API samples, SDK tiles, changelog). Use it in front of Fumadocs if you want a designed landing for your docs; it does not replace the docs engine.

Are free shadcn templates good enough?

For most projects, yes. Every free template in the table except skateshop is on Tailwind CSS v4, all are MIT (Mainline with its Commons Clause), and several were updated this week. The free ones tend to be stronger on working backend code: auth, billing, a database layer. Paid templates tend to be stronger on page count and visual polish. What MIT asks of you in return is covered in is shadcn free for commercial use?.

Three things to check before you clone a free one:

• The versions on the default branch. saas-starter runs a Next.js 15 canary; Mainline is on Next.js 15.5 while its paid siblings list 16.
• The services it assumes. next-forge and Kiran's starter expect Clerk; Your Next Store expects the YNS platform. Removing an auth provider later costs more than choosing a template without one.
• The phone. Run the script above or open the demo in your browser's device mode and scroll to the first table.

Where do Wingo UI templates fit?

Wingo UI has 50 page templates in the templates gallery and 45 more blocks such as full app screens (dashboards, checkout, settings, CRM) and marketing sections, built from the same 226 components. Two templates are free, the Contact Page and the FAQ Page; the rest need Pro at $8 a month, $80 a year or $150 once (pricing). The 14-day refund covers a first purchase only while no Pro item has been downloaded.

Where we are the better pick: apps that people open on phones (sheets instead of popovers below 768px, 44px touch targets, tables to cards), every visual aspect as a prop with a default, light and dark both designed, and a CLI that merges our updates into files you have edited. Where we are not: we have no backend in any template (the store template included) and no docs engine, a far smaller community than shadcn/ui, and we build on Radix, so a Base UI project would carry two primitive libraries. One more honest note: our Template Gallery Page is a screen for an app that offers templates to its own users (Notion style, with categories and a detail dialog). It does not list site templates.

What should you do next?

Pick by job and by what you are missing. If you need the backend, clone next-forge or saas-starter. If you need a dashboard, try shadcn-admin, Studio Admin or Kiran's starter. If you need a phone-ready UI on top of either, see how our templates are wired with the free Contact Page: create a free account (email only, no card), follow the installation guide, then run npx wingo-ui@latest add contact-page.

FAQ

What are the best free shadcn templates?

As of November 6, 2026: next-forge and nextjs/saas-starter for a SaaS product, shadcn-admin, Studio Admin and next-shadcn-dashboard-starter for dashboards, Your Next Store for a store and Fumadocs for documentation. All of them are MIT licensed and run on Tailwind CSS v4.

Does shadcn/ui have official templates?

No. The official site has blocks such as dashboard-01, sidebars and login screens, installed with npx shadcn@latest add dashboard-01, but no full site templates; ui.shadcn.com/templates returned a 404 on November 6, 2026. Full templates come from third parties.

Are shadcn premium templates worth paying for?

They are worth it when you need a finished marketing design and would otherwise spend days on layout and copy structure. Free templates usually give you more working backend code (auth, billing, database), while paid ones give you more pages and polish, so pick by which half you are missing.

Which shadcn templates use Tailwind CSS v4?

Every free pick in this list except skateshop runs on Tailwind CSS v4 on its default branch as of November 6, 2026, and shadcnblocks lists Tailwind 4 for its templates. Check package.json on the branch you clone, because some repos, Studio Admin among them, keep Tailwind v3 versions on archive branches.

Can I use free shadcn templates in a commercial project?

MIT templates, yes, including client work. Read the license file anyway: shadcnblocks' free Mainline template is MIT plus a Commons Clause, which allows commercial use but forbids selling the template itself unmodified.