pbcomponents

# pbcomponents **prosazhin basic components** — это библиотека UI-компонентов для React, созданная на TypeScript и Tailwind CSS. Она предоставляет набор переиспользуемых компонентов, таких как `Button`, `Tab`, `Popover.Item` и `Tag`. ## Установка и использование Установка через npm: ```bash npm install @prosazhin/pbcomponents ``` Импорт и использование компонентов: ```javascript import { Button } from '@prosazhin/pbcomponents'; const Page = () => ( <> <Button size='m' color='primary' theme='filled' onClick={() => {}}> Button </Button> </> ); ``` ## Тёмная тема Цвета берутся из токенов [pbstyles](https://github.com/prosazhin/pbstyles) и поддерживают как светлую, так и тёмную тему. По умолчанию тема следует системной настройке `prefers-color-scheme`. Чтобы управлять ею вручную, задайте `data-theme` на `<html>` или любом контейнере: ```html <html data-theme="dark"> <div data-theme="light">Этот блок всегда светлый</div> </html> ``` ## Ссылки в Next.js Компоненты, которые рендерятся как ссылка при заданном `href` (`Button`, `Tab`, `Popover.Item`, `Tag`), принимают проп `linkComponent` для использования пользовательского компонента ссылки, например `next/link`: ```javascript import NextLink from 'next/link'; <Button href='/about' linkComponent={NextLink}> About </Button>; ``` ## Ресурсы - [Документация](https://prosazhin.dev/docs/pbcomponents) - [Figma community](https://www.figma.com/community/file/1214486013859546496/pbcomponents) - [Behance](https://www.behance.net/gallery/206064847/pbcomponents) - [GitHub](https://github.com/prosazhin/pbcomponents/tree/main/workspaces/pbcomponents) - [NPM](https://www.npmjs.com/package/@prosazhin/pbcomponents)