DS Manager
DS Manager is a design system manager for shadcn/ui. Edit tokens and components on a live canvas, then install your shadcn design system with one command.
The app runs in the browser at manager.shadcndesign.com. Every edit shows on real shadcn/ui components, and when you publish, your project gets the same system through a shadcn/ui registry.
Who it is for
DS Manager is built for designers and design engineers who own a shadcn/ui design system, for a client project or for their own product. You see every change on real components before it reaches code, and the code your project installs is the same system you edited.
What you end up with
When you publish a system, DS Manager serves it as a shadcn/ui registry with its own install command. Running that command in a Next.js project with Tailwind v4 does three things:
- writes your tokens into
globals.css - sets your style, base color and icon library in
components.json - installs every component with your edits applied
The components are built on Base UI from a pinned shadcn/ui release. Publish again after more edits, run the same command, and the project picks up the changes. See Publish and install.
What you can edit
Foundations. Every token group has its own page with live components next to the controls:
- Styles and icons: the eight shadcn/ui styles and the icon library
- Colors and tokens: light and dark values for every color token, plus your own tokens
- Typography: body, heading and mono fonts
- Radius, spacing and shadow: the three scales
- Brand: logos and favicon
Components. All 61 shadcn/ui components are in the left navigation. You can style any part of a component for one variant, size or state, or for all of them. Start with Editing components, then Variants and states. On Pro you can also add custom components that shadcn/ui does not ship.
ProBlocks. 205 ready-made page sections in 24 categories, styled by your system. Free includes the first block of each category. They preview at desktop, tablet and mobile widths, and you can style each size on its own. See ProBlocks and Breakpoints.
AI. The design agent edits your system with the same controls you use, so its changes show on the canvas and undo like your own. Lint locks mark properties that agents must not change.
Sharing. A share link shows your system read-only to anyone who has it, and you can let viewers fork a copy into their own account.
For a first run through the app, follow the Quickstart. The Interface tour explains the editor layout and shortcuts.
Using it without an account
You can open the editor and start working without signing in. Systems you create while signed out are stored only in that browser. The foundation, component and ProBlocks pages all work, and from Get code you can copy the compiled globals.css and paste it into a project yourself.
These features need an account:
- syncing your systems across devices
- publishing a registry and getting the install command
- share links and forking
- the design agent
Signing in
DS Manager signs you in with GitHub only. Use Log in with Github in the account menu at the top right, or in the Get code dialog, the Share popover or the Agent tab.
The first time you sign in with systems already in that browser, DS Manager offers to Bring your local systems into your account. The import button names the count, such as Import 2 systems. It uploads up to three, newest first, and any older ones stay in the browser. Start fresh leaves them all in the browser. After that, your systems live in your account and open on any device.
The editor needs a desktop browser. On a screen narrower than 768px, DS Manager asks you to open it on your computer.
Plans
The Free plan includes 3 systems, 1 published registry and $1 of AI usage. Pro raises the limits to 30 systems and 10 registries, adds $5 of AI usage a month ($5 once on Lifetime), and unlocks custom components, all ProBlocks and your own AI API keys. See Plans and limits.