Vivakit React Tailwind Component Library

A component library for React

Installation

• Install the package

 npm i @vivakits/react-components

• Go to the tailwind.config.js file and update the content and add vivakitPreset as presets :

import { vivakitPreset } from "@vivakits/react-components";

 /** @type {import('tailwindcss').Config} */
export default {
  content: [
    ...,
    "./node_modules/@vivakits/react-components/dist/**/*.{js,ts,jsx,tsx}", // add this line
  ],
  theme: {},
  presets: [vivakitPreset],  // add the preset
  plugins: [],
};

• Paste the following into your index.css file and change the colors according to your needs

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: #fff;
    --foreground: #090909;
    --primary: #f97316;
    --primary-foreground: #fafaf9;
    --primary-light: #fef1e8;
    --secondary: #9b59b6;
    --secondary-foreground: #fafaf9;
    --secondary-light: #f5eef8;
    --accent: #3498db;
    --accent-foreground: #fafaf9;
    --accent-light: #ebf5fb;
    --success: #45d483;
    --success-foreground: #fafaf9;
    --success-light: #ecfbf3;
    --warning: #fab005;
    --warning-foreground: #fafaf9;
    --warning-light: #fff7e6;
    --danger: #fa5252;
    --danger-foreground: #fafaf9;
    --danger-light: #ffeeee;
    --neutral: #e4e4e7;
    --muted: #f4f4f5;
    --placeholder: #00000066;
    --black: #262626;
    --ring: #f97316;
    --divider: #00000066;
    --disabled: #f2f2f2;

    --vk_radius: 8px;
    --vk_height: 40px;
    --vk_padding: 0px 16px;
  }
}

Congrats! Now your are good to go 🥳

Available Components (till now)

• Action Icon

• Anchor
• Asynchronous Datatable
• Avatar
• Badge
• Breadcrumb
• Button
• Checkbox
• Chip
• Dropdown
• Group
• Highlight
• Input
• Label

• Modal
• Notification
• Otp Input

• Popconfirm (not written yet)
• Radio Button
• Select
• Skeleton
• Spinner
• Switch
• Textarea
• Time Range Picker
• Typography

Usage/Examples

Action Icon Component

import { VKActionIcon } from "@vivakits/react-components";

function App() {
  return (
    <VKActionIcon
      icon={<SearchIcon />} // ReactNode. Displays ActionIcon content
      variant="solid" // Changes ActionIcon appearance. Options: 'solid', 'outline', 'light'
      color="primary" // Changes ActionIcon color. Options: 'primary', 'secondary', 'accent', 'success', 'warning', 'danger'
      size="md" // Changes ActionIcon size. Options: 'default', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'
      rounded="none" // Changes ActionIcon border radius. Options: 'default', 'none', 'xs', 'sm', 'md', 'lg', 'full'
      loading={false} // Whether the ActionIcon is loading
    />
  );
}

Anchor Component

import { VKAnchor } from "@vivakits/react-components";

function App() {
  return (
    <VKAnchor
      href="https://vivakit.vivasoftltd.com/"
      target="_blank"
      className="" // applying the custom css based on the variants
      color="primary" // Changes Anchor color. Options: 'primary', 'secondary', 'success', 'danger', 'warning', 'dark', 'light'
      size="xs" // Changes Anchor size. Options: 'default', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'
      underline="hover" // Changes Anchor underline behavior. Options: 'none', 'hover', 'always'
      fontFamily="primary" // Changes Anchor font family. Options: 'primary', 'secondary'
    >
      Let's Go
    </VKAnchor>
  );
}

Asynchronous Datatable Component

import { AsyncDatatable } from "@vivakits/react-components";

