SCSS Templates

11 SCSS templates with shadcn/ui and React: Sass modules and variables alongside Tailwind CSS, for projects that keep their own styles. A template can be in several categories, so a SCSS template can also be listed under another.

11 templates by 11 developers: 11 open source. The collection has 229 templates in all.

They are most often listed with Tailwind, React, Next.js and Vite. Those categories are linked at the foot of this page.

The collection is for shadcn/ui: each SCSS template was listed because it uses shadcn/ui components. Its repository shows the exact setup, such as a components.json and the Tailwind CSS version.

SCSS templates are complete apps or sites you clone or download; blocks are single sections you add to an app you already have. Use a template to start a project and blocks to extend it.

The browser on this page searches the 11 SCSS templates by name, author or category and orders them by featured, name or newest. The address keeps the choice.

Among the open source ones, Note Gen, Haitang and Echo Editor lead the list. Open each live demo before you clone one.

11 of the 11 SCSS templates list a live demo and 11 link a GitHub repository. Each template page embeds the demo when it has one.

Note Gen has the latest listing date among the open source ones, October 8, 2025. Choose Newest in the browser to order SCSS templates by that date. The date is the listing's, not the repository's.

Bundui has the most, 1 template, followed by Codexu (1) and Evanbacon (1). Each name links to the author's page.

11 developers built the 11 SCSS templates. The open source ones are independent projects on GitHub.

Open the author's page from the list on this category page: it shows their templates in every category, and which technologies they use. /template/authors lists all 187.

None of the SCSS templates are by shadcn.io: they are community projects, which their own authors maintain.

The 11 open source ones are free to clone from GitHub, each under its own license.

None. All 11 SCSS templates here are open source; the 14 premium templates are listed under /template.

For the open source ones, it depends on each repository's license, which shadcn.io doesn't set: read the LICENSE file first.

No. Browsing SCSS templates and trying their live demos needs no account, and an open source template is cloned from GitHub. Only the premium templates, the blocks and the MCP server need Pro.

Open a template and its GitHub link, then run git clone, npm install and npm run dev. Each repository's README has the exact steps.

Yes. Blocks and components are React code you copy with the shadcn CLI, so they fit a SCSS template that uses Tailwind CSS and shadcn/ui. Components are free with a free account, and the blocks are in Pro.

Yes, with Pro. The shadcn.io MCP server's search_templates tool finds templates by what they are, so you can ask your editor for a SCSS template and get its repository and live demo.

Yes. The clone is your code: change the theme, add pages and connect your backend. How you deploy a SCSS template depends on the template's own framework and services, so follow its README.