xbit-ui-components

A modern, efficient, and reusable collection of UI components designed to simplify web application development with React. This library supports React 18.3.1 and above, helping you accelerate your workflow with highly customizable and accessible components.

Key Features

• Customizable Components: Tailor each component to match your brand or style.
• Accessibility: Designed to meet WCAG accessibility standards.
• Compatibility: Optimized for React 18.3.1 and later.
• Responsive Design: Components work seamlessly across various devices and resolutions.
• Comprehensive Documentation: Each component includes usage examples and configurable props.

Installation

• Install this library using npm, yarn, or pnpm:

  npm install xbit-ui-components

• Or with pnpm:

  pnpm add xbit-ui-components

• Or with Yarn:

  yarn add xbit-ui-components

Basic Usage

Import and use a component in your project:

import { Button } from 'xbit-ui-components';

function App() {
  return (
    <Button onClick={() => alert('Hello!')} >Click me!</Button>
  );
}

export default App;

Available Components

Button

<Button onClick={() => alert('Hello!')} >Click me!</Button>

Checkbox

<Checkbox checked={true} onChange={(e) => console.log(e.target.checked)} />

Input

<Input placeholder="Type here" value={value} onChange={(e) => setValue(e.target.value)} />

Input Number

<InputNumber min={1} max={10} onChange={(value) => console.log(value)} />

Radio and RadioGroup

<RadioGroup value={value} onChange={(value) => setValue(value)}>
  <Radio value="option1" label="Option 1" />
  <Radio value="option2" label="Option 2" />
</RadioGroup>

Select

<Select 
  options={[{ label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 }]} 
  onChange={(value) => console.log(value)} 
/>

Notification

<Notification message="Action completed" notificationType="success" />

Switch

<Switch checked={true} onChange={(checked) => console.log(checked)} />

Documentation

For more detailed information on how to use each component, visit xbit-ui Documentation.

Future Development

We are continuously working to expand the library with more components and features. Stay tuned for updates!

Contributing

Contributions are welcome! If you'd like to contribute:

• Fork this repository.

• Create a branch for your feature or fix: git checkout -b my-new-feature.

• Submit a pull request explaining your changes.