function App() {
  return (
    <AsyncDatatable
      columnDefinitions={dataTableColumns}
      dataSource={dataTableDataSource}
      headerComponents={searchComponents} // optional
      isLoading={true} //optional. to show loader
      customLoadingComponent={<></>} //optional. If loading true then table shows a default Spinner. If you want to customize it, then pass a ReactNode through this attribute
      customEmptyDataComponent={} //optional. IF no data found then table shows a default React node. If you want to customize it, then pass a ReactNode through this attribute
      entriesHeader="" // optional. for customizing entries header
      entriesArray={[5, 10, 20]} // optional
      defaultEntries={10} //optional. to set default entries no initially
      entriesDropdownPosition="top" //optional. value is "top" or "bottom"
      entriesShowingSpaceText="" //optional. for customizing no of entries default 'of' text
      totalPages={20} // optional. mandatory for rendering pagination
      currentPage={currentPage} // optional. mandatory for rendering pagination
      noOfEntries={10} //optional. mandatory for showing no of entries value
      totalRecord={300} //optional. mandatory for showing no of entries value. This value defines total number of data in a table
      dynamicPreviousText="" // optional. for customizing previous btn label
      dynamicNextText="" // optional. for customizing next btn label
      previousIcon={<AnyIcon />} // optional. for customizing previous icon in pagination
      nextIcon={<AnyIcon />} // optional. for customizing next icon in pagination
      stripped // optional. It will show stripped rows.
      stripeColor="#c1c1c1" //optional. this color wll be override by default stripe color. It can take hex code or rgb() as well.
      horizontalBorder // optional. For adding horizontal border across all cells
      verticalBorder // optional. For adding vertical border across all cells
      isSelectableMulti // optional. mandatory for rendering selectable checkbox
      selectedRows={selectedRows} // optional. mandatory for rendering selectable checkbox. We have to pass the selectedRows array in this attribute
      defaultSelectedRows={defaultSelectedRows} // optional. pass an array of objects for default selecting
      handleOnSelectChange={handleOnSelectChange} // optional. mandatory for rendering selectable checkbox. callback function for selected rows
      handleOnSort={handleOnSort} // optional. callback function for getting the sorting dataIndex and sortOrder
      scroll={{ x: 2000, y: 500 }} // optional. x means horizontal width of table, y means height of the table.
      fixedHeader // optional. this attribute fixes our table header.
      rtl={true} //optional. for rtl support

      handleSearchInputChange={handleDataTableSearchInputChange} // optional. callback function for default search input
      handlePageChange={handlePageChange} // optional. However, mandatory for rendering pagination. callback function for pagination component
      handleNoOfEntriesChange={handleNoOfEntriesChange} // optional. However, mandatory for rendering entries. callback function for entries component
      handleOnRowClick={handleOnRowClick} // optional. Callback function for handling row click
      styles={{
        datatableFooterWrapperClassName="" // optional. for custom styling
        paginationWrapperClassName="text-gray-600" // optional. for custom styling
        paginationNoOfEntriesWrapperClassName="text-gray-600" // optional. for customizing no of entries text styling
        paginationPrevBtnClassName="text-gray-600" // optional. for custom styling pagination
        paginationNextBtnClassName="text-gray-600" // optional. for custom styling pagination
        paginationButtonClassName="" // optional. for custom styling pagination
        paginationButtonSelectedClassName="bg-gray-100 !text-black font-semibold" // optional. for custom styling
        tableWrapperClassName="" //optional. for custom styling
        headerWrapperClassName="bg-[#F2F5FF]" // optional. for custom styling
        headItemClassName="" // optional. for custom styling
        headItemLabelClassName="text-xs font-semibold text-gray-600" // optional. for custom styling
        tableBodyWrapperClassName="" // optional. for custom styling
        rowWrapperClassName="" // optional. for custom styling
        rowItemClassName="text-gray-500" // optional. for custom styling
        rowItemLabelClassName="text-sm" // optional. for custom styling
        entriesWrapperClassName="" // optional. for custom styling
        entriesHeaderClassName="" // optional. for custom styling
        selectEntriesWrapperClassName="" // optional. for custom styling
        selectEntryItemClassName="" // optional. for custom styling
        checkboxWrapperClassName="" // optional. for custom styling of checkbox wrapper
        checkboxClassName="" // optional. for custom styling of checkbox
      }}
    />
  );
};

Avatar Component

import { VKAvatar } from "@vivakits/react-components";

function App() {
  return (
    <div>
      <VKAvatar
        variant="text" // optional. Defines the variant of the avatar. Options: 'image', 'text'
        size="lg" // optional. Defines the size of the avatar. Options: 'xs', 'sm', 'md', 'lg', 'xl', '2xl'
        shape="rounded" // optional. Defines the shape of the avatar. Options: 'rounded', 'curved', 'square'
        fontSize="md" // optional. Defines the font size within the avatar. Options: 'default', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'
        className="" // applying the custom CSS based on the variants
        color="primary" // optional. Defines the background color of the avatar. Options: 'none', 'primary', 'secondary', 'success', 'danger', 'warning', 'dark', 'light'
        borderColor="dark" // optional. Defines the border color of the avatar. Options: 'primary', 'secondary', 'success', 'danger', 'warning', 'dark', 'light'
        withBorder={true} // optional. If true, adds a border to the avatar
        fontFamily="default" // optional. Defines the font family within the avatar. Options: 'default', 'sansSerif', 'sans', 'mono'
        fontColor="default" // optional. Defines the font color within the avatar. Options: 'default', 'primary', 'secondary', 'success', 'danger', 'warning', 'dark', 'light'
        textValue="JS" // optional. Text content to display inside the avatar
        onClick={() => alert("Avatar clicked")} // optional. Click handler for the avatar
        src="" // optional. for image source of avatar
        alt="" // optional. for alternate text for image of avatar
      >
        JS
      </VKAvatar>
    </div>
  );
}

Badge Component

import { VKBadge } from "@vivakits/react-components";

function App() {
  return (
    <VKBadge
      variant="circular" // optional. for determining the style of badge. Currently "circular" | "square" available
      color="primary" // optional. for determining the background color of the badge
      borderColor="primary" // optional. for determining the border color of badge when border is available
      size="md" // optional. for different size of badge
      placement="topRight" // optional. for different placement. Currently "topRight" | "topLeft" | "bottomLeft" | "bottomRight" available
      invisible={false} // optional. for changing the badge visibility
      className="" // optional. for custom css class on the badge
      content={<CameraIcon />} // optional. for showing content inside badge. Currently "JSX.Element" | "number" type available
      containerProps={{}} // optional. for applying props to the wrapper container which holds children and badge
      containerRef={containerRef} // optional. for referencing the wrapper container
      ref={badgeRef} // optional. for referencing the badge component
      withBorder // optional. determines if border should be shown
    >
      <button>Button with badge</button>
    </VKBadge>
  );
}

