Заметки про React: “Base UI Вышла альфа-версия UI библиотеки Base UI от авторов Radix, MUI…”

Base UI

Вышла альфа-версия UI библиотеки Base UI от авторов Radix, MUI и Floating UI. Библиотека представляет из себя набор нестилизованных React компонентов для создания доступных интерфейсов. В библиотеке уделено особое внимание доступности, производительности и удобству разработчика.

Каждый компонент собирается из частей. Пример компонента Popover:


import * as React from 'react';
import { Popover } from '@base-ui-components/react/popover';
import styles from './index.module.css';

export default function ExamplePopover() {
  return (
    <Popover.Root>
      <Popover.Trigger className={styles.IconButton}>
        <BellIcon aria-label="Notifications" className={styles.Icon} />
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner sideOffset={8}>
          <Popover.Popup className={styles.Popup}>
            <Popover.Arrow className={styles.Arrow}>
              <ArrowSvg />
            </Popover.Arrow>
            <Popover.Title className={styles.Title}>Notifications</Popover.Title>
            <Popover.Description className={styles.Description}>
              You are all caught up. Good job!
            </Popover.Description>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}

Для стилизации можно использовать что угодно, здесь для примера используется CSS Modules.

https://base-ui.com/react/overview/quick-start