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?
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.
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.
Sanity UI features a set of basic building blocks for creating layouts:
Box, Container, Grid, Flex, Inline and Stack.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.Sanity UI also comes with various other elements, such as
Avatar, Badge, KBD, Popover, Spinner and Tooltip.Instead of visual design working against accessibility, Sanity UI is shaped with accessibility as a design constraint.
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 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
Dialog (follows WAI-ARIA design pattern)Accessible
MenuButton (follows WAI-ARIA)Accessible
Autocomplete (based on best practices and tested using screen readers)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 adds safety and developer experience features like code hinting.
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.
Test coverage with Cypress, to avoid regressions between releases.