منصوبے کے بارے میں

# pbcomponents **prosazhin basic components** React کے لیے ایک UI کمپوننٹ لائبریری ہے، جو 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` کی پیروی کرتا ہے۔ اسے دستی طور پر کنٹرول کرنے کے لیے `<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)