Radius, spacing and 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

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:

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 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.