# Radius, spacing and shadow

> Set the radius scale, the spacing base unit and the shadow ramp of your shadcn/ui design system, and see which shadcn styles lock the radius.

Canonical: https://www.shadcndesign.com/docs/ds-manager-radius-spacing-shadow

Three pages set the scales every component reads: **Radius** for corners, **Spacing** for the base unit behind padding and gaps, and **Shadow** for elevation. Each one edits a seed value and derives the rest of its scale from it.

On all three pages, the **Docs** and **Preview** switch above the canvas picks what you look at: **Docs** is the page's own canvas, **Preview** is the cards demo from the Style page, restyled live as you edit.

## Radius

<RichImage
  src="/docs/ds-manager/radius.webp"
  alt="DS Manager Radius page with the Presets control, the Fine tune radius field and the Derived steps list on the right"
  width="899"
  height="619"
  quality="90"
/>

1. Open **Radius** in the left nav.
2. Under **Presets**, pick one of the four corner scales shadcn's create flow offers: **None** (0), **Small** (0.45rem), **Medium** (0.625rem) or **Large** (0.875rem).
3. To go between presets, use **Radius** under **Fine tune**. It takes 0 to 3rem. You can type `12px` or `0.75` and it reads as rem, or drag the label to scrub.

**Derived steps** lists `--radius-sm` through `--radius-4xl`. Each one is the base radius times a fixed multiplier until you edit it:

| Step | sm | md | lg | xl | 2xl | 3xl | 4xl |
| --- | --- | --- | --- | --- | --- | --- | --- |
| Multiplier | ×0.6 | ×0.8 | ×1 | ×1.4 | ×1.8 | ×2.2 | ×2.6 |

Type a value into a step to pin it. A dot marks the pinned step; click it to make the step follow the base again.

In the published `globals.css`, `--radius` sits in `:root` and the steps sit in `@theme inline` as `calc(var(--radius) * 0.6)` and so on. If you later override `--radius` in your project, the whole scale moves with it. A pinned step publishes as a fixed length.

### Styles that lock radius

Three of the eight [shadcn styles](/docs/ds-manager-styles-icons) constrain the radius:

- **Lyra** and **Sera** force square corners. Their rules are drawn for a zero radius, so DS Manager pins `--radius` to 0 and the whole Radius page is read-only. The page header reads "Locked by the lyra style: 0" (or sera). Switch style to edit it.
- **Rhea** rejects the **Large** preset. Its segment is disabled and its tooltip says "rhea does not allow a large radius." Everything else on the page works.

DS Manager keeps the radius you set while a locked style is active, so it comes back when you switch to a style without the lock.

## Spacing

1. Open **Spacing** in the left nav.
2. Under **Base unit**, change **Spacing**. It sets `--spacing`, from 0.1 to 0.5rem. The default is 0.25rem, Tailwind's own.

A change here reaches every component. In Tailwind v4 every spacing utility is `calc(var(--spacing) * n)`, so padding, gaps, margins and fixed sizes all scale together, including inside components you have not opened. Change it early, in small steps, and check the Overview page before you commit to it.

The **Density** panel is a read-only reference. It draws the multiples components actually use, ×1, ×2, ×4, ×6 and ×8, with each one's size in rem and px at the current base. For scale: a default button is ×3 in padding terms, a card pads at ×6, and the gap between form fields is ×4.

`--spacing` publishes in `@theme inline`. To go back to the default, click the dot beside **Spacing** or run **Reset the spacing base** from the command menu.

## Shadow

A new system has no shadow seed. The page says "No seed set. The preview is using Tailwind's default elevation", and your published system keeps Tailwind's stock shadows.

1. Open **Shadow** in the left nav.
2. In the **Seed** panel, set the shadow's **Color**. The trailing cell of the color field is the opacity every step is multiplied from.
3. Set **Blur** (0 to 40px), **Spread** (-10 to 20px), **Offset X** and **Offset Y** (each -20 to 20px).

DS Manager multiplies that one shadow into the whole ramp, `--shadow-2xs` through `--shadow-2xl`.

### The shadow ramp

The **Ramp** panel lists the seven steps: `2xs`, `xs`, `sm`, `md`, `lg`, `xl` and `2xl`. Each follows the seed until you edit its layers. Click a step's edit button to open its layer editor:

- **Type**: **Drop** or **Inner**.
- **X / Y** and **Blur / Spread** in px.
- **Color**, with its own opacity.
- **Add layer** for a stacked shadow, with arrows to reorder layers.

A dot marks an edited step; click it to make the step follow the seed again. Clearing the seed (the dot beside **Color**, or **Clear the shadow seed** in the command menu) clears the step edits too.

Once you set a seed, every step publishes as a literal `box-shadow` value in `:root`, shared by light and dark. `@theme inline` maps Tailwind's `shadow-*` utilities to those variables, so `shadow-md` in your code uses your ramp.
