Skip to content
Watch a live product demo 👀 See how Sanity powers richer commerce experiences
Sanity
  • Platform

    Sanity Studio

    Flexible editing environment

    APIs

    Connect to anything

    Content Lake

    Real-time database

    Watch product demo

    Features

    Real-time collaboration

    Fearlessly work with content

    Precise content querying

    Treat content as data with GROQ

    Localization

    Coherent messaging across territories

  • Use cases

    E-commerce

    Richer shopping experiences

    Marketing sites

    Control your story

    Products & services

    Innovate and automate

    Mobile apps

    Content backend for every OS

    View all

    Integrations

    Shopify
    Mux
    Vercel
    Netlify
    Algolia
    Cloudinary
    BigCommerce
    Commerce Layer
    Smartling
    Transifex
    View all
  • Learn

    Documentation
    API reference
    Guides
    GROQ cheat sheet
    Sanity UI
    Get started

    Build and share

    Templates
    Tools and plugins
    Schemas and snippets
    Project showcase
    Share your work
    Browse Exchange

    Frameworks

    React
    Vue
    Next.js
    Nuxt.js
    Svelte
    Remix
    Gatsby
    Astro
    Angular
    Eleventy
    View all
  • Discover

    Blog
    Resource library
    Agency partners
    Become a partner
    Technical support
    Talk to sales

    Case studies

    Puma

    Source of truth for all global markets

    Aether

    Unique digital shopping experience

    Morning Brew

    Omnichannel media distribution

    InVision

    Delivering exceptional customer experiences

    View all

    Popular guides

    Structured content
    Content modeling
    Headless CMS
    Headless SEO
    Static websites
    View all
  • Enterprise
  • Pricing
  • Log in
  • Contact sales
  • Get started
Contact salesGet started
Published December 18th 2020

Sanity UI: A composable, accessible, beautiful React component library

Build and style custom tools and components for Sanity Studio and beyond.

Marius Lundgård

Product designer at Sanity.io

Knut Melvær

Principal Developer Marketing Manager

Bryan Robinson

Former Developer Relations Specialist at Sanity

Building consistent user interfaces is hard. Sanity UI is a component library built with React for use in composing useful, beautiful, and accessible user interfaces. We're excited to announce early access to Sanity UI. For developers and designers, this means it has now become easier to craft custom inputs and tools that are consistent with Sanity Studio.

You can start with Sanity UI with the latest version of the studio. Go to the documentation site to learn more about its components and usage.

Sanity UI can be used outside of the Studio too. We used it ourselves to accelerate the full rewrite of the project and team dashboards (out in beta).

Why we built our own component library

Design systems enable teams of designers and developers to move quickly from prototyping in design tools to creating interactive interfaces for validation, testing, and use. They allow a team to encode UI choices into code and stay on the same page. Design systems also help keep things consistent and create great efficiencies when working on new features.

That’s the case for all design systems and component libraries. Why did we decide to build our own?

Every design system comes with the opinions of its creators. Making a system like this requires making choices as to what is most important. So, instead of relying on a third-party system to power our products and sites, we struck out to write one that codified our design thoughts.

Sanity UI is structured and composable

Like with content, the more you think through how your system is structured, the more flexible it becomes. With constraints come freedom. Structured content is at the heart of Sanity, so it only makes sense that the heart of our design system should be of highly composable, structured components.

These UI primitives allow for a high level of composition. Each primitive only brings exactly the props it needs to function and do its job. When you combine them, you can find unexpected and powerful patterns.

Sanity UI is accessibility-focused

In our research, it felt like many design systems were focused on making things look their best and then focusing on accessibility. For Sanity UI, we wanted to make sure we treated accessibility as a key feature and constraint for our designs. From default color schemes to carefully designed focus rings and states, accessibility is baked in.

Not every interaction comes with browser-defined accessibility. For interactive components, like dialogs, buttons, and autocomplete, we worked directly from the WAI-ARIA guidelines and patterns and tested each one using screen readers.

Sanity UI is themeable

Creating custom interfaces makes Sanity Studio powerful for teams to define out new workflows or ways of managing data. Borrowing from the JavaScript approach to content modeling in the Studio, the theming Sanity UI will work the same way. The interface is completely defined in JavaScript, including theming and CSS.

A common language

Design and development teams can often feel like they’re speaking different languages. When language differs, miscommunication can often be the outcome. At Sanity, we believe the best products and sites are created by the intersection of disciplines.

Sanity UI is built by both designers-who-code, as well as engineers that take great pride in a solid user experience. The UI primitives, components, and properties have all been named extremely carefully. The goal is to create a system where components are named to evoke terms designers understand at use, while giving logical aspects that are familiar to developers.

With a common language, common components, and a common goal, we think all things are possible.

Get started with early access

Sanity UI is a work in progress, but is already making feature development easier at Sanity. Our new team and project dashboard was written using it, and the entire Sanity Studio is currently being rewritten to take full advantage of Sanity UI. With all the benefits, we don't want to keep it to ourselves.

Starting today, we're providing early access. We've built a full documentation site, complete with interactive code playground, reference docs, and guides for getting started. We're also building new pattens and integrations to make amazing things possible inside and outside of Sanity Studio. We'd love to get any and all feedback. Join the Slack community and post in our #beta channel if you need help or want to provide insight into how you're using Sanity UI.

The next few months will be exciting times as we release new features around Sanity UI, including many new data bindings, components, patterns, and more.

Page content

  • Why we built our own component library
    • Sanity UI is structured and composable
    • Sanity UI is accessibility-focused
    • Sanity UI is themeable
  • A common language
  • Get started with early access

Product

Sanity StudioAPIsContent LakeSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Wordpress
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal
  • Sanity vs ButterCMS

Resources

DocumentationBlogResource libraryCase Studies
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Progressive Web Application
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
  • Next.js blog
  • Next.js personal website
  • Clean Next.js + Sanity app
  • Clean Remix + Sanity app
  • Clean SvelteKit + Sanity app
  • All Templates
  • Agency partners
  • Technology partners
  • Headless CMS 101
  • What is an API CMS
  • Static Sites 101
  • Headless Commerce 101
  • Headless SEO
  • Localization
  • GraphQL vs REST
  • Content as a Service
  • What is a DXP?
  • Typescript 101
  • Ecommerce SEO
  • React CMS
  • Next.JS CMS
  • CMS for Shopify
  • Content platform
  • Multilingual CMS
  • Static Site CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS
  • CMS for apps
  • Remix CMS

Company

Contact SalesEnterpriseCareersTerms of ServicePrivacy PolicyAccessibility Statement

Stay connected

  • GitHub
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS
  • Newsletter
©Sanity 2023