Breadcrumb Component

import { BreadCrumbs } from "@vivakits/react-components";

function App() {
  const breadcrumbOptions = [
    { title: "Home", href: "/" },
    { title: "Category", href: "/category" },
    { title: "Subcategory", href: "/category/subcategory" },
    { title: "Current Page", href: window.location.pathname },
  ];

  const customStyle = {
    bg: "bg-gray-100 p-4 rounded",
    wrapper: "space-x-3",
    item: "flex items-center",
    link: "text-blue-600 hover:text-blue-800",
    href: "p-2 rounded-lg",
  };

  return (
    <div>
      <BreadCrumbs
        separator=">" // Separator displayed between breadcrumb items
        options={breadcrumbOptions} // Array of breadcrumb options
        underline={true} // Enable underline for breadcrumb links
        style={customStyle} // Custom styles for breadcrumb component
      />
    </div>
  );
}

Button Component

import { Button } from "@vivakits/react-components";

function App() {
  return (
    <Button
      variant="solid" // Style variant of the button. Options: 'solid', 'outline', 'text'
      color="primary" // Color variant of the button. Options: 'primary', 'secondary', 'success', 'danger', 'warning', 'dark', 'light'
      size="lg" // Size of the button. Options: 'sm', 'md', 'lg', 'xl', '2xl'
      rounded="md" // Border radius of the button. Options: 'none', 'xs', 'sm', 'md', 'lg', 'xl', 'full'
      onClick={() => console.log("Button clicked")} // Click handler function
    >
      Click me!
    </Button>
  );
}

Checkbox Component

import { useState } from "react";
import { Checkbox, CheckboxGroup, IndeterminateCheckbox } from "@vivakits/react-components";

function App() {
  const [selectedValues, setSelectedValues] = useState<string[]>([]);

  const handleCheckboxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { value, checked } = e.target;
    if (checked) {
      setSelectedValues((prevValues) => [...prevValues, value]);
    } else {
      setSelectedValues((prevValues) =>
        prevValues.filter((val) => val !== value)
      );
    }
  };

  const checkboxOptions = [
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
    { label: "Option 3", value: "3" },
  ];

  return (
     <>
      {/* Checkbox Group */}
      <CheckboxGroup
        options={checkboxOptions} // Array of checkbox options
        handleChange={handleCheckboxChange} // Function to handle change events
      />

      {/* Single Checkbox */}
      <Checkbox
        id="single-checkbox" // Unique identifier for the single checkbox
        size="md" // Size of the checkbox
        color="primary" // Color of the checkbox
        rounded="full" // Border radius of the checkbox
        hasError={false} // Whether the checkbox has an error
      >
        Single Checkbox
      </Checkbox>

      {/* Checkbox with Error */}
      <Checkbox
        id="checkbox-with-error" // Unique identifier for the checkbox with an error
        size="md" // Size of the checkbox
        color="danger" // Color of the checkbox
        rounded="full" // Border radius of the checkbox
        hasError={true} // Whether the checkbox has an error
        errorMessage="This is required" // Error message to display
      >
        Checkbox with Error
      </Checkbox>

      {/* Indeterminate Checkbox */}
      <IndeterminateCheckbox
        indeterminate={true} // Whether the checkbox is indeterminate
        checked={false} // Whether the checkbox is checked
      />

      {/* Different Sizes and Colors Checkboxes */}
      <Checkbox
        id="checkbox-size-sm" // Unique identifier for the small secondary checkbox
        size="sm" // Size of the checkbox
        color="secondary" // Color of the checkbox
        rounded="xs" // Border radius of the checkbox
      >
        Small Secondary Checkbox
      </Checkbox>
      <Checkbox
        id="checkbox-size-lg" // Unique identifier for the large success checkbox
        size="lg" // Size of the checkbox
        color="success" // Color of the checkbox
        rounded="lg" // Border radius of the checkbox
      >
        Large Success Checkbox
      </Checkbox>
    </>
  );
};

Chip Component

import { VKChip } from "@vivakits/react-components";

function App() {
  return (
    <VKChip
      variant="outlined" // optional. for determining the style of Chip. Currently "outlined" | "filled" available
      color="primary" // optional. for determining the background and text color
      size="md" // optional. for different text size & chip size
      fontSize="md" // optional. for different font size
      state="disabled" // optional. for the current state of chip. Currently "selected" | "unselected" | "disabled" available
      leftIcon={<ProfileIcon />} // optional. for showing icon on the left
      rightIcon={<CloseIcon />} // optional. for showing icon on the right
      open={true} // optional. determines if the chip should be shown or hidden
      onClick={handleOnClick} // optional. when clicking on the chip the provided function would run
      onRightIconClick={handleRightIconClick} // optional. when clicking on the right icon the provided function would run
      onLeftIconClick={handleLeftIconClick} // optional. when clicking on the left icon the provided function would run
      className="" // optional. for custom css for a chip
      iconClassName="" // optional. for custom css for icons on the chip
      leftIconClassName="" // optional. for custom css for left icon on the chip
      rightIconClassName="" // optional. for custom css for the right icon on the chip
      labelClassName="" // optional. for custom css for the text label on the chip
      label="" // optional. for showing the text label on the chip
      rounded={true} // optional. determines if the chip should be rounded or curved square
    />
  );
}

