# 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. Canonical: https://www.shadcndesign.com/docs/ds-manager-interface 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](/docs/ds-manager-lint). - **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](/docs/ds-manager-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](/docs/ds-manager-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](/docs/ds-manager-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](/docs/ds-manager-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](/docs/ds-manager-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](/docs/ds-manager-share). - **Get code**: publish the system and copy the install command. See [Publish and install](/docs/ds-manager-publish). - 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 `⌘`.