Getting started with Sanity UI

Install Sanity UI – an ergonomic React library for quickly building and prototyping accessible web apps:

npm install @sanity/ui

# Install peer dependencies 
npm install react react-dom styled-components

Basic usage

Note: @sanity/ui only comes with one theme right now – studioTheme – which is built for use in Sanity products.

import {
  Card,
  Heading,
  studioTheme,
  ThemeProvider
} from '@sanity/ui'
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

function App () {
  return (
    <ThemeProvider theme={studioTheme}>
      <Card padding={4}>
        <Heading>Welcome to Sanity UI</Heading>
      </Card>
    </ThemeProvider>
  )
}

Try out the various components in the JSX playground or learn how to implement new components and tools in Sanity Studio.

Updated Feb 25, 2021 @ 09:59

On this page

Basic usage