Data Table

Dropdown Component

import React, { useState } from "react";
import {
  Dropdown,
  DropdownTrigger,
  DropdownMenu,
  DropdownItem,
} from "@vivakits/react-components";

function App() {
  // State to handle open/close of dropdown
  const [isOpen, setIsOpen] = useState(false);

  // Function to handle item selection
  const handleItemSelect = (value) => {
    console.log(`Selected: ${value}`);
    setIsOpen(false); // Close the dropdown on item select
  };

  return (
    <>
      <Dropdown open={isOpen}>
        <DropdownTrigger action="click"> {/* action can be "click" or "hover" */}
          <button onClick={() => setIsOpen(!isOpen)}>Dropdown Action</button>
        </DropdownTrigger>
        <DropdownMenu align="end"> {/* align can be "start", "center", "end", "top-left", "top-right", "bottom-left", "bottom-right" */}
          <DropdownItem
            value="Edit"
            onItemSelect={handleItemSelect}
            disabled={false} {/* can be true to disable */}
            className="custom-class" {/* optional custom class */}
          >
            Edit
          </DropdownItem>
          <DropdownItem
            value="Duplicate"
            onItemSelect={handleItemSelect}
            disabled={false} {/* can be true to disable */}
            className="custom-class" {/* optional custom class */}
          >
            Duplicate
          </DropdownItem>
        </DropdownMenu>
      </Dropdown>
    </>
  );
};

Group Component

import { VKGroup } from "@vivakits/react-components";

function App() {
  return (
    <VKGroup
      orientation="vertical" // optional. determines the orientation of the group. Currently "vertical" | "horizontal" available
      separatorColor="primary" // optional. for the separator color of the group
      color="primary" // optional. for the background color of the group
      border="sm" // optional. for the size of the border of the group
      borderColor="primary" // optional. for the border color of the group
      size="md" // optional. determines the size of the group. This is applied to all the children inside group
      rounded="none" // optional. for the border radius of the group
      className="" // optional. for the custom css style of the group
      maxCount={3} // optional. limits the number of elements shown on the group
      noSeparator={false} // optional. determines if separator should be shown or not
      shouldOverlapChildren={false} // optional. overlaps children to the left side inside the group. Often used with avatar components
      shouldWrap={true} // optional. determines if "flex-wrap" style should be applied
      truncatedElement={<TruncateElement />} // optional. when max count is available this element
      // shows the amount of children that are hidden
      // this element would receive a prop named "hiddenitems" which holds an array of hidden children from the group component
      shouldProvideHiddenChildren={true} // determines if "hiddenitems" should be passed on the truncated element
      childrenProps={{}} // optional. for applying common props to all children under the group component
    >
      <button>button 1</button>
      <button>button 1</button>
    </VKGroup>
  );
}

Highlight Component

import { Highlight } from "@vivakits/react-components";

function App() {
  return (
    <>
      {/* Single word highlight */}
      <Highlight
        highlightText="highlight" // Text to be highlighted (single word)
        background="success" // Background color for the highlight (success color)
        rounded="full" // Full border radius for the highlight (fully rounded)
        className="text-highlight" // Additional class for custom styling
      >
        This is a sample text to highlight a specific word.
      </Highlight>

      {/* Multiple words highlight */}
      <Highlight
        highlightText={["multiple", "words"]} // Array of words to be highlighted (multiple words)
        background="warning" // Background color for the highlight (warning color)
        rounded="md" // Medium border radius for the highlight (medium rounded)
        className="text-highlight" // Additional class for custom styling
      >
        This is a sample text to highlight multiple words in the sentence.
      </Highlight>

      {/* Styled highlight */}
      <Highlight
        highlightText="styled" // Text to be highlighted (single word)
        background="danger" // Background color for the highlight (danger color)
        rounded="xs" // Small border radius for the highlight (extra small rounded)
        className="text-highlight" // Additional class for custom styling
        style={{ fontWeight: "bold", fontStyle: "italic" }} // Inline styles for custom styling (bold and italic)
      >
        This is a sample text with a styled highlight.
      </Highlight>
    </>
  );
}

Input Component

import { Input } from "@vivakits/react-components";

function App() {
  return (
    <Input
      type="text" // Specifies the type of input field
      label="User Input" // Sets the label text for the input field
      isRequired // Indicates that the input is required
      labelPosition="start" // Positions the label to the left of the input field
      icon={<span className="material-icons">person</span>} // Icon displayed before the input field
      iconPosition="start" // Positions the icon to the left of the input field
      variant="outline" // Uses an outlined style for the input field
      size="lg" // Sets the large size for the input field
      color="primary" // Sets the primary color theme for the input field
      rounded="full" // Applies full rounded corners to the input field
      hasError={false} // Indicates if the input field has an error state
      errorMessage="This field is required" // Error message displayed when hasError is true
      errorClassName="text-red-500" // Custom CSS class for the error message text
      hint="Enter your user information" // Hint text displayed below the input field
      prefixContent="http://" // Content displayed before the input field
      prefixClassName="bg-gray-200 text-gray-700" // Custom CSS class for the prefix content
      suffixContent=".com" // Content displayed after the input field
      suffixClassName="bg-gray-200 text-gray-700" // Custom CSS class for the suffix content
      prefixRounded="lg" // Applies large rounded corners to the prefix content
      suffixRounded="lg" // Applies large rounded corners to the suffix content
      placeholder="yourname" // Placeholder text displayed inside the input field
    />
  );
}

