Introducing shadcn/ui Design System Manager. A visual editor for shadcn design systems. Add a token, a variant, or ask the agent to match your design.md. Every component on the canvas updates instantly. Share preview with your client or Publish as a registry. Let me show you..

Wow. Amazing job on this Matt. Like shadcn/create + figma :)

Thanks for the kind words. Also, thanks for early testing and feedback. Means a lot.

Why I built it? AI agent will edit your tokens and components, but agents do not care about the details designers do. I also find it easier to edit padding the old way and see how it changes live than ask AI to do it and wait.

I hit this on a bigger client project and decided to build the tool I was missing. Now every shadcn design system I start, for a client or for my own app, begins here. This is where the source of truth lives, and I can see every change before it ships.

I built the editor I wanted: 1. Change a color, a radius, a font, a shadow. Every component on the canvas updates at once, in light and dark mode.

2. Pick a component and edit its variants directly. Add a new one and it shows up in the variant matrix next to the official ones. Values come from your variables first. Hardcoded is the escape hatch, not the default. All with shadcn/ui and React best practices.

3. There is an agent tab. Describe the change, or drop in your design.md, a screenshot or an HTML file. It edits through the same commands the inspector uses, so every change lands on the canvas as a normal edit. One undo step per turn. When it stops, you take over.

4. If you used to write Tailwind, the Utilities tab shows the raw utility list behind every rule. Edit it directly, or let the agent do it. Same rule, two views.

5. Ready for feedback? Send a link to your client. They see the whole system in light and dark and can click through every component. No account needed to view. Forking is a toggle.

6. When you're done, publish. You get a shadcn registry. One shadcn add command installs your system into any project. Re-run it and your latest changes come through. Every publish is a version with a changelog.

The editor is free and works in your browser locally with no account. The hosted registry and share links ride on a free account. Try it. Make your shadcn/ui design system the source of truth.

@shadcn super useful!

@shadcn Thank you, Manu!

@shadcn Very useful man

@shadcn Thanks man

@shadcn a visual editor for shadcn tokens is so needed

@shadcn Not only tokens but also components ;)

@shadcn The agent using the same commands as the inspector is the detail that sells this for me. Could I accept its spacing changes but reject its typography changes within one turn? That would make a broad “match this reference” pass much easier to review.

@shadcn Now you can undo all changes but it's a good idea for rejecting specific changes Evan, thanks.

@shadcn Got it, thanks for clarifying. Even grouping the review by spacing, type and color would help me decide what to keep. Seeing the affected components beside each group would make the tradeoffs much easier to judge.

@shadcn 🔥🔥🔥 smart

@shadcn Thanks! Feedback is very welcome. More improvements and features coming soon.

@shadcn Great work

@shadcn Thanks 💪

@shadcn Edits through the same commands the inspector uses, so every agent change lands as a normal undoable edit — that's the smart call. And publish-as-registry makes it a real workflow, not a demo. Nice work!

@shadcn Thanks for testing Javier!

@shadcn Love the overall aesthetic!

@shadcn Thanks!

@shadcn So needed.

@shadcn 🫡

@shadcn Wow, thank you!!

@shadcn My pleasure. Let me know what you think!

@shadcn sharing a live preview with the client is such a nice touch. super useful

@shadcn Thanks! Built it for myself. Needed this.

@shadcn Holy fuck holy fuck. This is literally what we needed. Holy fuck

@shadcn I needed this too. Finally managed to wrap it up.

@shadcn Bravo, even tho I’m waiting for my @elyxdesign access. There seems to be some overlaps with yours

@shadcn Visual editor that updates every component when you tweak a token is exactly what design systems needed. Curious how conflict resolution works when the agent edits design.md vs a human tweak.

@shadcn Beautiful

@shadcn Will this work on existing projects, made or made not entirely with shadcn?

@shadcn Yeah. There is an agent tab in the app. You can ask the agent to restyle the system to match your app design.md / screenshot / css file. It will restyle the system to match your input and you can later focus on the details such as component paddings etc.

@shadcn can you see what changed before publishing the registry?

@shadcn Yeah, there is a components page with the table that shows if the component was edited. Also, the UI shows a dot near the value you edited.

@shadcn ah okay, the edit dots are what I was looking for