kit-components-ui

kit-components from Kit-elements

kit-components es un catalogo de componentes de UI, funcionales y personalizables

Instalacion

Instala con npm:

 npm install kit-components-ui

Lista de componentes

• CarrouselImages
• Collapse
• Loader
• Modal
• Toggle
• Experience
• BoxLinks
• Chat
• Message

Uso

CarrouselImages

import { CarrouselImages } from "kit-components-ui";

function App() {
  const arrImages = [img1, img2, img3, ...]
  return (
    <CarrouselImages images={arrImages} width="100%"  />
  );
};

Props	Uso	Tipo
images	imagenes de muestra el slider	array
auto	para el paso de images automatico	boolean
time	tiempo de muestra de cada imagen	number
width	ancho del componente	string, recibe px o %
height	alto del componente	string, recibe px o %
widthImage	alto de la imagen, por defecto 100%	string, recibe px o %
heightImage	alto de la imagen, por defecto 100%	string, recibe px o %

Collapse

import { Collapse } from "kit-components-ui";

function App() {
  return (
    <Collapse title="titulo del componente" bg="dark">
      <p>lorem ipsum... </p>
    </Collapse>
  );
}

Props	Uso	Tipo
children	Componente contenedor	ReactNode
title	titulo del componente	string
bg	nombre de background	string, recibe dark o light
width	ancho del componente	string, recibe px o %

Loader

import { Loader } from "kit-components-ui";

function App() {
  return <Loader />;
}

Modal

import { Modal } from "kit-components-ui";

function App() {
  return (
    <Modal titleButton="Click">
      <h2>Titulo del modal</h2>
      <p>lorem ipsum... </p>
    </Modal>
  );
}

Props	Uso	Tipo
children	Componente contenedor	ReactNode
titleButton	titulo del botton para abrir el modal	string

Toggle

import { Toggle } from "kit-components-ui";

function App() {
  const showMessage = () => {
    alert("¡Hello world!");
  };

  return <Toggle onClick={showMessage} />;
}

Props	Uso
onClick	para ejecutar una función al hacer click

Experience

import { Experience } from "kit-components-ui";

function App() {
  const experience = {
    job_name: "Web development",
    company: "Your company",
    first_date: "22 April",
    last_date: "20 December",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, magni numquam delectus, autem fugiat ipsa nesciunt optio provident distinctio, dicta enim fugit ducimus? Nobis placeat quia quos labore amet? Animi!",
    link: "your-link",
    theme: "dark",
  };

  return <Experience experience={experience} />;
}

Props	Uso
job_name	Nombre del puesto de trabajo
company	Nombre de la empresa en la que estuviste
first_date	Fecha de inicio del trabajo
last_date	Fecha de término del trabajo
description	Descrición de tu función dentro de la empresa
link	Puedes agregar un link si quieres
theme	Por defecto es light, puedes agregar dark

BoxLinks

import { BoxLinks } from "kit-components-ui";

function App() {
  const links = [
    { id: 0, link: "https://www.facebook.com", name: "Facebook" },
    { id: 1, link: "https://github.com", name: "Github" },
    { id: 2, link: "https://astro.build", name: "Astro" },
    { id: 3, link: "https://x.com", name: "X - Twitter" },
  ];

  return <BoxLinks links={links} title="" theme="" width="" />;
}

Props	Uso
links	Array de objetos con id(única), link(url) y name(Nombre del sitio)
title	Nombre principal del contenido
theme	Tema dark o light, según tu proyecto, por defecto está en dark
width	Largo del contenedor, por defecto el 100% del contendor padre, colocar los px, porcentaje, etc

Chat

import { Chat } from "kit-components-ui";

function App() {
  return <Chat theme="" width="" height=""></Chat>;
}

Props	Uso
children	Recibe los mensajes dentro
theme	Tema dark o light. Por defecto dark
width	Largo adaptable. Por defecto 100%, agregar los px, porcentaje, etc
height	Ancho adaptable. Por defecto auto, agregar los px, porcentaje, etc

Message

import { Message } from "kit-components-ui";

function App() {
  return <Message theme="" content="" username="" />;
}

Props	Uso
content	Contenido del mensaje a mostrar
username	Nombre del usuario emisor del mensaje. Opcional
theme	Tema dark o light. Por defecto dark

Probar

Ejecuta y visita localhost

  npm run dev