React + TypeScript + Vite

Libreria con componentes simples pero personalizables que puedes utilizar en tus proyectos, para agilizar el proeceso de componetes basicos, todo hecho con React 18 y tailwind 3

Tecnologías

• ✅ React 18
• ✅ TypeScript
• ✅ Tailwind CSS v3
• ✅ Vite

🧑🏿‍🎨 Colores

Los colores que ya trae por defecto, son enfoque de salud, pero tambien puedes cambiarlos a tu propio estilos usando los className que cada componente tiene.

<InputComponent
  handleOnBlur={() => {}}
  helperText="Este es un campo obligatorio."
  id="input-default"
  label="Nombre"
  onChange={() => {}}
  placeholder="Escribe tu nombre"
  type="text"
  value=""
  className="text-red-500"
/>

📦 Componentes

ButtonComponent.tsx

<ButtonComponent onClick={() => handleEdit(row)} className="">
  Editar
</ButtonComponent>

ModalComponent.tsx

<ModalComponent
  isOpen={isModalOpen}
  onClose={() => setModalOpen(false)}
  title="Custom Title"
  footer={
    <>
      <buButtonComponenttton
        onClick={() => setModalOpen(false)}
        className="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-200"
      >
        Cancel
      </buButtonComponenttton>
      <ButtonComponent
        onClick={() => {
          alert("Done clicked");
          setModalOpen(false);
        }}
        className="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
      >
        Done
      </ButtonComponent>
    </>
  }
>
  <div>
    {Array.from({ length: 20 }).map((_, i) => (
      <p key={i}>Line {i + 1} - Lorem ipsum dolor sit amet...</p>
    ))}
  </div>
</ModalComponent>

InputComponent.tsx

<InputComponent
  id="new-password"
  type="password"
  label="Nueva contraseña"
  placeholder="Crea una contraseña segura"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
  required
  autoComplete="new-password"
  showPassword={showPassword}
/>

TableComponent.tsx

<TableComponent
  columns={columns}
  data={data}
  page={page}
  pageSize={pageSize}
  totalItems={totalItems}
  onPageChange={setPage}
  striped
/>