# @strapi/ui-primitives > [![Version](https://img.shields.io/npm/v/@strapi/ui-primitives?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/ui-primitives) [![Downloads](https://img.shields.io/npm/dt/@strapi/ui-primitives.svg?style=flat&colorA=4945ff&col Latest version **2.2.4** (published 2026-08-07) · MIT license · 0 weekly downloads ## Install ```sh npm install @strapi/ui-primitives pnpm add @strapi/ui-primitives yarn add @strapi/ui-primitives bun add @strapi/ui-primitives ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 2.2.4 | | Published | 2026-08-07 | | First published | 2023-04-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 20 | | Unpacked size | 129.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Provenance | attested (GitHub Actions) | | GitHub stars | 541 | | Maintainers | pierreburgy, aurelsicoko, alexandrebodin, convly, nico-strapi, strapi.adzouz, cache-your-dreams, baronvoninternet, marc-roig-strapi, jhoward1994, bassel17, hichamelbsi | ## Links - npm: https://www.npmjs.com/package/@strapi/ui-primitives - Repository: https://github.com/strapi/design-system - Homepage: https://github.com/strapi/design-system#readme - Issues: https://github.com/strapi/design-system/issues - npm.io page: https://npm.io/package/@strapi/ui-primitives ## Dependencies (20) - [aria-hidden](https://npm.io/package/aria-hidden.md) 1.2.4 - [@radix-ui/number](https://npm.io/package/@radix-ui/number.md) 1.0.1 - [@radix-ui/primitive](https://npm.io/package/@radix-ui/primitive.md) 1.0.1 - [react-remove-scroll](https://npm.io/package/react-remove-scroll.md) 2.5.10 - [@radix-ui/react-slot](https://npm.io/package/@radix-ui/react-slot.md) 1.0.2 - [@radix-ui/react-popper](https://npm.io/package/@radix-ui/react-popper.md) 1.1.3 - [@radix-ui/react-portal](https://npm.io/package/@radix-ui/react-portal.md) 1.0.4 - [@radix-ui/react-context](https://npm.io/package/@radix-ui/react-context.md) 1.0.1 - [@tanstack/react-virtual](https://npm.io/package/@tanstack/react-virtual.md) ^3.10.8 - [@radix-ui/react-direction](https://npm.io/package/@radix-ui/react-direction.md) 1.0.1 - [@radix-ui/react-primitive](https://npm.io/package/@radix-ui/react-primitive.md) 1.0.3 - [@radix-ui/react-collection](https://npm.io/package/@radix-ui/react-collection.md) 1.0.3 - [@radix-ui/react-focus-scope](https://npm.io/package/@radix-ui/react-focus-scope.md) 1.0.4 - [@radix-ui/react-compose-refs](https://npm.io/package/@radix-ui/react-compose-refs.md) 1.0.1 - [@radix-ui/react-focus-guards](https://npm.io/package/@radix-ui/react-focus-guards.md) 1.0.1 - [@radix-ui/react-use-previous](https://npm.io/package/@radix-ui/react-use-previous.md) 1.0.1 - [@radix-ui/react-visually-hidden](https://npm.io/package/@radix-ui/react-visually-hidden.md) 1.0.3 - [@radix-ui/react-dismissable-layer](https://npm.io/package/@radix-ui/react-dismissable-layer.md) 1.0.5 - [@radix-ui/react-use-layout-effect](https://npm.io/package/@radix-ui/react-use-layout-effect.md) 1.0.1 - [@radix-ui/react-use-controllable-state](https://npm.io/package/@radix-ui/react-use-controllable-state.md) 1.0.1 ## Recent versions - 2.2.4 (latest) — 2026-08-07 - 2.3.0-alpha.0 (alpha) — 2026-09-24 - 0.0.0-experimental.5050830842353563931d9009cc28d709bcc53707 (experimental) — 2026-09-24 - 2.0.0-rc.30 (rc) — 2025-09-25 - 2.0.0-beta.6 (beta) — 2024-06-07 - 1.20.0-typescript.0 (typescript) — 2024-05-31 - 0.0.0-experimental.3137524d64bada66e1120e777e0a7668461d9d72 — 2026-09-24 - 0.0.0-experimental.ad5a8b137716a7af7b8df6d2bc14640ac6e454a7 — 2026-09-21 - 0.0.0-experimental.dafc0bf8b0031b33e70e69cd52a1f54822fec6ae — 2026-09-21 - 0.0.0-experimental.83f3c4ea794fa3c81b77927fb04eabc23bc6d004 — 2026-09-18 - 0.0.0-experimental.65fd50f14e6e09b03cee73167fc9f98ae9ca777f — 2026-09-03 - 0.0.0-experimental.c5a1c4d77dbcf94cb8beaa70569e4acc0a018d5e — 2026-08-28 - 2.2.3 — 2026-07-13 - 2.2.2 — 2026-07-08 - 2.2.1 — 2026-06-25 - … 90 more at https://npm.io/package/@strapi/ui-primitives/versions ## README # Strapi Primitives [![Version](https://img.shields.io/npm/v/@strapi/ui-primitives?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/ui-primitives) [![Downloads](https://img.shields.io/npm/dt/@strapi/ui-primitives.svg?style=flat&colorA=4945ff&colorB=4945ff)](https://www.npmjs.com/package/@strapi/ui-primitives) [![Discord Shield](https://img.shields.io/discord/811989166782021633?style=flat&colorA=4945ff&colorB=4945ff&label=discord&logo=discord&logoColor=f0f0ff)](https://discord.gg/strapi) A UI component library for building accessibile design systems & web apps. While typically we use [radix-ui primitives](https://github.com/radix-ui/primitives) in our design-system, there are some missing components. To solve this issue, we work with Radix's internal packages & APIs to develop base layer primitives in a composable manor until they are (hopefully) released through Radix and we can deprecate them here. ## Installation ```shell yarn add @strapi/ui-primitives # or npm i @strapi/ui-primitives ``` ## Component Documentation This directory shows a basic usage of the component, however for more details click on the storybook badge. ### Combobox [![](https://img.shields.io/badge/-storybook-%234945ff)](https://design-system-git-main-strapijs.vercel.app/?path=/story/design-system-primitives-combobox--basic-usage) #### Basic Usage ```jsx import { Combobox } from '@strapi/ui-primitives'; () => { return ( Option 1 No value found Create a new value ); }; ``` ### Select [![](https://img.shields.io/badge/-storybook-%234945ff)](https://design-system-git-main-strapijs.vercel.app/?path=/story/design-system-primitives-select--basic-usage) #### Basic Usage ```jsx import { Select } from '@strapi/ui-primitives'; () => { return ( Option 1 ); }; ``` ## Hook Documentation ### useCallbackRef Converts a callback to a ref to avoid triggering re-renders when passed as a prop or avoid re-executing effects when passed as a dependency ### useCollator Provides localized string collation for the current locale. Automatically updates when the locale changes, and handles caching of the collator for performance. ### useFilter Provides localized string search functionality that is useful for filtering or matching items in a list. Options can be provided to adjust the sensitivity to case, diacritics, and other parameters. ## Contributing Please follow our [CONTRIBUTING](https://github.com/strapi/design-system/blob/main/CONTRIBUTING.md) guidelines. ## License Licensed under the MIT License, Copyright © 2022-present [Strapi Solutions SAS](https://strapi.io). See [LICENSE](https://github.com/strapi/design-system/blob/main/LICENSE) for more information. --- _Source: https://npm.io/package/@strapi/ui-primitives · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._