# shadcn/studio: a copy-and-paste component catalogue with a theme generator behind it

> shadcn/studio is a Next.js application that catalogues shadcn/ui components, blocks and templates for copying into a codebase, and pairs the catalogue with a live theme generator, a Figma library, a Figma to code plugin and an MCP server for AI coding tools. It is not a component library you install, and the README is explicit about that distinction.

**shadcnstudio/shadcn-studio** — An open-source collection of copy-and-paste shadcn components, blocks, and templates - paired with a powerful theme generator to craft, customize, and ship faster.

- Repository: https://github.com/shadcnstudio/shadcn-studio
- Website: https://shadcnstudio.com
- Stars: 1,984 · Forks: 153
- Language: TypeScript
- License: NOASSERTION
- Published: 2026-10-16 · Updated: 2026-10-16 · Language: en
- Canonical page: https://hysenlabs.com/projects/shadcnstudio-shadcn-studio

## What it is not: a distribution, not a library

The overview section of the README makes the positioning point before anything else, and it is worth quoting closely because the difference is not a matter of taste.

This isn't a traditional component library or a replacement for Shadcn. Instead, it's a unique collection offering customizable variants of components, blocks, and templates. You preview them, customise them and copy-paste them into your apps.

And then the section heading states it flatly: not a standard library, but a distribution of components. Following the philosophy of Shadcn, shadcn/studio isn't a conventional install-from-NPM library. Rather, it's an open-source distribution of components designed for maximum adaptability. You can copy the code, modify styles, adjust logic, or integrate it with other tools, free from the limitations of typical libraries. This open code model empowers you to customize with confidence and creativity.

The upstream shadcn/ui model is described as aiming to provide core components with a unique distribution system, allowing developers to copy and paste reusable, customizable UI elements directly into their codebase.

So the taxonomy is three layers. shadcn/ui is the upstream core components. shadcn/studio is a larger catalogue of variants, blocks and templates built on top of that core, with custom-designed components. And the shadcn CLI is the distribution mechanism, which is where registry.json comes in, since that is the file the CLI reads to know what can be installed.

The README is also candid about the upstream's limits, because a catalogue built on a component set inherits that set's limits. While the copy and paste approach offers flexibility and control, it comes with some limitations: a lack of diverse component variants examples, limited theme customization options, and limited pre-built blocks. And shadcn/ui's extensive customization options, though powerful, can sometimes feel overwhelming, especially for those seeking a more guided or streamlined experience.

That is the gap shadcn/studio claims to fill. The features list is framed as a response: component and blocks variants, animated variants with Motion, landing pages and dashboards, a Figma library, a theme generator, an MCP server, and a Figma to code plugin. The first two address the variants and the pre-built blocks, and the theme generator addresses the overwhelming customisation.

The primary language is TypeScript, the homepage is shadcnstudio.com, and the recent releases are v1.9.0 on 2026-08-20, v1.0.0 on 2025-11-20 and v1.0.0-beta.3 from 2025-07-04. The repository is not archived, with the last push on 2026-08-20. The project is supported by ThemeSelection, and the licence badge points at a repository under the themeselection organisation, so the canonical upstream is a fork rather than the shadcnstudio organisation.

## The theme generator, and why the CSS variable model makes it possible

The features list gives six items and the first three are the ones that make the tool a tool rather than a gallery.

A live theme generator: see your shadcn components transform instantly as you experiment with styles in real time. Color mastery: play with background, text, and border hues using a color picker for a unified design. And typography fine-tuning: adjust font sizes, weights and transformations for a polished look.

What makes this possible is how shadcn/ui is themed in the first place, and that is worth understanding because it explains the design of the generator. The component styles are driven by CSS custom properties rather than by hardcoded values, so a theme is a set of variables and the components read them. A generator that edits variables therefore restyles every component at once, which is why the README can promise that the components transform instantly.

