@strapi/ui-primitives NPM

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

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

Basic Usage

import { Combobox } from '@strapi/ui-primitives';

() => {
  return (
    <Combobox.Root>
      <Combobox.Trigger>
        <Combobox.TextInput placeholder="Pick me" />
        <Combobox.Icon />
      </Combobox.Trigger>
      <Combobox.Portal>
        <Combobox.Content>
          <Combobox.Viewport>
            <Combobox.Item value="1">
              <Combobox.ItemText>Option 1</Combobox.ItemText>
              <Combobox.ItemIndicator>
                <Check />
              </Combobox.ItemIndicator>
            </Combobox.Item>
            <Combobox.NoValueFound>No value found</Combobox.NoValueFound>
            <Combobox.CreateItem>Create a new value</Combobox.CreateItem>
          </Combobox.Viewport>
        </Combobox.Content>
      </Combobox.Portal>
    </Combobox.Root>
  );
};

Select

Basic Usage

import { Select } from '@strapi/ui-primitives';

() => {
  return (
    <Select.Root>
      <Select.Trigger>
        <Select.Value placeholder="Pick me" />
        <Select.Icon />
      </Select.Trigger>
      <Select.Portal>
        <Select.Content>
          <Select.Viewport>
            <Select.Item value="1">
              <Select.ItemText>Option 1</Select.ItemText>
              <Select.ItemIndicator>
                <Check />
              </Select.ItemIndicator>
            </Select.Item>
          </Select.Viewport>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  );
};