Was this page helpful?
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.
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
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, begin by installing 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:
// 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 AppYou 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.
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.
npx sanity@latest init --template app-sanity-uipnpm dlx sanity@latest init --template app-sanity-uiyarn dlx sanity@latest init --template app-sanity-uibunx sanity@latest init --template app-sanity-uinpx sanity@latest init --template app-sanity-uipnpm dlx sanity@latest init --template app-sanity-uiyarn dlx sanity@latest init --template app-sanity-uibunx sanity@latest init --template app-sanity-uinpm install @sanity/ui styled-componentspnpm add @sanity/ui styled-componentsyarn add @sanity/ui styled-componentsbun add @sanity/ui styled-componentsnpm install @sanity/ui styled-componentspnpm add @sanity/ui styled-componentsyarn add @sanity/ui styled-componentsbun add @sanity/ui styled-components// 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# 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# 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