The remaining three features are the supporting layer. Tailwind v4 compatibility, which is a real piece of work rather than a checkbox, because the README says it supports OKLCH, HSL, RGB and HEX colour formats, and Tailwind v4 is the version that moved its own colour handling toward OKLCH. Theme starters to kick off with, customisable for light or dark modes. And hold to save theme, which preserves your custom themes with a quick hold, making them easy to reuse or share later.

The hold-to-save gesture is a small interface decision with a purpose. A theme generator that required a form submission before you could keep what you made would be friction on every iteration, and a gesture that is easy to trigger accidentally is worse, so the threshold is a deliberate hold rather than a click.

The wider point is that the theme generator is the part of this project that produces an artefact you keep, while the component catalogue produces artefacts you copy. The saved theme is a small file of variables, and the copied component is source code in your repository. Both are things you own, which is the consistent thread through the whole project.

The README does not go into the internals of how the generator is implemented in this repository, and the detail that would matter for a reader is the file structure. The repository has a .env.example, which is two lines:

```
BASEPATH=
NEXT_PUBLIC_APP_URL=http://localhost:3000${BASEPATH}
```

So the application supports being served from a subdirectory, and the public app URL is composed from that base path. That is a deployment detail that matters for anyone self-hosting the catalogue rather than using the hosted site, and it is the kind of thing the file exists to communicate.

## The Figma side and the MCP server, which is the newer direction

Three of the features point away from the catalogue and towards a design-to-code pipeline, and they are the ones that suggest where the project is going.

The first is shadcn/ui for Figma, described as a full design library inspired by shadcn/ui, with UI components, blocks and templates, meant to speed up your workflow. The second is the Shadcn Figma To Code Plugin, which converts your Figma designs into production-ready code instantly. And the third is the shadcn/studio MCP server, which lets you integrate it directly into your favourite IDE and craft shadcn/ui components, blocks and pages inspired by shadcn/studio.

The MCP server is the most consequential of the three, and the reason is what MCP has become. An MCP server exposes a tool interface that an AI coding assistant can call, so instead of an agent inventing a component from a screenshot, it can fetch the actual component source, the actual block and the actual theme from a catalogue. That changes the failure mode from plausible wrong code to exact right code, and it is a natural fit for a project whose entire value proposition is that the components are copy-pasteable source in the first place.

The Figma plugin is the other half of the loop. A library in Figma and a plugin that converts Figma designs into code are two halves of a workflow where the design is the source of truth, and the code is generated from it. The README puts the Figma to code plugin and the Figma library in the same list, which suggests they are meant to be used together rather than separately.

The rest of the feature list is the catalogue itself: a growing, community-driven collection of copy-and-paste shadcn/ui components, shadcn blocks and templates; a diverse collection of customizable shadcn blocks and component variants; animated variants with Motion for smooth, modern animations; and 20+ premium and free shadcn templates for dashboards and landing pages, fully customisable and easy to use.

The word premium in that last line is worth pausing on, because it sits next to open-source. The project is described as an open-source and premium collection, and the licence field on the project is recorded as a custom one that GitHub could not classify, while the badge in the README reads MIT and links to a LICENSE.md file in the themeselection organisation. So there is a mix here: the components and blocks are open source, and some templates are behind a premium offering. The practical question for an adopter is which parts you get under which terms, and the answer is in the LICENSE.md file rather than in the README.

## The stack, the registry file, and what a self-hoster inherits

The package.json describes a Next.js application rather than a library, and the details tell you what you are dealing with if you run it yourself.

The scripts are the standard Next.js set, with two worth noting. The dev script is next dev --turbopack, so the development server runs on Turbopack, and there is a registry:build script running shadcn build, which is the CLI building the registry output from the components in the tree. And the format script covers the source tree for js, jsx, ts, tsx, md and mdx, so Markdown and MDX are formatted alongside the code, which is what you need when the content is documentation pages.

The check-types script is tsc --noEmit and the lint scripts are next lint, with a check-types and lint:fix pair. The clean scripts remove the .next directory and the tsbuildinfo, and clean:node_modules also removes node_modules.

