Interface tour
A tour of the DS Manager editor for your shadcn/ui design system: left navigation, live canvas, the Style, Agent, Utilities and Lint tabs, and shortcuts.
The DS Manager editor has four areas: the navigation on the left, the canvas in the middle, the right rail with its tabs, and the top bar. Both side rails can be resized by dragging their edge.
1. Left navigation
The Search field at the top filters the list by page or component name. It also matches the export names a component carries, so typing AccordionTrigger finds the Accordion page.
Below it, the list has four parts:
- Foundation pages: Overview, Style, Color, Typography, Radius, Shadow, Spacing, Icons and Brand. Two pages sit under Brand: ProBlocks, which holds the classes every block shares, and Lint, the policy page for Lint locks.
- Custom components: the components you added with the agent. On Pro, the + button next to the heading (Add new component) opens the agent to start one. See Custom components.
- Default Components: All components (a table of every component and whether you edited it), then one page for each of the 61 shadcn/ui components.
- ProBlocks: one page per block category. See ProBlocks.
The groups fold. Click a heading to collapse it, and the search field opens a folded group when it finds a match there.
Component Layers is pinned to the bottom of the rail. On a component page it shows the component's parts as a tree, and a dot marks the parts you edited. Click a row to select that part. Drag the line above the panel to make it taller or shorter.
2. Canvas
The canvas renders your system live with real shadcn/ui components. Every edit shows there as you make it.
The canvas has no Select or Interact mode to switch between:
- A plain click uses the component, so you can open a menu or type in an input.
⌘-click (Ctrl-click on Windows) selects the part under the pointer. The part lights up in Component Layers, and the right rail shows its styles.
Selection works on pages that show editable components: component pages, custom components and ProBlocks.
A component page has two views at the top right of the canvas:
- Demo shows the component in a designed composition, as shadcn/ui's create flow shows it.
- Matrix shows every value of every variant axis side by side.
A few components have no composition. For those, Demo is turned off and the matrix shows instead.
ProBlocks pages replace that switch with a preview size control: Desktop (1280px), Tablet (768px) and Mobile (390px). Desktop is the base. A style you set at Tablet or Mobile overrides the Desktop value at that size; see Breakpoints.
3. Right rail
The right rail has four tabs. Press 1 to 4 to switch between them, as long as you are not typing in a field. The keys also work while focus is inside the canvas.
| Key | Tab | What it holds |
|---|---|---|
1 | Style | On a foundation page, that page's controls (for example the color tokens on Color). On a component page, the styles of the selected part, in Layout, Typography, Appearance and Effects sections. |
2 | Agent | The design agent. The conversation stays open as you move between pages. |
3 | Utilities | Every Tailwind class of the current component, rule by rule and grouped by state. You can edit, add and remove classes here directly. |
4 | Lint | The lint locks for the selected part of the current component. Lock a property so agents can't change it. |
Utilities and Lint are per component, so they have content on component pages. Utilities also covers custom components and ProBlocks. Lint covers the built-in components only. Editing components explains the Style and Utilities tabs in detail.
4. Top bar
The middle of the bar acts on the open system:
- System switcher: shows the open system's name. Open it to switch systems or to choose New system…, Import preset…, Duplicate system or Manage systems….
- Undo and Redo: every edit, including the agent's, is one step in the history.
The right side holds:
- A save note. It reads Saving… or Unsaved while a change is on its way, and nothing once it is stored. If a save fails, Not saved appears next to the system's name, with the reason on hover.
- Share: create a read-only link to the system. See Share links and forks.
- Get code: publish the system and copy the install command. See Publish and install.
- The account menu: Search…, the light or dark theme switch, Settings…, Help and Sign out. Signed out, it offers Log in with Github instead.
Light and dark preview
DS Manager has one light/dark switch for the editor and the canvas together. Press D, or use Switch to dark theme in the account menu. On the Color page, the Light and Dark control under Editing moves the same switch, and your color edits land in the palette that is showing.
Command menu
Press ⌘K (Ctrl+K on Windows) to open the command menu. It lists every page, every component and the actions of the page you are on. Type to filter, then press Enter.
Keyboard shortcuts
Press ? or ⌘/ to see the list inside the app. All of these also work while focus is in the canvas.
| Shortcut | Action |
|---|---|
⌘Z | Undo |
⇧⌘Z | Redo |
⌘K | Command menu |
D | Switch between light and dark |
? or ⌘/ | Keyboard shortcuts |
1 to 4 | Style, Agent, Utilities and Lint tabs |
⌘-click | Select a part on the canvas |
On Windows, use Ctrl in place of ⌘.