# Styles and icons

> Pick one of the eight shadcn styles in DS Manager, see what each one locks, set menus, and choose a shadcn icons library with one stroke width.

Canonical: https://www.shadcndesign.com/docs/ds-manager-styles-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.

<RichImage
  src="/docs/ds-manager/styles.webp"
  alt="DS Manager Style page with the shadcn/ui cards demo on the canvas and the Style menu open in the Base style panel, listing Vega, Nova, Maia, Lyra, Mira, Luma, Sera and Rhea"
  width="899"
  height="405"
  quality="90"
/>

You also choose a base style when you create a system (see the [Quickstart](/docs/ds-manager-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.

| Style | Character | Radius |
| --- | --- | --- |
| Vega | Clean, neutral, and familiar | Free |
| Nova | Reduced padding and margins | Free |
| Maia | Rounded, with generous spacing | Free |
| Lyra | Boxy and sharp, for mono fonts | Square corners |
| Mira | Made for compact interfaces | Free |
| Luma | Fluid, luminous, and soft | Free |
| Sera | Editorial and typographic | Square corners |
| Rhea | Like Luma but compact | No large radius |

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](/docs/ds-manager-radius-spacing-shadow) 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](https://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.

<RichImage
  src="/docs/ds-manager/icons.webp"
  alt="DS Manager Icons page with the Library menu open on Lucide, Tabler Icons, HugeIcons, Phosphor Icons and Remix Icon, and the Lucide set drawn on the canvas"
  width="899"
  height="504"
  quality="90"
/>

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.

| Library | Package | License | Icon style |
| --- | --- | --- | --- |
| Lucide | `lucide-react` | ISC | Stroke |
| Tabler Icons | `@tabler/icons-react` | MIT | Stroke |
| HugeIcons | `@hugeicons/react`, `@hugeicons/core-free-icons` | MIT | Stroke |
| Phosphor Icons | `@phosphor-icons/react` | MIT | Weight |
| Remix Icon | `@remixicon/react` | Remix Icon License 1.0 | None |

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.