# @sanity/ui

Latest version **4.2.1** (published 2026-09-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sanity/ui
pnpm add @sanity/ui
yarn add @sanity/ui
bun add @sanity/ui
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.2.1 |
| Published | 2026-09-10 |
| First published | 2020-10-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=22.12 |
| Dependencies | 10 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 172 |
| Author | Sanity.io <hello@sanity.io> |
| Maintainers | sanity-svc.npm, sanity-io |
| Keywords | components, design-system, primitives, react, sanity, ui |

## Links

- npm: https://www.npmjs.com/package/@sanity/ui
- Repository: https://github.com/sanity-io/ui
- Homepage: https://www.sanity.io/
- Issues: https://github.com/sanity-io/ui/issues
- npm.io page: https://npm.io/package/@sanity/ui

## Dependencies (10)

- [clsx](https://npm.io/package/clsx.md) ^2.1.1
- [motion](https://npm.io/package/motion.md) ^13.2.0
- [csstype](https://npm.io/package/csstype.md) ^3.2.3
- [react-is](https://npm.io/package/react-is.md) ^19.3.0
- [@sanity/color](https://npm.io/package/@sanity/color.md) ^3.0.8
- [@sanity/icons](https://npm.io/package/@sanity/icons.md) ^5.2.2
- [react-refractor](https://npm.io/package/react-refractor.md) ^4.0.0
- [use-effect-event](https://npm.io/package/use-effect-event.md) ^2.0.4
- [@floating-ui/react-dom](https://npm.io/package/@floating-ui/react-dom.md) ^2.1.9
- [@vanilla-extract/dynamic](https://npm.io/package/@vanilla-extract/dynamic.md) ^2.1.5

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 4.2.1 (latest) — 2026-09-10
- 5.0.0-alpha.10 (alpha) — 2026-09-09
- 3.5.5 (release-v3) — 2026-09-07
- 2.16.29 (release-v2) — 2026-08-27
- 4.0.0-next.7 (next) — 2026-07-31
- 4.0.0-beta.8 (beta) — 2026-04-29
- 3.1.12-canary.1 (canary) — 2026-02-25
- 4.0.0-static.46 (static) — 2025-11-25
- 3.0.0-rita-prerelease-tag.0 (rita-prerelease-tag) — 2025-07-23
- 2.10.0-corel.0 (corel) — 2024-10-31
- 2.3.6-0 (hotfix) — 2024-06-14
- 1.4.0 (popover-fixes-canary) — 2023-05-26
- 5.0.0-alpha.9 — 2026-09-08
- 4.2.0 — 2026-09-07
- 4.1.1 — 2026-09-07
- … 732 more at https://npm.io/package/@sanity/ui/versions

## README

# @sanity/ui

The Sanity UI components.

```sh
npm install @sanity/ui

# Install peer dependencies
npm install react react-dom styled-components
```

[![npm version](https://img.shields.io/npm/v/@sanity/ui.svg?style=flat-square)](https://www.npmjs.com/package/@sanity/ui)

## Usage

```jsx
import {Button, ThemeProvider} from '@sanity/ui'
import {buildTheme} from '@sanity/ui/theme'
import {createRoot} from 'react-dom/client'

// Static styles are shipped as a plain stylesheet (not injected at runtime) —
// import it once, wherever your app loads global CSS
import '@sanity/ui/styles.css'

const root = createRoot(document.getElementById('root'))
const theme = buildTheme()

root.render(
  <ThemeProvider theme={theme}>
    <Button text="Hello, world" />
  </ThemeProvider>,
)
```

## Contributing and releasing new versions to npm

This package lives in the [`sanity-io/ui` monorepo](https://github.com/sanity-io/ui) and uses [Changesets](https://github.com/changesets/changesets) to manage versioning and publishing.

When you make a change that should be released, add a changeset to your pull request:

```sh
pnpm changeset
```

Once pull requests with changesets are merged into the `main` branch, a "Version Packages" pull request is opened (and kept up to date) that bumps the affected package versions and updates their changelogs. Merging that pull request publishes the packages to npm through the [`Release` workflow](https://github.com/sanity-io/ui/actions/workflows/release.yml), which uses npm [Trusted Publishing](https://docs.npmjs.com/trusted-publishers) (OIDC).

## License

MIT-licensed. See LICENSE.

---
_Source: https://npm.io/package/@sanity/ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._