quant-ui-react v1.1.13

quant-ui-react

quant-ui-react is a collection of React components designed for building user interfaces with consistent styles and behaviors.

Installation

npm install quant-ui-react
# or
yarn add quant-ui-react

Components

Checkbox

Props

Button

Props

Input

Props

Modal

Props

Seekbar

Props

InputOtp

Props

Avatar

Props

Badge

Props

Toast

Props

ToastTrigger

Props

BarLoader

Props

DotLoader

Props

SpinnerLoader

Props

Radio

Props

AccordionItem

Props

AccordionTrigger

Props

Select

Props

ChipInput

Props

Carousel

Props

SlideProps

Props

Switch

Props

Usage

import { Button, CardComponent, Checkbox, Input, ModalComponent, Seekbar,Otp,AccordionComponent,TextArea,SkeletonComponent,Select,ChipInput,Carousel } from 'quant-ui';
import "quant-ui-react/dist/styles.css"

const { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } = CardComponent
const { Accordion, AccordionItem, AccordionTrigger } = AccordionComponent

const { ModalButton, ModalContent } = ModalComponent

const { SkeletonDiv, SkeletonImage } = SkeletonComponent

// Example usage of Button component
<Button variant="default" variantSize="lg" onClick={handleClick}>Click me</Button>

// Example usage of Card component
 <Card>
    <CardHeader>
      <CardTitle>This is a Card Title</CardTitle>
      <CardDescription>This is a description of the card.</CardDescription>
    </CardHeader>
    <CardContent>
      <p>This is the main content of the card.</p>
    </CardContent>
    <CardFooter>
      <p>Footer content goes here.</p>
    </CardFooter>
  </Card>

// Example usage of Checkbox component
<Checkbox isLabel label='Label Name' labelClassName='tailwind-class' />

// Example usage of Input component
<Input label="Username" type="text" />

// Example usage of Modal component
<Modal isOpen={isOpen} onClose={handleClose}>
 <ModalButton onOpen={openModal}>Open Modal</ModalButton>
  <ModalContent>{modalContent}</ModalContent>
</Modal>

// Example usage of Seekbar component
<Seekbar value={seekbarValue} max={100} min={0} />

// Example usage of Otp component
<Otp onOtpChange={handleOtpChange} ref={otpRef} elements={6} variant="md" />

// Example usage of Avatar component
<Avatar src="Image.png" alt="Profile picture" variantSize="md" />

// Example usage of Badge component
<Badge variant="default">Default</Badge>

// Example usage of Toast component
<>
  <Toast position="top-right" duration={3000} reverseOrder={false} gutter={8} />

    <ToastTrigger
      cta="This is a success toast!"
      typeOfToast="success"
    >
      Show Success Toast
    </ToastTrigger>

    <ToastTrigger
      cta="This is an error toast!"
      typeOfToast="error"
    >
      Show Error Toast
    </ToastTrigger>

    <ToastTrigger
      cta="Promise toast example"
      typeOfToast="promise"
      promiseLoadingText="Saving..."
      promiseLoadingSuccess="Settings saved!"
      promiseLoadingError="Could not save."
      promiseFn={mockApiCall}
    >
      Show Promise Toast
    </ToastTrigger>
<>

// Example usage of Spinner component
<>
  <SpinnerLoader size={45} color='#000' />
  <BarLoader size={45} />
  <DotLoader size={30} />
</>
<Radio variantSize='md' isLabel label='CTA' labelClassName='tailwind-class' accentColor='hex-code'  />

// Example usage of Accordion component
<>
  <Accordion className="tailwind-class">
    <AccordionTrigger
      variant='variant'
      iconColor='color'
      title={title}
      isOpen={isOpen}
      onOpen={onOpen}
      className="tailwind-class"
    />
    <AccordionItem
      isOpen={isOpen}
      content={content}
      className="tailwind-class"
    />
  </Accordion>

</>

// Example usage of Skeleton component
<>
  <SkeletonImage className='tailwind-class' />
  <SkeletonDiv className='tailwind-class' />
</>

// Example usage of TextArea component
<TextArea className='tailwind-class' />

// Example usage of Select component
<Select
  options={options}
  value={selectedOption}
  onChange={handleChange}
  label="Select a option"
  placeholder="Choose an option"
  className="tailwind-class"
  labelClassName="tailwind-class"
/>

// Example usage of ChipInput component
<ChipInput
  chips={chips}
  onChipsChange={setChips}
  className='tailwind-class'
  placeholder="Type and press Enter"
  isLabel
  label="Tags"
  inputClassName="tailwind-class"
  chipClassName="tailwind-class"
  chipContainerClassName="tailwind-class"
  iconColor={"red"}
/>

// Example usage of Carousel component
<Carousel loop slides={image_Array} className="taiwind-css" />