Using Sanity UI with the App SDK

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

The Sanity App SDK is headless. It provides React hooks for working with Sanity, and you style your app with the tools your team already knows, such as Sanity UI, Tailwind, or vanilla CSS. This guide shows how to add Sanity UI to a new or existing App SDK app.

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 sets up Sanity UI for you.

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

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

pnpm dlx sanity@latest init --template app-sanity-ui

yarn dlx sanity@latest init --template app-sanity-ui

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

First, install Sanity UI:

npm install @sanity/ui styled-components

pnpm add @sanity/ui styled-components

yarn add @sanity/ui styled-components

bun add @sanity/ui styled-components

Then, in your custom application’s src/App.tsx, instantiate Sanity UI’s ThemeProvider as usual, and import @sanity/ui/styles.css next to it (Sanity UI 4 requires this stylesheet import, and without it some components render unstyled):

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

// Sanity UI
import '@sanity/ui/styles.css'
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: '<your-project-id>',
      dataset: 'production',
    },
  ]

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

export default App

Replace <your-project-id> with your project ID, and replace production with your dataset name if it differs. You can now use Sanity UI as expected within your custom application.

You can use this approach for other component libraries and styling solutions as well. Set them up in src/App.tsx.

We’re working to migrate Sanity UI off of styled components, but until then we recommend using our fork of the library to improve performance.

Add the corresponding package for your project’s React version to your project.

# React 18
npm install --save-exact styled-components@npm:@sanity/styled-components
# React 19
npm install --save-exact styled-components@npm:@sanity/css-in-js

# React 18
pnpm add --save-exact styled-components@npm:@sanity/styled-components
# React 19
pnpm add --save-exact styled-components@npm:@sanity/css-in-js

# React 18
yarn add --exact styled-components@npm:@sanity/styled-components
# React 19
yarn add --exact styled-components@npm:@sanity/css-in-js

# React 18
bun add --exact styled-components@npm:@sanity/styled-components
# React 19
bun add --exact styled-components@npm:@sanity/css-in-js

You can read the full explanation of why we forked styled-components, and what benefits it offers in the blog post.