Elevation
Shadows, blur and the focus ring.
Shadows
The kit defines seven shadows. They match Tailwind's defaults by value, though not always by name — the v3-to-v4 rename applies here too.
| Figma | Tailwind v4 | Used by |
|---|---|---|
shadow-sm | shadow-xs | Active tab |
shadow | shadow-sm | — |
shadow-md | shadow-md | Popover, tooltip, menu, command, select menu, chart tooltip |
shadow-lg | shadow-lg | Dialog, sheet, drawer, sonner, switch thumb |
shadow-xl | shadow-xl | — |
shadow-2xl | shadow-2xl | — |
shadow-inner | inset-shadow-* | — |
Cards deliberately have no shadow; a 1px border defines them instead.
Blur
| Figma | Value |
|---|---|
blur-sm | 4px |
blur | 8px |
blur-md | 12px |
blur-lg | 16px |
blur-xl | 24px |
blur-2xl | 40px |
blur-3xl | 64px |
Dialog and sheet overlays use a small backdrop blur over black at 10%.
Focus ring
Text-entry fields and every other control are treated differently.
Fields: the border changes color
Input, Textarea, Select, NativeSelect, InputGroup, InputOTP and the Combobox
field have no ring. On focus their own 1px border turns primary, or
destructive when the field is invalid, so nothing grows or shifts:
focus-visible:border-primary
aria-invalid:focus-visible:border-destructiveA 1px color change is a weaker focus cue than a ring. It falls short of the WCAG 2.2 AAA guideline for focus appearance, and that is accepted for now.
Everything else: one ring
Buttons, checkboxes, radios, switches, tabs, toggles, sliders and links use:
focus-visible:ring-2
focus-visible:ring-primary
focus-visible:ring-offset-2
focus-visible:ring-offset-backgroundDestructive and invalid controls swap ring-primary for ring-destructive.
Inside the sidebar the ring becomes ring-sidebar-ring with a
ring-offset-sidebar offset, so it stays visible on the sidebar surface.
In Figma this is the focus ring/2px effect style: a 4px spread in the ring
color with a 2px spread in the background color on top, which is exactly what
ring-2 plus ring-offset-2 produces.