abaabil

Abaabil Components

Abaabil provides a set of versatile and customizable UI components built with React. The components support different variants, sizes, and states, making them suitable for a wide range of use cases.

Installation

To install Abaabil components, use the following command:

npm install abaabil

Components

Button

A versatile and customizable button component.

import { Button } from 'abaabil';

const App = () => (
  <Button variant="primary" size="base">Primary Button</Button>
);

For more details, see the Button documentation.

ComboBox

A customizable dropdown selection component.

import { ComboBox } from 'abaabil';

const options = [
  { key: '1', label: 'Option 1', icon: 'icon1' },
  { key: '2', label: 'Option 2', icon: 'icon2' },
  { key: '3', label: 'Option 3', icon: 'icon3' },
];

const App = () => (
  <ComboBox options={options} placeholder="Select an option" />
);

For more details, see the ComboBox documentation.

Details

An expandable section component.

import { Details } from 'abaabil';

const App = () => (
  <Details summary="Primary Details" variant="primary">
    <p>This is the primary details content.</p>
  </Details>
);

For more details, see the Details documentation.

Dialog

A modal dialog component.

import { Dialog } from 'abaabil';

const App = () => {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <div>
      <Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} title="Dialog Title">
        <p>This is the content of the dialog.</p>
      </Dialog>
    </div>
  );
};

For more details, see the Dialog documentation.

Icon

An SVG icon component.

import { Icon } from 'abaabil';

const App = () => (
  <Icon id="settings" size="base" />
);

For more details, see the Icon documentation.

Popover

A tooltip-like overlay component.

import { Popover } from 'abaabil';

const App = () => (
  <Popover content="This is a popover" position="top">
    <Button>Hover over me</Button>
  </Popover>
);

For more details, see the Popover documentation.

Tooltip

A tooltip component.

import { Tooltip } from 'abaabil';

const App = () => (
  <Tooltip content="This is a tooltip" position="top">
    <Button>Hover over me</Button>
  </Tooltip>
);

For more details, see the Tooltip documentation.

Exports

export { default as Button } from 'abaabil.button';
export { default as ComboBox } from 'abaabil.combobox';
export { default as Details } from 'abaabil.details';
export { default as Dialog } from 'abaabil.dialog';
export { default as Icon } from 'abaabil.icon';
export { default as Popover } from 'abaabil.popover';
export { default as Tooltip } from 'abaabil.tooltip';

These exports make it easy to import and use the components in your project. For example:

import { Button, ComboBox, Details, Dialog, Icon, Popover, Tooltip } from 'abaabil';