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.

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

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 and Variants and states. 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.