pbcomponents

# pbcomponents **prosazhin basic components**는 TypeScript와 Tailwind CSS로 구축된 React용 UI 컴포넌트 라이브러리입니다. `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`을 따릅니다. 수동으로 제어하려면 `<html>` 또는 임의의 컨테이너에 `data-theme`을 설정하세요: ```html <html data-theme="dark"> <div data-theme="light">This block is always light</div> </html> ``` ## Next.js에서의 링크 `href`가 설정되면 링크로 렌더링되는 컴포넌트(`Button`, `Tab`, `Popover.Item`, `Tag`)는 `linkComponent` prop을 받아 `next/link`와 같은 사용자 정의 링크 컴포넌트를 사용할 수 있습니다: ```javascript import NextLink from 'next/link'; <Button href='/about' linkComponent={NextLink}> About </Button>; ``` ## 리소스 - [문서](https://prosazhin.dev/docs/pbcomponents) - [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)