Label Component

import { VKLabel } from "@vivakits/react-components";

function App() {
  return (
    <VKLabel
      color="primary" // optional. for determining the text color for label
      decorationColor="secondary" // optional. for decoration color if decoration is available on label text
      align="start" // optional. applies "align-self" style to the label
      size="md" // optional. for different text sizes on label
      fontFamily="sansSerif" // optional. for applying different font family on the label
      decoration="underline" // optional. for applying different decorations on the label
      wordSpacing="normal" // optional. for different word spacing on the label
      weight="400" // optional. for applying different font weights on the label
      isRequired // optional. determines if the label is required. Puts a "*" after the label
      isDisabled // optional. determines if the label is disabled. Shown with "text-gray-600" color
      hasError // optional. determines if the label has error. Shown with "text-danger" color
      italic // optional. for applying italic text on the label
      bold // optional. for applying bold style on the label
      gutterBottom // optional. for applying extra margin at the bottom of the element
      gutterTop // optional.  for applying extra margin at the top of the element
      disableCopy // optional. for determining if the text can be copied
      className="" // optional. for applying custom css class on the label
      translationFn={translation} // optional. this accepts a translation function which is called with children as its parameter
      // if translationFn is available it would be called like "translationFn(children)" inside the label
    >
      Label
    </VKLabel>
  );
}

Modal Component

import React from "react";
import {
  Modal,
  ModalBody,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalTrigger,
} from "@vivakits/react-components";
import { Button } from "@vivakits/react-components";

function App() {
  const handleCancel = () => {
    // Handle cancel logic here
  };

  const handleSave = () => {
    // Handle save logic here
  };

  return (
    <Modal
      varient="screen-size" // Optional. Specifies the variant of the modal. Options: 'default', 'screen-size'
    >
      {/* ModalTrigger component */}
      <ModalTrigger>
        <Button
          variant="solid" // Style variant of the button. Options: 'solid', 'outline', 'text'
          rounded="md" // Border radius of the button. Options: 'none', 'xs', 'sm', 'md', 'lg', 'xl', 'full'
          className="px-3 py-2"
          color="primary" // Color variant of the button. Options: 'primary', 'secondary', 'success', 'danger', 'warning', 'dark', 'light'
        >
          Open Modal
        </Button>
      </ModalTrigger>

      {/* ModalContent component */}
      <ModalContent
        className="w-[600px]" // Optional. Custom class name for styling
        isDismissible={true} // Optional. Whether modal can be dismissed by clicking outside
        backdrop="bg-[rgba(0,0,0,0.25)] backdrop-blur-[2px]" // Optional. Background styling for modal backdrop
      >
        {/* ModalHeader component */}
        <ModalHeader
          wrapperClassName="px-4" // Optional. Custom class name for header wrapper
        >
          Modal Header
        </ModalHeader>

        {/* ModalBody component */}
        <ModalBody className="p-4">
          <p className="text-gray-500">
            {/* Modal body content */}
            Fusce in enim facilisis, placerat elit sed, porta tortor. Vivamus porta
            non ligula id sagittis.
            {/* Additional content truncated for brevity */}
          </p>
        </ModalBody>

        {/* ModalFooter component */}
        <ModalFooter>
          <Button
            variant="outline" // Style variant of the button. Options: 'solid', 'outline', 'text'
            onClick={handleCancel} // Optional. Click handler for the button
            className="px-3 py-1.5"
          >
            Cancel
          </Button>
          <Button onClick={handleSave} className="px-3 py-1.5">
            Save
          </Button>
        </ModalFooter>
      </ModalContent>
    </Modal>
  );
}

Notification Component

import {
  VKNotifications,
  useVKNotifications,
} from "@vivakits/react-components";

function App() {
  const { notify, closeNotification, closeAllNotifications } =
    useVKNotifications();

  return (
    <>
      <VKNotifications />
      <button
        onClick={() => {
          notify({
            id: "", // optional. for uniquely identifying each notification
            icon: <InfoIcon />, // optional. custom icon shown beside title
            closeIcon: <CloseIcon />, // optional. custom close icon for the notification
            title: "", // optional. title shown for the notification
            description: "", // mandatory. for showing notification text
            onClose: onClose, // optional. for what to do after closing a notification
            className: "", // optional. for custom css for a notification
            autoClose: true, // optional. for enabling / disabling auto close for a notification
            duration: 4000, // optional. for the duration in milliseconds after which the notification will close
            variant: "success", // optional. for showing different type of notification.
            color: "default", // optional. for showing different color on notification.
            size: "lg", // optional. for showing different text size and notification size
            placement: "topRight", // optional. for placing the notification in different locations on the web view.
          });
        }}
      >
        Open Notification
      </button>
      <button
        onClick={
          closeAllNotifications // closes all notifications on the web view at all placements
        }
      >
        Close All Notifications
      </button>
      <button
        onClick={
          (id) => closeNotification(id) // closes the notification that matches with the id provided
        }
      >
        Close Single Notification
      </button>
    </>
  );
}

Otp Input Component

import React from "react";
import { VKOtpInput, Button } from "@vivakits/react-components";

