pbcomponents

@prosazhin/pbcomponents is a React 19 component library. The reference covers components, helpers, providers, and hooks with examples and API signatures.

Resources: GitHub · npm · Figma Community · Behance · Design system.

Installation

npm install @prosazhin/pbcomponents @prosazhin/pbstyles

The component package has React 19 as a peer dependency and uses Tailwind CSS 4. Import pbstyles in your global CSS for its design tokens:

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

Your first button

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

export default function Example() {
  return (
    <Button
      size='m'
      color='primary'
      theme='filled'
    >
      Save
    </Button>
  );
}

Dialogs and notifications

If you use Dialog, Notification, or their hooks, wrap the app in PBCProvider once:

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

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

This site places the provider in its root layout. Other components do not require a provider.

Themes and Next.js links

Component colors come from pbstyles. Without setup, they follow prefers-color-scheme; set data-theme="dark" or data-theme="light" on <html> or a container to override it.

Components with href (Button, Tab, PopoverItem, Tag) accept linkComponent when you need next/link instead of a plain anchor:

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

<Button
  href='/projects'
  linkComponent={NextLink}
>
  Projects
</Button>;

Migrating from 1.x to 2.0

New in 2.0: Popover, ConfirmPopover, ConfirmDialog, Tooltip, Pagination, Progress, and the usePopover hook. Existing components gained the xs size and warning color on Badge, warning on Alert, description on Checkbox, Toggle, and Radio, a heading and error for groups, Field.Error, themes and keyboard navigation for Tabs, an accordion mode in CollapseGroup, and a mobile bottom sheet for Dialog. All popups share one look and stay on screen.

New in 2.1: the icon prop on Popover.Trigger (a chevron on the trigger button, can be turned off) and maxWidth on Tooltip.

Reference

Components

Helpers

Providers

Hooks

Types are available from the package root and @prosazhin/pbcomponents/types. Export pages include examples and API signatures.