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.
Use Sanity UI in a new 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
Add Sanity UI to an existing app
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 AppReplace <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.
Optional: faster styled components
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.