function App() {
  const handleOtpSubmit = (value) => {
    alert(`Submitted OTP: ${value}`);
  };

  const renderSubmitButton = (value, callback) => (
    <Button
      onClick={() => callback(value)}
      className="bg-blue-500 text-white px-4 py-2 rounded"
    >
      Submit OTP
    </Button>
  );

  const renderResetButton = (callback) => (
    <Button
      onClick={callback}
      className="bg-red-500 text-white px-4 py-2 rounded"
    >
      Reset
    </Button>
  );

  return (
    <VKOtpInput
      inputLength={6} // Specifies the length of the OTP input
      maskedIcon="•" // Icon or character used to mask the input
      isMasked={true} // Indicates whether the OTP input is masked (characters hidden)
      groupSize={3} // Group size for separating digits (e.g., 123-456)
      separator="-" // Separator character used between groups of digits
      allowChar={true} // Allows characters in addition to numbers in the OTP input
      required={true} // Indicates that the OTP input is required
      hasError={false} // Indicates if the OTP input has an error state
      errorMessage="Please fill all the inputs" // Error message displayed when hasError is true
      rounded="md" // Applies medium rounded corners to the OTP input
      size="lg" // Sets the large size for the OTP input
      className="border border-gray-300" // Custom CSS class for additional styling
      wrapperClass="mb-4" // Custom CSS class for the wrapper around the OTP input
      onSubmit={handleOtpSubmit} // Callback function invoked when OTP input is submitted
      renderSubmitButton={renderSubmitButton} // Function to render a custom submit button
      renderResetButton={renderResetButton} // Function to render a custom reset button
    />
  );
}

Pop Confirm Component

import React from "react";
import { Popconfirm, Button } from "@vivakits/react-components";

const App = () => {
  return (
    <Popconfirm
      children={<span>Trigger Popconfirm</span>} // Displays popconfirm triggering text
      wrapperClassName="trigger-class" // Classname for the popconfirm trigger
      title="Delete this item?" // Content of the popconfirm
      description="Are you sure you want to delete this item?" // Optional description of the popconfirm
      icon={
        <img
          src="https://img.icons8.com/nolan/48/information.png"
          alt="information"
        />
      } // Optional icon for the popconfirm
      yesButton={
        <button
          className="bg-purple-700 rounded-lg p-1 w-1/3"
          style={{ minWidth: "30%" }}
          onClick={() => alert("You clicked on the Yes button")}
        >
          Yes
        </button>
      } // Action button for the popconfirm
      noButton={
        <button
          className="border border-purple-700 rounded-lg p-1 w-1/3"
          style={{ minWidth: "30%" }}
          onClick={() => alert("You clicked on the No button")}
        >
          No
        </button>
      } // Action button for the popconfirm
      position="top" // Position of the popconfirm. Options: 'top', 'topLeft', 'topRight', 'left', 'bottom', 'bottomLeft', 'bottomRight'
      responsive={true} // Whether the popconfirm is responsive
      caret={true} // Whether to show the caret
      maxWidth="250px" // Maximum width of the popconfirm
      bodyClassName="border border-purple-700 text-white" // Classname for the popconfirm
      caretColor="purple" // Color of the caret
    >
      <Button className="w-28" size="md" variant="light">
        Click me
      </Button>
    </Popconfirm>
  );
};

Radio Button Component

import React, { useState } from "react";
import { RadioGroup, RadioButton } from "@vivakits/react-components";

function App() {
  const [selectedValue, setSelectedValue] = (useState < string) | (number > "");

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(e.target.value);
  };

  return (
    <RadioGroup
      label="Select an option" // Label for the radio group
      labelPosition="start" // Position of the label relative to the radio buttons
      wrapperClassName="mb-4" // Custom CSS class for the wrapper around the radio group
      labelClassName="text-gray-700 font-semibold" // Custom CSS class for styling the label
      name="exampleRadioGroup" // Name attribute for the radio group (shared among radio buttons)
      selectedValue={selectedValue} // Currently selected value (controlled component)
      onChange={handleChange} // Callback function invoked when a radio button selection changes
    >
      <RadioButton
        id="option1" // Unique ID for the first radio button
        value="option1" // Value associated with the first radio button
        color="primary" // Color variant of the first radio button
        size="md" // Size variant of the first radio button
        variant="circle" // Shape variant of the first radio button
        className="border-gray-300" // Custom CSS class for additional styling of the first radio button
        wrapperClassName="mb-2" // Custom CSS class for the wrapper around the first radio button
        labelClassName="ml-2 text-gray-600" // Custom CSS class for styling the label of the first radio button
      >
        Option 1 // Label text for the first radio button
      </RadioButton>

      <RadioButton
        id="option2" // Unique ID for the second radio button
        value="option2" // Value associated with the second radio button
        color="secondary" // Color variant of the second radio button
        size="md" // Size variant of the second radio button
        variant="square" // Shape variant of the second radio button
        className="border-gray-300" // Custom CSS class for additional styling of the second radio button
        wrapperClassName="mb-2" // Custom CSS class for the wrapper around the second radio button
        labelClassName="ml-2 text-gray-600" // Custom CSS class for styling the label of the second radio button
      >
        Option 2 // Label text for the second radio button
      </RadioButton>

      <RadioButton
        id="option3" // Unique ID for the third radio button
        value="option3" // Value associated with the third radio button
        color="success" // Color variant of the third radio button
        size="md" // Size variant of the third radio button
        variant="circle" // Shape variant of the third radio button
        className="border-gray-300" // Custom CSS class for additional styling of the third radio button
        wrapperClassName="mb-2" // Custom CSS class for the wrapper around the third radio button
        labelClassName="ml-2 text-gray-600" // Custom CSS class for styling the label of the third radio button
      >
        Option 3 // Label text for the third radio button
      </RadioButton>
    </RadioGroup>
  );
}

