Get started with Sanity UI

Sanity UI is a scalable and ergonomic React library for rapidly building efficient, accessible, and beautiful 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 create an input component in Sanity Studio.

Made withby folks at