Styles and icons

A style is the rule set every component in your system is built from. DS Manager offers the 8 official shadcn/ui styles, and you can switch between them at any time. The Icons page picks the one icon library the whole system uses.

Pick a style

1. Open Style in the left nav.
2. In the right panel, under Base style, open the Style dropdown.
3. Pick a style. The canvas redraws the cards demo from shadcn/ui's create page in that style, with every token you have set.

You also choose a base style when you create a system (see the Quickstart). To switch from any page, open the command menu and run Set style: Nova (or any other style name).

The eight shadcn styles

Listed in dropdown order, with shadcn/ui's own descriptions.

The dropdown prints the radius rule under the style's name, so you see it before you pick: Square corners on Lyra and Sera, No large radius on Rhea.

What a style changes and what it locks

Each style is a different rule set for the same components: heights, padding, borders and type sizes inside every component. Your token overrides survive the switch, so your colors, fonts, spacing and shadow stay as you set them.

Three styles constrain the radius:

• Lyra and Sera are drawn for a zero radius. DS Manager pins --radius to 0 and the Radius page turns read-only.
• Rhea rejects the Large radius preset. Every other radius stays editable.

DS Manager keeps the radius you set, applies the style's constraint on top, and gives your radius back when you switch to a style without one. The Radius page is where the lock shows.

Switching style later

Component edits are recorded against the current style's rules. When you switch, an edit that replaces or removes a utility the new style's rule does not have has nothing to apply to. DS Manager counts those and says so in a toast, for example: "3 edits do not apply to sera and are not shown; undo brings the previous style back." Undo (⌘Z) restores the previous style and the edits with it.

Menu settings

Two more rows sit under Style in the Base style panel.

Menu controls dropdowns, selects, context menus and menubars:

• Default follows the page's theme.
• Inverted flips it, so a light page gets a dark menu.
• Translucent puts the menu on a blurred, see-through surface.
• Inverted glass is inverted and translucent.

The two inverted options are disabled while the canvas shows dark mode, with the note "Only differs on a light page". An inverted menu on a page that is already dark looks the same as Default.

Menu item sets the highlight on the hovered item:

• Subtle keeps the base color's own --accent.
• Bold points --accent at --primary, the way shadcn's create flow does.

Translucent menus ignore --accent, so Menu item has no visible effect with them.

Import a preset

The Import preset panel on the Style page takes a preset from ui.shadcn.com/create.

1. Paste into Preset code. It accepts a bare code (b0), a --preset b0 flag, or the whole CLI line.
2. Click Apply.

Importing replaces the style, base color, accent, fonts, radius and icon library in one undoable step. Your own token overrides and custom tokens are kept.

Pick an icon library

1. Open Icons in the left nav.
2. Pick a set from the Library dropdown.

The whole system uses one icon set. When you publish, the install adds that library's package and rewrites every icon import in your components to it. The canvas card footer names the package and its license.

The command menu has Set icon library: Lucide and one command for each of the other libraries.

Icon style

The Icon style panel sets one weight for every icon in the system. The control follows the library:

• Stroke (Lucide, Tabler Icons, HugeIcons): a slider from 1 to 2.5 in steps of 0.25. The default is 2. It exports as strokeWidth on each icon, so your installed components carry it too.
• Weight (Phosphor Icons): Thin, Light, Regular, Bold, Fill or Duotone. The default is Regular. It exports as weight on each icon.
• Remix Icon ships filled outlines with no weight axis, so the panel reads "No weight axis."

DS Manager stores the stroke width and the Phosphor weight separately. Switch to Phosphor and back to Lucide, and your stroke width is still there. A dot beside Stroke or Weight means you changed it; click the dot to go back to the default.