Quickstart

This guide takes you from an empty browser tab to your own shadcn/ui design system installed in a project. It takes five steps. You need a GitHub account for the publish step and a Next.js project with Tailwind v4 for the install.

1. Open the app

Go to manager.shadcndesign.com in a desktop browser. On your first visit the app opens the Create your first design system dialog. You don't need an account yet.

2. Create a system

The dialog has two tabs. Pick one:

• New starts from a shadcn/ui style. Type a Name, pick a Base style (one of the eight shadcn/ui styles, Nova by default) and a Base color (Neutral, Stone, Zinc, Mauve, Olive, Mist or Taupe).
• Preset starts from a preset code made on ui.shadcn.com/create. Paste the code into Preset code. When the code is valid, a line under the field lists what it sets: style, base color, accent, font, radius and icon library.

Click Create system. The Overview page opens with your system on the canvas. Everything you picked here stays editable later.

To make more systems later, open the system switcher in the top bar and choose New system… or Import preset….

3. Change a color and a font

Start with the brand color:

1. Open Color in the left navigation.
2. Under Editing in the right rail, pick Light or Dark. Your color edits land in that palette.
3. In the Primary, secondary, muted, accent section, click the swatch next to primary and choose a new color.

The components that use primary update on the canvas while you pick. Switch Editing to the other palette to set its value as well. Colors and tokens covers the full picker.

Then change a font:

1. Open Typography in the left navigation.
2. Under Fonts, click the Heading dropdown.
3. Search for a Google font and click it.

The headings on the canvas switch to the new font right away. You can also upload a font file or add one from a URL; see Typography.

Made a change you don't like? Press ⌘Z (Ctrl+Z on Windows) to undo it.

4. Publish

1. Click Get code at the top right and open the Publish tab.
2. If you are signed out, click Log in with Github. If you created systems before signing in, DS Manager offers to bring them into your account. Import the one you just made.
3. Click Publish.

DS Manager compiles your system and serves it as a shadcn/ui registry under your account. The Free plan includes one published registry.

5. Install it in your project

Open the Install tab of the same dialog. Pick your package manager (pnpm, npm, yarn or bun) and copy the command. With pnpm it looks like this:

pnpm dlx shadcn@latest init --preset https://manager.shadcndesign.com/u/<your-id>/r/<system>/<system>.json --force --no-reinstall

Copy the real command from the dialog, since the link contains your account id and the system's name. Run it in the root of your project. The command sets up components.json, writes your tokens into globals.css and installs every component with your edits.

The same command works in a project that already uses shadcn/ui. There it replaces the shadcn/ui components already in the project with your versions and leaves your own files alone.

After the next round of edits, click Publish again in the Publish tab and run the same command to update the project. Publish and install covers unpublishing, installing single ProBlocks and the other tabs of the dialog.