# Custom components

> Build custom shadcn/ui components with the DS Manager agent, edit them like built-in ones and publish them in your shadcn registry. Pro feature.

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

Custom components are components shadcn/ui does not ship, such as a color picker or a product tour. You describe one to the agent, it writes the code, and the component gets the same page as a Button: matrix, demo, Style and Utilities tabs, and layer tree.

<DocsCta
  title="Custom components are part of Pro"
  description="Pro and Lifetime accounts can build, change and fix custom components with the agent."
  primaryLabel="See plans"
  primaryHref="/ds-manager#pricing"
/>

## Building a component

1. In the left nav, click the **+** (**Add new component**) at the right of the **Custom components** heading. With no components yet, you can also click **Start prompting** in the group.
2. The Agent tab opens a new chat with "Build a custom component: " typed in. Finish the sentence, for example "a color picker with a hex input and recent colors", and send it.
3. The agent builds the best version it can without asking questions first. Its reply names the main choices it made.
4. The component appears under **Custom components** in the left nav, and in the components table with a **Custom** tag.

If the result is not what you wanted, keep talking to the agent in the same chat, or use **Change with the agent** later (see below).

<RichImage
  src="/docs/ds-manager/custom-component.webp"
  alt="The Rating custom component in DS Manager, listed under Custom components in the left nav, with its sm, default and lg sizes in the matrix on the canvas"
  width="899"
  height="470"
  quality="90"
/>

## House rules

The agent writes real React and TypeScript, and DS Manager checks the code against a set of rules before saving it:

- Imports are limited to React, your system's shadcn/ui components and icons, `class-variance-authority` and a short list of approved packages (`react-colorful` and `@floating-ui/react-dom`), each at a pinned version.
- Variants and sizes use cva the way the built-in components do, so you can edit them in the Variant and Size menus.
- Every style lives in editable rules. The code only carries class names that point at them, which is why the Style tab works on the component.
- Colors come from your theme. Palette shades like `bg-blue-500` and literal colors like `bg-[#f00]` are refused.
- The code can't reach outside the component: no network requests, no storage, no scripts, no iframes.

If the check fails, the agent fixes the code and tries again. After four failed attempts, the component is saved as a draft.

## Editing a custom component

A custom component's page works like any other component page. See [Editing components](/docs/ds-manager-components) and [Variants and states](/docs/ds-manager-variants). The canvas opens on **Demo**, which the agent writes with every build, and **Matrix** shows its variants and sizes.

Edits on this page change only the custom component's own rules. When it uses a built-in component inside, such as a Popover or an Input, that part is read-only here: edit it on its own page, and the change reaches the custom component too.

### Renaming

The **Name** field is the first row of the Style tab.

1. Click the field and type the new name.
2. Press Enter.

The page address follows the name: `Line Chart` lives at `/components/custom/line-chart`. Old addresses still open the page. A name already used by another custom component or a built-in one is refused, with the reason in red under the field.

The code keeps the name it was built under, so projects that installed the component keep importing it. When the two names differ, a **Code** row under **Name** shows the code's name.

### Component menu

The three-dot button in the rail's title row opens the component menu:

- **Reset changes** puts every edited rule of the component back to what the agent built, in one undo step. It shows the count, such as "Reset changes (3 rules)".
- **Change with the agent** opens a new chat with "Change the Line Chart component: " typed in, for you to finish.
- **Delete component** asks first: "Its style edits and added variants go with it, and the next publish drops it from your registry. You can undo this."

## Drafts

A component that failed its checks is a draft. It has a **Draft** badge in the left nav and the components table, and a banner above the canvas: "Draft. This component failed its checks, so it is not published."

1. Click **Show the problems** to see each problem with its file and line.
2. Click **Fix with the agent**. The agent reads the component, fixes what the check reported and saves it.

A draft stays in your system but is skipped when you publish.

## Publishing

When you publish, each custom component that passed its checks goes into your registry as its own item, next to the built-in components, and installs the same way they do. See [Publish and install](/docs/ds-manager-publish).

<Callout type="info">
  Share links do not show custom components. The Share popover says "Custom
  components are not shown in shared links." for a system that has some.
</Callout>