Shadcn, the popular set of open-code UI components, has released a visual project builder accessible via the npx shadcn create command, shipping with comprehensive theming, framework support, and a design-first approach to scaffolding new projects.
The create command introduces a visual interface at ui.shadcn.com/create that allows developers to customize their entire project setup before writing a single line of code. The tool supports Next.js, Vite, and TanStack Start frameworks, with full configuration for themes, component libraries, icon sets, and design systems.
A key feature is the ability to preview and customize every aspect of a project’s design system in real time. Developers can select between Radix UI and Base UI as their component foundation, choose from multiple visual styles including the popular Nova preset, configure base colors and themes, select icon libraries like Lucide, customize fonts and border radius values, and adjust menu colors and accents. The interface includes a shuffle feature that generates random design combinations, helping developers explore different aesthetic directions quickly.
The tool will guide users through framework selection and open the visual builder where all customization happens before code generation. This approach contrasts with traditional scaffolding tools like create-next-app or create-vite, where styling and component libraries are typically added after project initialization. By frontloading these decisions, the visual builder eliminates the repetitive setup work that developers previously performed manually. Once developers are happy with their customization, they are given a custom shadcn create command which includes all the parameters for the customisation options the developer has selected.
The visual builder represents one of the most significant additions to the shadcn ecosystem, with support for proper design system setup and component-level preview capabilities, providing a new way to start and generate complete shadcn apps with design decisions made before writing code.
For developers familiar with the previous init workflow, the installation documentation confirms that shadcn create serves as the recommended starting point for new projects, though the traditional npx shadcn@latest init command remains available for adding shadcn to existing projects.
The visual builder philosophy aligns with shadcn’s core principle of open code ownership. Unlike component libraries distributed as npm packages, shadcn components are copied directly into project codebases, giving developers complete control. This approach has drawn community discussion on Reddit, where users have questioned the popularity of shadcn, one user summarises a reason for this:
Shadcn components are drop-in, so you can customise them as you want. Example – we hit an issue with combobox filtering, so I just disabled the built-in filtering and swapped it with another library.
Another benefit is that there’s alternative workarounds/components created by community when something is not working, due to it’s huge popularity.
On twitter, the announcement post from the author received a huge reaction, with over 9k likes and over 400 comments to the news.
Shadcn is an open-source component distribution platform created by shadcn at Vercel. Unlike traditional component libraries, it operates as a code registry where components are installed directly into projects rather than imported as dependencies. The platform has reached over 100,000 GitHub stars and supports multiple frameworks including Next.js, React, Vue, and Svelte.
