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">このブロックは常にライトテーマです</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コミュニティ](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)