# Quickstart

> Create a shadcn design system in DS Manager, change a color and a font, publish it as a registry and install it in your project with one command.

Canonical: https://www.shadcndesign.com/docs/ds-manager-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](https://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

<RichImage
  src="/docs/ds-manager/quickstart-new-system.webp"
  alt="The Create your first design system dialog in DS Manager with the New and Preset tabs, a Name field, and the Base style and Base color dropdowns"
  width="376"
  height="399"
  quality="90"
/>

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](https://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](/docs/ds-manager-colors) 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](/docs/ds-manager-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

<RichImage
  src="/docs/ds-manager/publish-install.webp"
  alt="The Get code dialog in DS Manager on the Install tab, showing the package manager picker and the shadcn init command with the registry link"
  width="516"
  height="329"
  quality="90"
/>

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:

```bash
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.

<Callout type="warning">
In an existing project, commit your work before you run the command. It overwrites `components.json` and the shadcn/ui component files, and it writes your tokens into `globals.css`.
</Callout>

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](/docs/ds-manager-publish) covers unpublishing, installing single ProBlocks and the other tabs of the dialog.