Select Component

import React, { useState } from "react";
import { Select } from "@vivakits/react-components";

const App = () => {
  const [value, setValue] = useState(); // State to hold selected value
  const [options] = useState([
    { label: "Blue", value: "Blue" },
    { label: "White", value: "White" },
    { label: "Black", value: "Black" },
    { label: "Orange", value: "Orange" },
  ]); // State for options

  return (
    <Select
      options={options}
      onChange={(option) => setValue(option)}
      value={value}
      variant="solid" // Comment: 'outline', 'text'
      size="md" // Comment: 'sm', 'lg', 'xl'
      rounded="md" // Comment: 'none', 'xs', 'sm', 'lg', 'full'
      label="Choose a color" // Comment: Label for the select component
      labelPosition="top" // Comment: 'start', 'end', 'horizontal'
      labelClassName="font-semibold" // Comment: Custom utility classes for label
      isRequired={true} // Comment: boolean
      showCancel={false} // Comment: boolean
      showDivider={false} // Comment: boolean
      placeholder="Select color" // Comment: Placeholder text
      hasError={false} // Comment: boolean
      // errorMessage="Please select a color" // Comment: Error message to display
      isLoading={false} // Comment: boolean
      menuPlacement="bottom" // Comment: 'top'
      // menuMaxHeight="200px" // Comment: Maximum height of the dropdown menu
      isMultiple={false} // Comment: boolean
      isScrollable={false} // Comment: boolean
      isSearchable={true} // Comment: boolean
      // noOptionsMessage="No colors available" // Comment: Message to display when no options are available
      optionsWithCheck={false} // Comment: boolean
      // checkedIcon={<CheckIcon />} // Comment: Custom icon for selected options
      // removeValueIcon={<CloseIcon />} // Comment: Custom icon for removing selected values
      showSelectedOptions={false} // Comment: boolean
      // isCreatable={true} // Comment: boolean
      isDisabled={false} // Comment: boolean
      // DropdownIndicator={<CustomDropdownIndicator />} // Comment: Custom icon for dropdown
      // createOptionByAPI={(newOption) => console.log('New option created:', newOption)} // Comment: Callback function when new option is created
      // styles={customStyles} // Comment: Custom utility classes for styling
    />
  );
};

Skeleton Component

import { Skeleton } from "@vivakits/react-components";

function App() {
  return (
    <Skeleton
      variant="rectangular" // Specifies the variant of the skeleton. Options: 'rectangular', 'circular', 'text'
      size="lg" // Size of the skeleton. Options: 'sm', 'md', 'lg', 'xl'
      height={40} // Height of each element in the skeleton (applicable to 'rectangular' and 'text' variants)
      width={220} // Width of each element in the skeleton (applicable to 'rectangular' and 'text' variants)
      rounded="8px" // Border radius (rounded corners) of the elements (applicable to 'rectangular' and 'circular' variants)
      numOfRows={2} // Number of rows (elements) in the skeleton (applicable to 'rectangular' and 'text' variants)
      numOfColumns={3} // Number of columns (elements) in the skeleton (applicable to 'rectangular' and 'text' variants)
    />
  );
}

Spinner Component

import React from "react";
import { Spinner } from "@vivakits/react-components";

function App() {
  return (
    <Spinner
      variant="default" // Defines the variant of the spinner. Options: 'default', 'circular', 'text'
      size="md" // Defines the size of the spinner. Options: 'sm', 'md', 'lg', 'xl', '2xl'
      color="primary" // Defines the color of the spinner. Options: 'primary', 'secondary', 'success', 'danger', 'warning', 'dark', 'light', 'accent'
      className="" // Custom CSS class for additional styling
    />
  );
}

Switch Component

import { useState } from "react";
import { VKSwitch } from "@vivakits/react-components";

