pbcomponents

@prosazhin/pbcomponents — библиотека компонентов для React 19. Справочник охватывает компоненты, хелперы, провайдеры и хуки с примерами и сигнатурами API.

Ресурсы: GitHub · npm · Figma Community · Behance · Дизайн-система.

Установка

npm install @prosazhin/pbcomponents @prosazhin/pbstyles

Пакет компонентов использует React 19 как peer dependency и Tailwind CSS 4. Для фирменных токенов подключите pbstyles в глобальном CSS:

@import 'tailwindcss';
@import '@prosazhin/pbstyles/styles/tailwind/theme.css';

Первая кнопка

import { Button } from '@prosazhin/pbcomponents';

export default function Example() {
  return (
    <Button
      size='m'
      color='primary'
      theme='filled'
    >
      Сохранить
    </Button>
  );
}

Диалоги и уведомления

Если используете Dialog, Notification или связанные хуки, оберните приложение в PBCProvider один раз:

import { PBCProvider } from '@prosazhin/pbcomponents';

export default function Layout({ children }: { children: React.ReactNode }) {
  return <PBCProvider notifications={{ top: 80 }}>{children}</PBCProvider>;
}

На этом сайте провайдер расположен в корневом layout. Для остальных компонентов дополнительный провайдер не нужен.

Тема и ссылки Next.js

Цвета компонентов берутся из pbstyles. Без настройки они следуют prefers-color-scheme; data-theme="dark" или data-theme="light" на <html> либо контейнере задаёт режим вручную.

Компоненты с href (Button, Tab, PopoverItem, Tag) принимают linkComponent, если вместо обычной ссылки нужен next/link:

import NextLink from 'next/link';
import { Button } from '@prosazhin/pbcomponents';

<Button
  href='/projects'
  linkComponent={NextLink}
>
  Проекты
</Button>;

Переход с 1.x на 2.0

Новое во 2.0: Popover, ConfirmPopover, ConfirmDialog, Tooltip, Pagination, Progress и хук usePopover. У существующих компонентов появились размер xs и цвет warning у Badge, цвет warning у Alert, description у Checkbox, Toggle и Radio, заголовок и ошибка у групп, Field.Error, темы и клавиатурная навигация у Tabs, аккордеон в CollapseGroup, мобильная шторка у Dialog. Все попапы используют единый вид и не уходят за край экрана.

Новое во 2.1: проп icon у Popover.Trigger (шеврон у кнопки-триггера, можно отключить) и maxWidth у Tooltip.

Справочник

Компоненты

Хелперы

Провайдеры

Хуки

Типы доступны из корня пакета и @prosazhin/pbcomponents/types. На страницах экспортов приведены примеры и сигнатуры API.