kheiron-ui

Build faster your React Web with KUI.

kheiron-ui is a UI component library with semantic HTML, optimized to accelerate user interface development in web applications. Designed with productivity and simplicity in mind, kheiron-ui offers a comprehensive solution for creating robust forms and tables without the need to invest time in complex configurations.

Install

npm install kheiron-ui

Quickstart

Forms and Modal

This example are using react-hook-form how complement

import {
  AtomDiv,
  ButtonKUI,
  InputFieldCheckboxKUI,
  InputFieldPasswordKUI,
  InputFieldTextKUI,
  ModalKUI,
} from 'kheiron-ui';

<ButtonKUI label="form" onClick={() => setOpen(true)} />
<ModalKUI open={open}>
  <form onSubmit={handleSubmit(onSubmit)} style={{ width: '200px' }}>
    <InputFieldTextKUI
      width="100%"
      label="Username"
      errorMessage={errors?.username?.message}
      {...register('username')}
    />
    <InputFieldPasswordKUI
      width="100%"
      label="Password"
      errorMessage={errors?.password?.message}
      {...register('password')}
    />
    <InputFieldCheckboxKUI
      errorMessage={errors?.terms?.message || ''}
      position="right"
      label="terms and conditions"
      {...register('terms')}
    />
    <ButtonKUI
      label="Cancel"
      variant="outlined"
      type="button"
      onClick={() => setOpen((old) => !old)}
    />
    <ButtonKUI label="Submit" type="submit" />
  </form>
</ModalKUI>;

TableKUI

import { TableKUI, UserProfileCardKUI } from 'kheiron-ui';

<TableKUI
  keys={['id', 'user']}
  head={{ id: 'ID', user: 'User' }}
  body={[
    {
      id: 'KUI',
      user: {
        image: 'https://avatars.githubusercontent.com/u/158779561?s=48&v=4',
        name: 'Kheiron',
        email: 'kheiron-ui@example.com',
      },
    },
    ...
  ]}
  limit={5}
  neighbors={1}
  renderBody={({ value, key }) => {
    switch (key) {
      case 'user': {
        return (
          <UserProfileCardKUI
            image={value?.image || ''}
            head={value?.name || ''}
            body={value?.email || ''}
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              alert(value?.name);
            }}
          />
        );
      }
      default: {
        return <>{String(value)}</>;
      }
    }
  }}
/>;