function App() {
  const [isChecked, setIsChecked] = useState(false);

  const handleToggle = (newCheckedState) => {
    setIsChecked(newCheckedState);
    console.log("Switch is now:", newCheckedState ? "ON" : "OFF");
  };

  return (
    <VKSwitch
      defaultChecked={false} // Default initial state of the switch
      isChecked={isChecked} // Controlled state of the switch (boolean)
      onToggle={handleToggle} // Callback function invoked when the switch state changes
      disabled={false} // If true, disables the switch interaction
      isVertical={false} // If true, renders the switch vertically
      reversible={true} // If true, allows the switch to be reversible (toggle between states)
      variant="iOS" // Visual style variant of the switch. Options: 'default', 'iOS', 'material'
      size="lg" // Size variant of the switch. Options: 'sm', 'md', 'lg'
      color="primary" // Background color of the switch. Options: 'primary', 'secondary', 'success', 'danger', 'warning', 'dark', 'light'
      switchColor="secondary" // Color variant of the switch. Options: 'primary', 'secondary', 'success', 'danger', 'warning', 'dark', 'light'
      bodyClassName="custom-body-class" // Custom CSS class applied to the switch body
      switchClassName="custom-switch-class" // Custom CSS class applied to the switch toggle
      onIcon={
        <span role="img" aria-label="On">
          🔆
        </span>
      } // Icon or content displayed when switch is on
      offIcon={
        <span role="img" aria-label="Off">
          🌙
        </span>
      } // Icon or content displayed when switch is off
      onInnerLabel="ON" // Inner label text displayed when switch is on
      offInnerLabel="OFF" // Inner label text displayed when switch is off
      label="Toggle Switch" // Label text displayed next to or above the switch
      labelPlacement="top" // Placement of the label relative to the switch. Options: 'top', 'bottom', 'left', 'right'
      labelClassName="custom-label-class" // Custom CSS class applied to the label
      required={true} // If true, indicates that the switch is required for form submission
    />
  );
}

Textarea Component

import { Textarea } from "@vivakits/react-components";

function App() {
  return (
    <Textarea
      label="Description" // Label text displayed above the textarea
      placeholder="Enter your description here..." // Placeholder text shown when textarea is empty
      variant="outline" // Visual style variant of the textarea. Options: 'outline', 'filled'
      color="primary" // Background color of the textarea. Options: 'primary', 'secondary', 'success', 'danger', 'warning', 'dark', 'light'
      size="lg" // Size variant of the textarea. Options: 'sm', 'md', 'lg'
      rounded="lg" // Border radius (rounded corners) of the textarea
      wrapperClassName="mb-2" // Custom CSS class applied to the wrapper/container of the textarea
      labelClassName="font-semibold" // Custom CSS class applied to the label text
      errorClassName="text-danger" // Custom CSS class applied to the error message text
      errorMessage="Please enter a valid description." // Error message displayed when validation fails
      onChange={(e) => console.log(e.target.value)} // Callback function invoked when the textarea value changes
    />
  );
}

Time Range Picker Component

import { VKTimeRangePicker } from "@vivakits/react-components";

function App() {
  return (
    <VKTimeRangePicker
      defaultValue={["10:00 AM", "12:00 PM"]} // Optional. Default value for the time range picker. if range is true then pass an array of two strings. Otherwise, pass a single string. string format should be "hh:mm AM/PM"
      callback={(params: any) => console.log(params)} // A callback function for getting the selected time range.
      range={true} // Optional. Determines if the time range picker should be a range picker or not.
      size="sm" // Optional. Size of the time range picker.
      rounded="lg" // Optional. Border radius of the time range picker.
      color="primary" // Optional. Theme color of the time range picker.
      fromPlaceholder="" // Optional. Placeholder for the from input.
      toPlaceholder="" // Optional. Placeholder for the to input.
      containerClassName="" // Optional. Custom class for the time range picker container.
      inputWrapperClassName="" // Optional. Custom class for the input wrapper.
      inputClassName="" // Optional. Custom class for the input.
      modalWrapperClassName="" // Optional. Custom class for the modal wrapper.
      buttonClassName="" // Optional. Custom class for the button.
      onReset={(params: any) => console.log(params)} // Optional. Callback function for resetting the time range picker.
      isClearable={true} // Optional. Determines if the reset button show or not. value is true or false.
      customResetLabel="" // Optional. Custom label for the reset button.
      customNowLabel="" // Optional. Custom label for the now button.
    />
  );
}

Tooltip Component

import { Tooltip } from "@vivakits/react-components";

function App() {
  return (
    <Tooltip
      content="Tooltip content" // Text content or JSX to display in the tooltip
      position="top" // Position of the tooltip relative to its target. Options: 'top', 'bottom', 'left', 'right'
    >
      {/* Content that triggers the tooltip */}
      <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md">
        Hover me
      </button>
    </Tooltip>
  );
}

Typography Component

import { VKTypography } from "@vivakits/react-components";

function App() {
  return (
    <VKTypography
      variant="h1" // optional. for determine the type of element to use for title. Currently "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "paragraph" available
      fontFamily="sansSerif" // optional. for applying different font family on the title
      color="primary" // optional. for determining the text color
      decorationColor="secondary" // optional. for decoration color if decoration is available
      size="lg" // optional. for different text sizes
      lineHeight="normal" // optional. for different line heights
      align="left" // optional. determines the text alignment property
      decoration="underline" // optional. for applying different decorations on the title
      overflow="truncate" // optional. for determining different text overflow on the title
      wordBreak="normal" // optional. for determining different word break on the title
      wordSpacing="normal" // optional. for different word spacing on the title
      weight="400" // optional. for applying different font weights on the title
      bold={true} // optional. for applying text bold on the title
      italic={true} // optional. for applying italic text on the title
      noWrap={true} // optional. determines if the text would wrap within the element
      gutterBottom={true} // optional. for applying extra margin at the bottom of the element
      disableCopy={true} // optional. for determining if the text can be copied
      className="" // optional. for custom css class on the title
      translationFn={translation} // optional. this accepts a translation function which is called with children as its parameter
      // if translationFn is available it would be called like "translationFn(children)" inside the title class
    >
      Typography
    </VKTypography>
  );
}