Why Sanity UI?

There are tons of React UI libraries out there. So why did we build a new one, and why should you care?

Built for composition  

Sanity UI consists mainly of a set of UI primitives. The purpose of these primitives is to provide designers and developers with a set of simple, ergonomic and highly composable building blocks – so they can build more and worry less.

Typographic primitives  

There are four typographic primitives in Sanity UI. These primitives share many capabilities, although – as their naming and visual treatment suggests – they are intended for different purposes.

Layout primitives  

Sanity UI features a set of basic building blocks for creating layouts: Box, Container, Grid, Flex, Inline and Stack.

Interactive primitives  

Most apps needs some degree of input and interactive elements (especially so at Sanity). That's why Sanity UI has basic interactive primitives built-in: Button, Checkbox, Radio, Select, Switch, TextArea and TextInput.

Other primitives  

Sanity UI also comes with various other elements, such as Avatar, Badge, KBD, Popover, Spinner and Tooltip.

Accessibility as constraint  

Instead of visual design working against accessibility, Sanity UI is shaped with accessibility as a design constraint.

Carefully designed focus rings  

Focus rings are helpful for all people, whether you use the keyboard or not. Sanity UI even has theming configuration specifically for focus rings.

Keyboard navigation  

Keyboard navigation is another aspect that’s useful whether you have visual impairment or not. It enables both expert users to be even more effective, as well as people who cannot use the mouse.

Accessible components  

  • Accessible Dialog (follows WAI-ARIA design pattern)
  • Accessible MenuButton (follows WAI-ARIA)
  • Accessible Autocomplete (based on best practices and tested using screen readers)

Theming with JavaScript  

Sanity uses JavaScript for all things on the client side – schemas, configuration, plugins, apps. With Sanity UI, the interface is also completely defined in JavaScript (including theming and CSS).

TypeScript support  

TypeScript adds safety and developer experience features like code hinting.

Enables pixel-perfection  

As a design system strictly based on constraints, scales and themeable values, Sanity UI provides a solid and nearly breakproof framework for implementing visual design.

E2E testing  

Test coverage with Cypress, to avoid regressions between releases.

Updated May 26, 2021 @ 03:26

Made withby folks at