The dependency list is long and it is essentially the shadcn/ui stack, one Radix UI primitive per line. There are around thirty @radix-ui/react packages, from accordion and alert-dialog through aspect-ratio, avatar, checkbox, collapsible, context-menu, dialog, dropdown-menu, hover-card, label, menubar, navigation-menu, popover, progress, radio-group, scroll-area, select, separator, slider, slot, switch, tabs, toggle, toggle-group and tooltip, with the list cut off partway through. That is the whole Radix catalogue, which is what shadcn/ui is built on, and it means the catalogue is not showing you a subset of what the primitives can do.

There is also @dnd-kit with core, modifiers and sortable, which is a drag and drop toolkit, and @hookform/resolvers. The drag and drop packages are there for the theme generator and the Figma-like editors, where reordering and sorting are the interaction.

The publishConfig sets access to public, and the package is named shadcn-studio with version 1.0.0-beta.3 in the manifest while the release tag is v1.9.0, so the manifest version and the release version have drifted apart, which is a sign the published package is not the main artefact.

The most important file in the repository for an adopter is registry.json, at the top level. That is what the shadcn CLI reads to know which components and blocks this project can install, and it is the mechanism by which a copy-paste catalogue becomes something installable. The README does not describe its format, and the components.json file alongside it is the shadcn/ui configuration for the project itself. If you are evaluating whether you can install from this catalogue into your own app, registry.json is the file to read.

The repository also has vercel.json and a next.config.ts, so the hosted site is a Vercel deployment, and the .vscode/ directory, .editorconfig, .prettierrc.json and .eslintrc.js are the usual editor and tooling configuration.

## Conclusion

shadcn/studio fits a team working in shadcn/ui that wants more component variants, more pre-built blocks and a faster way to settle a theme than hand-editing CSS variables, and that is comfortable with a workflow where the artefact you take away is source code you own. It is the wrong choice if you want a package you install, because nothing here is designed to be a dependency, and the wrong choice if you need a component set that stays in sync with upstream shadcn/ui, because the copy-and-paste model means your copy does not update. Before adopting, read the LICENSE.md file, since the metadata records a custom licence that GitHub could not classify even though the badge reads MIT, and check the registry.json, since that file is what determines what the shadcn CLI can install from this project.

## FAQ

### What is shadcn/studio and how is it different from shadcn/ui?

shadcn/studio is an open-source distribution of copy-and-paste shadcn components, blocks and templates, not an install-from-NPM library and not a replacement for Shadcn. It builds on the solid foundation of the Shadcn components and blocks with custom-designed variants, and adds a theme generator, a Figma library, a Figma to code plugin and an MCP server.

### What does the shadcn/studio theme generator do?

It shows your shadcn components transform instantly as you experiment with styles in real time. You can play with background, text and border hues with a color picker, fine-tune typography with adjustable sizes, weights and transformations, start from pre-built light or dark theme starters, and hold to save a custom theme so it is easy to reuse or share.

### What is the shadcn/studio MCP server for?

It lets you integrate shadcn/studio directly into your favourite IDE, so an AI coding assistant can craft shadcn/ui components, blocks and pages inspired by the catalogue rather than inventing them, and it works on the same copy-and-paste source model as the rest of the project.

### What licence does shadcn/studio use?

The licence field on the project is given as a custom one that GitHub could not classify, while the README badge reads MIT and links to a LICENSE.md file in the themeselection organisation, and the project describes itself as an open-source and premium collection with 20+ premium and free templates. The LICENSE.md file is where the terms for each part are set out.

## Sources

- [Issues](https://github.com/shadcnstudio/shadcn-studio/issues)
- [Project website](https://shadcnstudio.com)
- [README](https://github.com/shadcnstudio/shadcn-studio/blob/main/README.md)
- [Releases](https://github.com/shadcnstudio/shadcn-studio/releases)
- [shadcnstudio/shadcn-studio on GitHub](https://github.com/shadcnstudio/shadcn-studio)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/shadcnstudio-shadcn-studio