# 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.

Canonical: https://www.shadcndesign.com/docs/ds-manager

The app runs in the browser at [manager.shadcndesign.com](https://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.

<RichImage
  src="/docs/ds-manager/overview.webp"
  alt="The Overview page of a finished design system in DS Manager, with a dense demo of buttons, cards, forms and charts in the system's brand colors and fonts"
  width="1280"
  height="800"
  quality="90"
/>

## 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](/docs/ds-manager-publish).

## What you can edit

**Foundations.** Every token group has its own page with live components next to the controls:

- [Styles and icons](/docs/ds-manager-styles-icons): the eight shadcn/ui styles and the icon library
- [Colors and tokens](/docs/ds-manager-colors): light and dark values for every color token, plus your own tokens
- [Typography](/docs/ds-manager-typography): body, heading and mono fonts
- [Radius, spacing and shadow](/docs/ds-manager-radius-spacing-shadow): the three scales
- [Brand](/docs/ds-manager-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](/docs/ds-manager-components), then [Variants and states](/docs/ds-manager-variants). On Pro you can also add [custom components](/docs/ds-manager-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](/docs/ds-manager-problocks) and [Breakpoints](/docs/ds-manager-breakpoints).

**AI.** The [design agent](/docs/ds-manager-agent) edits your system with the same controls you use, so its changes show on the canvas and undo like your own. [Lint locks](/docs/ds-manager-lint) mark properties that agents must not change.

**Sharing.** A [share link](/docs/ds-manager-share) 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](/docs/ds-manager-quickstart). The [Interface tour](/docs/ds-manager-interface) 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](/docs/ds-manager-plans).