Strapi Primitives


A UI component library for building accessibile design systems & web apps.

While typically we use 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


• Select

$3

![](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




);
};
`

$3

![](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

$3

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

$3

Provides localized string collation for the current locale. Automatically updates when the locale changes,
and handles caching of the collator for performance.

$3

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 guidelines.

License

Licensed under the MIT License, Copyright © 2022-present Strapi Solutions SAS.

See LICENSE for more information.