Foundations

Shadows

7 elevation tokens matching the shadcndesign.com Figma source. Composite (2-layer) shadows on sm/md/lg/xl create softer, more natural depth. Inputs and selects never carry a shadow — only border.

Updated Jul 8, 2026 by Leonardo Posada

Levels

shadow-2xs
--shadow-2xs

Hairline elevation. Sticky nav on scroll, subtle separators.

shadow-xs
--shadow-xs

Buttons with solid fill, elevated chips. Minimal elevation.

shadow-sm
--shadow-sm

Cards elevated within lists, toasts. Default card elevation.

shadow-md
--shadow-md

Hover / focus states on cards, mid-level elevation.

shadow-lg
--shadow-lg

Popovers, dropdowns, dialogs. Overlay elevation.

shadow-xl
--shadow-xl

Floating panels, high-elevation overlays.

shadow-2xl
--shadow-2xl

Modals with strong emphasis, side sheets.

Usage

Do
  • shadow-xs for primary action buttons (bg-primary).
  • shadow-sm for standalone cards. shadow-md on hover.
  • shadow-lg for popovers, dropdowns, dialogs.
  • shadow-2xl only for the most emphatic surfaces (blocking modals).
  • Combine shadow with border on cards to give weight without overdoing it.
Don't
  • Inputs and selects without shadow — flat border-input.
  • Don't use shadow to separate content within the same surface — use border.
  • Don't apply colored shadow (shadow-primary/20) without a strong reason.
  • Don't skip elevation levels — the composite layers on sm/md/lg/xl create the natural feel.

Important note

No shadows on form fields.
Inputs, selects and dropdown triggers never carry drop shadow — only border. This rule comes from the official Yuno DS and applies to every prototype.