# DS Manager, a design system manager for shadcn/ui, is live > DS Manager is a design system manager for shadcn/ui. Edit design tokens and components on a live canvas, then install them with one command. Free in beta. Published: 2026-09-29 · Author: Matt Wierzbicki · Canonical: https://www.shadcndesign.com/blog/shadcn-ui-design-system-manager I'm launching DS Manager, a [design system manager for shadcn/ui](/ds-manager). It's a visual editor that puts every token and every component of your shadcn/ui design system on a canvas. You change it where you can see it, then install it in your project with one command. DS Manager is live at [manager.shadcndesign.com](https://manager.shadcndesign.com). It's in beta, and the full editor is free, no account needed. ## Why I built this tool AI made it easy to change a design system and hard to see what it changed. Claude or Cursor 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 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. ## What you can do with it DS Manager covers the whole system, from tokens to components: - **Start from a style you know.** Pick one of the 8 official shadcn/ui styles, the same ones as in my Figma kit, or paste a preset from ui.shadcn.com/create. Switch styles later and your token overrides stay. - **Edit design tokens on a canvas.** Color, typography, spacing, radius, shadow, icons and brand each get a page with live components. Light and dark are edited one at a time, and every text-on-surface pair shows its WCAG contrast ratio. - **Style any component.** Cmd-click any part of any of the 61 components and edit it for one variant, size or state, or all of them. You can add your own variants too. - **Ask the agent.** It works with the same controls you use, so every change shows on the canvas and undoes in one step. Paste a URL, a screenshot or a brand PDF and it matches your brand. - **Install with one command.** Publish your system as a [shadcn registry](/blog/shadcn-ui-registry-explained). One shadcn command adopts it in your Next.js project, another pulls each new publish. - **Share it with one link.** A share link opens every page, live, in light and dark. Turn on forking and others can copy the system into their own account. The components are built on Base UI from a pinned shadcn/ui release, and exports target Next.js with Tailwind v4, so what lands in your project is a Tailwind design system you own. ## Built with DS Manager Here are two systems I made in the editor. Each link opens the live system, every page in light and dark. - **[ShadLingo](https://manager.shadcndesign.com/s/-tyen4Cd8Ztcw0QBdMP9uQ)**, a Duolingo-inspired design system. - **[Medical](https://manager.shadcndesign.com/s/1NVDAN665ea1GSqigoeowA)**, a recent customer project. ## Free and Pro plans The editor runs in your browser and is free to use. Sign in with GitHub when you want your systems synced across devices, a published registry, share links or the agent. - **Free:** 3 systems, 1 published registry and $1 of AI usage. - **Pro:** 30 systems, 10 published registries, $5 of AI usage a month and your own AI API keys. It's $19 a month, $180 a year, or $249 for Lifetime as a one-time payment (Lifetime includes $5 of AI usage once). DS Manager is a separate app with its own plans, not part of any kit package, because the sync database and the agent's AI credits have running costs. The full comparison is on the [DS Manager page](/ds-manager). ## Still in beta It works today, and I use it for my own projects. Expect some rough edges and changes. Every Pro plan gets all future Pro features. ## What's next Next up: importing an existing shadcn/ui project into the editor, and a bridge to my [shadcn/ui kit for Figma](/). ## FAQ **Does it work in existing projects?** Yes, if the project uses shadcn/ui with Next.js and Tailwind v4. The adopt command switches the project's components.json to your style, base color and icon library, then reinstalls every component it finds with your version. Commit first, since it overwrites those files. **What styles does it cover?** All 8 official shadcn/ui styles and 61 components, built on Base UI. New to the idea? Start with [what a design system is](/blog/what-is-a-design-system-a-2025-guide). Try it, push it, and tell me what's missing. Write to me at [hi@shadcndesign.com](mailto:hi@shadcndesign.com), I read everything.