pbcomponents

# pbcomponents **prosazhin basic components** es una biblioteca de componentes de interfaz de usuario para React, creada con TypeScript y Tailwind CSS. Proporciona un conjunto de componentes reutilizables como `Button`, `Tab`, `Popover.Item` y `Tag`. ## Instalación y uso Instala mediante npm: ```bash npm install @prosazhin/pbcomponents ``` Importa y usa los componentes: ```javascript import { Button } from '@prosazhin/pbcomponents'; const Page = () => ( <> <Button size='m' color='primary' theme='filled' onClick={() => {}}> Button </Button> </> ); ``` ## Tema oscuro Los colores provienen de los tokens de [pbstyles](https://github.com/prosazhin/pbstyles) y admiten tanto temas claros como oscuros. De forma predeterminada, el tema sigue el `prefers-color-scheme` del sistema. Para controlarlo manualmente, establece `data-theme` en `<html>` o en cualquier contenedor: ```html <html data-theme="dark"> <div data-theme="light">Este bloque siempre es claro</div> </html> ``` ## Enlaces en Next.js Los componentes que se renderizan como enlace cuando se establece `href` (`Button`, `Tab`, `Popover.Item`, `Tag`) aceptan una prop `linkComponent` para usar un componente de enlace personalizado, como `next/link`: ```javascript import NextLink from 'next/link'; <Button href='/about' linkComponent={NextLink}> About </Button> ``` ## Recursos - [Documentación](https://prosazhin.dev/docs/pbcomponents) - [Comunidad de 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)