pbcomponents

# pbcomponents **prosazhin basic components** é uma biblioteca de componentes de UI para React, criada com TypeScript e Tailwind CSS. Ela fornece um conjunto de componentes reutilizáveis como `Button`, `Tab`, `Popover.Item` e `Tag`. ## Instalação e uso Instale via npm: ```bash npm install @prosazhin/pbcomponents ``` Importe e use os componentes: ```javascript import { Button } from '@prosazhin/pbcomponents'; const Page = () => ( <> <Button size='m' color='primary' theme='filled' onClick={() => {}}> Button </Button> </> ); ``` ## Tema escuro As cores vêm dos tokens do [pbstyles](https://github.com/prosazhin/pbstyles) e oferecem suporte aos temas claro e escuro. Por padrão, o tema segue o `prefers-color-scheme` do sistema. Para controlá-lo manualmente, defina `data-theme` no `<html>` ou em qualquer contêiner: ```html <html data-theme="dark"> <div data-theme="light">Este bloco é sempre claro</div> </html> ``` ## Links no Next.js Os componentes que são renderizados como link quando `href` é definido (`Button`, `Tab`, `Popover.Item`, `Tag`) aceitam uma prop `linkComponent` para usar um componente de link personalizado, como `next/link`: ```javascript import NextLink from 'next/link'; <Button href='/about' linkComponent={NextLink}> About </Button>; ``` ## Recursos - [Documentação](https://prosazhin.dev/docs/pbcomponents) - [Comunidade Figma](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)