প্রকল্প সম্পর্কে

# 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">This block is always 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 community](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)