🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup
Back to changelog

Major visual update to Sanity UI

Installation and upgrading

To install or upgrade Sanity UI:

npm install @sanity/ui@latest

✨ Highlights

This 2.0 release of Sanity UI is a major visual update that introduces:

  • Updated component styles and defaults
  • New color palette changes (via @sanity/color)
  • Optional animation support for Popover, Tooltip and MenuButton components
  • Updated font stack (defaulting to Inter, if available) and font metrics
  • Various under-the-hood improvements

For plugin authors: you can continue to use Sanity UI 1.x without issue, though we strongly recommend upgrading to 2.x to ensure visual consistency if you're targeting Sanity Studio 3.24.x and higher.



  • add buildTheme function (b09226e)
  • add animate support to popovers, add custom origin middleware and animate from reference origin (#1194) (9ee54ba)
  • add inter to default (non-code) font stack (23baaa6)
  • add radius='full' support and supporting stories (#1150) (e9adb5b)
  • allow tooltip arrows to be hidden (22c6f73)
  • animations: add animations to dialog and tooltips. (#1187) (6cb872f)
  • avatar: implement avatar sizes (8deb370)
  • button: change focus ring width (#1158) (b4b14cc)
  • buttons: add support for width=fill prop (#1175) (a2006cd)
  • button: update defaults (e213d90)
  • button: update styles to match facelift designs (#1142) (836a506), closes #1143
  • cssvars: replace color theming through styled-components for css vars. (#1152) (bbb78e3)
  • default-theme: add support for component-level focus ring configuration (#1140) (eee10a1), closes #1141
  • default-theme: update color palette (#1137) (e01d0ad)
  • dialog: update styles and add corresponding stories (#1155) (5741633), closes #1156 #1161
  • figma: initialize figma plugin (c82b4ca)
  • force semibold on dialog headers (6303677)
  • introduce '@sanity/ui/theme' export (b38f35a)
  • kbd: update primitive style, minor storybook cleanup (#1157) (b0a4082)
  • menu: update menu and menu items styles (#1166) (c2e5ebc)
  • reduce autocomplete radii (db3484a)
  • reduce default button focus width (2ff2b63)
  • release 2.0 (0ac1c8f)
  • remove dialog header + footer borders (dd826ad)
  • tab: update styles and add corresponding stories (#1159) (2988785)
  • theme: add avatar size (9129e6f)
  • theme: add label font size (abb9bb2)
  • theme: parse parse compile color mix (2d049be)
  • tooltip: update styles and corresponding stories (#1160) (34bf88d)
  • tweak default avatar image sizes, fix avatar arrow stacking context (1c5348d)
  • update avatar styles (#1183) (f7d4b94)
  • update badge background colors (70b669c)
  • update default avatar sizes (a288f75)
  • update KBD styles and default props (7c837a0)
  • update select component icon (7366ef0)
  • update toast styles (0f89cc6)
  • update various input styles (#1147) (fe53370), closes #1144 #1145 #1146

Bug Fixes

  • add stretch fallbacks on card + selectable button styles, add mozilla fallback (981194d)
  • adjust colors (0e4cabe)
  • avatar: use label font (27e655d)
  • badge: set color using variable (ddeb0d8)
  • badge: use regular font weight (b72b338)
  • build: update keywords (74cfd4d)
  • build: update node version (ce69f9d)
  • build: update node version (e54707c)
  • button: button with right icon is pushed to the end (#1195) (ad87933)
  • button: default mode (e7e3d32)
  • button: render styles (35e0a91)
  • button: set vertical alignment to fix unwanted margin (4d7851f)
  • card: add color backdrop variable (dbcdccd)
  • card: only set focus ring variable when :focus-visible (757a0d0)
  • checkbox: adjust colors (7f2e7d3)
  • core: add font-weight for strong font in heading (#1204) (6c430b3)
  • core: improve defaults (8d4d5d9)
  • correctly prefix unstable props (4e30a56)
  • darken backdrop color in light mode (a12a0df)
  • deps: add react-is peer dependency (a9549a8)
  • deps: update @sanity/color (a357c77)
  • deps: update @sanity/color (2207abf)
  • deps: update @sanity/color (185d5a7)
  • deps: update @sanity/color (deeaed1)
  • deps: upgrade @sanity/color (780ee0b)
  • dialog: adjust padding (c4f7858)
  • dialog: fix padding (5ca95c5)
  • dialog: update dialog design (#1169) (477f495)
  • do not scale icon strokes (0740c6b)
  • ensure button primitives use the correct default mode (ccdb59e)
  • facelift: add unstableDisableFocusRing prop to text inputs (#1184) (6ded803)
  • figma: export muted bg (0a3a9e2)
  • figma: update plugin (5229ace)
  • improve scale transitions for non-retina screens (#1200) (3e52721)
  • kbd: vertical alignment (cc8bc61)
  • menu-button: close menus containing selected items when re-clicking the menu button (#1193) (7b60c32)
  • peer-deps: remove react-is from peer deps (49a832c)
  • popover: disable arrow by default (9c1548e)
  • remove unknown prop "animate" console warning (aaa353c)
  • remove crossfade pollution on fade in transitions (#1201) (591cea3)
  • remove unused focusRing from legacy ThemeColor interface (#1207) (2a4d9b6)
  • revert changes for css variables (#1172) (7cea0a3)
  • revert dialog padding, include margins, add hidden close button story (d0af39d)
  • revert rounded border style in tabs (a668b11)
  • select: default to radius=2 (8ac48c2)
  • simplify dialog header padding (2c5fee1)
  • switch: adjust handle shadow (604ac42)
  • switch: improve checked read-only state (6320d59)
  • text-input: improve styles (eacee35)
  • theme: add resolved key to v2 theme (#1203) (c81bc6d)
  • theme: adjust syntax colors (a264240)
  • theme: adjust vertical trimming (a00a989)
  • theme: improve backwards compatibility (01da5eb)
  • theme: improve backwards compatibility (54c80ba)
  • theme: improve color tokens (27bea7d)
  • theme: improve colors (6eed99d)
  • theme: increase switch padding (e99251d)
  • theme: re-introduce base focusRing value and mark as deprecated (#1162) (1fc3106)
  • theme: restore selectable in v0 theme (#1206) (98447fe)
  • theme: support 0 opacity (ce9929e)
  • theme: tweak colors (6bbfa8a)
  • theme: update avatar and badge ts descriptions, mark them as internal (ec329df)
  • theme: update container width size (#1198) (9ba891e)
  • tooltip: disable arrow by default (fabcbde)
  • tooltips: fixes for TooltipDelayGroup, onClose and nested (#1186) (345e887)
  • tooltips: update default fallback placements (#1185) (117fe85)
  • tree: default font size and padding (8c279b4)
  • tweak default tooltip motion values (608f66a)
  • update default values for <Badge> (aaa5708)
  • update default values for <MenuItem>, <TextArea> and <TextInput> (82dc8d2)
  • update legacy focusRing values (cc1c7be)
  • update types [skip ci] (4725af4)
  • vars: minimum implementation for colors legacy support (#1167) (aca0675)

Documentation affected by this release

Published January 30, 2024