@sanity/ui

@sanity/ui is the React component library and design system that powers Sanity Studio, providing layout primitives (Box, Flex, Grid, Stack), form controls (Button, TextInput, Select, Checkbox), feedback components (Toast, Spinner, Dialog), and a ThemeProvider/buildTheme API for customizing colors, spacing, and typography via design tokens.

Built on styled-components with React 18/19 support, it’s organized as a packages/ui workspace inside the sanity-io/ui monorepo (managed with Changesets and pnpm workspaces), and is consumed both internally by Sanity Studio and externally by developers building custom Studio plugins, structure tool panes, and input components that need to match Sanity’s visual language.

What You Get

• Layout primitives: Box, Flex, Grid, Stack, Container for responsive layout composition
• Form controls: Button, TextInput, Select, Checkbox, Switch, Radio with consistent styling and accessibility
• Feedback components: Toast, Dialog, Popover, Spinner, Tooltip, Badge
• ThemeProvider and buildTheme() for customizing color, spacing, radius, and typography tokens
• Hooks and utilities under src/core/hooks and src/core/utils for focus management, media queries, and layout observers

Common Use Cases

• Building custom Sanity Studio plugins or input components that visually match the core Studio UI
• Customizing the structure tool or desk panes in a Sanity Studio configuration with consistent primitives
• Theming a Studio deployment with brand colors and typography via buildTheme()
• Building standalone internal tools that want a polished, accessible component set without building one from scratch

Under The Hood

Architecture — The published package lives at packages/ui inside the sanity-io/ui pnpm workspace monorepo (alongside a private figma-plugin-sanity-ui package); its source is organized under src/core/ into primitives, components, theme, styles, hooks, middleware, and observers directories, separating low-level styled-components primitives from composed UI components and the theming layer that consumes them. Tech Stack — TypeScript/React (18 and 19 supported via broad peer-dependency ranges) built on styled-components ^5.2/^6 for CSS-in-JS, with react-is as an additional peer dependency for component type-checking; the monorepo uses pnpm workspaces with a catalog: dependency-version mechanism, Changesets for release management, and Vite/Vitest for the dev/test toolchain. Code Quality — 42+ test files across the packages/ui source tree exercise components, hooks, and theme utilities via Vitest; the monorepo’s pnpm-workspace.yaml pins shared dependency versions through a catalog to prevent version drift between apps/docs and packages/ui, and npm Trusted Publishing (OIDC) is used for the release workflow instead of long-lived tokens. API Design — Components follow a consistent, composable primitive-first pattern (Box/Flex/Stack as layout building blocks that other components are built from), and ThemeProvider/buildTheme() centralize all visual customization in one place rather than requiring per-component style overrides.