Using Sanity UI with the App SDK

How to integrate @sanity/ui, or any other UI library, in your app.

The Sanity App SDK gives you complete freedom to craft your application’s design. Whether your preferred styling solution is Sanity UI, Tailwind, vanilla CSS, or something else entirely, the SDK‘s headless approach allows you to style your app with the tools your team knows best, while benefiting from powerful React hooks that unlock Sanity platform capabilities.

First, begin by installing Sanity UI:

npm install @sanity/ui styled-components

Then, in your custom application’s src/App.tsx, instantiate Sanity UI’s ThemeProvider as usual:

// App.tsx
import {SanityApp, type SanityConfig} from '@sanity/sdk-react'

// Sanity UI
import {ThemeProvider} from '@sanity/ui'
import {buildTheme} from '@sanity/ui/theme'

import {ExampleComponent} from './ExampleComponent'

// Build the Sanity UI theme
const theme = buildTheme()

export function App() {
  // apps can access many different projects or other sources of data
  const config: SanityConfig[] = [
    {
      projectId: 'project-id',
      dataset: 'dataset-name',
    },
  ]

  return (
    <ThemeProvider theme={theme}>
      <SanityApp config={config} fallback={<div>Loading...</div>}>
        {/* add your own components here! */}
        <ExampleComponent />
      </SanityApp>
    </ThemeProvider>
  )
}

export default App

You can now use Sanity UI as expected within your custom application.

This approach can be used for other component libraries and styling solutions, as well — just be sure to set them up with src/App.tsx.

If you know you’d like to use Sanity UI as your component library of choice when creating your custom app, you can choose to initialize your app with our Sanity UI template, which implements the work shown above for you.

Just initialize your app using the app-sanity-ui template instead of the usual app-quickstart template:

npx sanity@latest init --template app-sanity-ui