🎨 Component Library Showcase

🖱️ Button

<Button label="Click Me" endIcon={<FaArrowRight />} />

📄 Pagination

<Pagination currentPage={currentPage} totalPages={10} onPageChange={(page) => setCurrentPage(page)} />

📝 Modal

<Modal isOpen={showModal} onClose={() => setShowModal(false)}>
<h3>Hello from Modal!</h3>
<p>This is modal content.</p>
</Modal>

🔘 Radio Group

Choose a plan

FreeProEnterprise

<RadioGroup label="Choose a plan" name="plan" value={plan} onChange={setPlan} options={[{ label: 'Free', value: 'free' }, { label: 'Pro', value: 'pro' }, { label: 'Enterprise', value: 'enterprise' }]} />

☑️ Checkbox

I accept the terms and conditions

<Checkbox label="I accept the terms and conditions" checked={accepted} onChange={(e) => setAccepted(e.target.checked)} />

📅 Date Picker

Select date

<DatePicker label="Select date" value={date} onChange={setDate} />

📅 Input Fields

Email*

Password

Password is required

<Input
label="Email"
type="email"
placeholder="example@gmail.com"
required
iconLeft={<i className="bx bx-envelope" />}
/>

<Input
label="Password"
type="password"
placeholder="Enter your password"
error="Password is required"
iconRight={<i className="bx bx-lock" />}
/>