Lista de Componentes

Índice

Alert

Mensajes cortos de distinto tipo.

Código de ejemplo

<Alert type="info">
  <strong>¡Información!</strong><span>Este es un mensaje informativo.</span>
</Alert>

Propiedades

Alert small

Mensajes cortos de distinto tipo en formato pequeño.

Código de ejemplo

<Alert small type="info">
  <strong>¡Información!</strong><span>Este es un mensaje informativo.</span>
</Alert>

Propiedades

Badge

Insignias de distinto tipo.

Código de ejemplo

<Badge type="info">
  Información
</Badge>

Propiedades

Button

Botón para ser utilizado en el lado cliente.

Código de ejemplo

<Button onClick={() => alert("Mensaje de alerta")}>
  Botón
</Button>

Propiedades

Space

Espacio vertical en blanco con alto indicado en píxeles.

Código de ejemplo

<Space height={40} />

Propiedades

Separator

Línea de separación horizontal o vertical. La línea vertical sólo es de utilidad entre elementos mostrados en línea.

Código de ejemplo

<Separator />

<div className="flex gap-4 ">
  <div>Hola</div>
  <Separator type="vertical" />
  <div>Mundo </div>
</div>

Propiedades

Tooltip

Pequeño cuadro informativo que aparece cuando el usuario pasa el cursor por encima.

Código de ejemplo

<Tooltip title="Esto es un tooltip">
  <div className="bg-blue-100 dark:bg-blue-500 px-4 py-2 border border-slate-300 dark:border-slate-600">
    Al pasar el ratón por encima de este párrafo se mostrará un pequeño mensaje de ayuda o tooltip. 
  </div>
</Tooltip>

Propiedades

Popover

Cuadro que aparece cuando el usuario pasa el cursor por encima del title. Suele poseer un contenido más amplio e incluso elementos interactivo.

Código de ejemplo

<Popover title="Popover" className="bg-blue-100 dark:bg-blue-500 px-4 py-2 border border-slate-300 dark:border-slate-600">
  <div className="flex flex-col gap-1">
    <Link href="#" className="hover:opacity-60 active:opacity-40">Dashboard</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Autores</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Libros</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Prestamos</Link>
  </div>
</Popover>

Propiedades

Dropdown

Cuadro desplegable que aparece cuando el usuario hace click en el title. El cuadro suele contener algún tipo de menú. Al pulsar en cualquier otro lugar de la página, el menu se repliega.

Código de ejemplo

<Dropdown title="Dropdown" className="bg-blue-100 dark:bg-blue-500 px-4 py-2 border border-slate-300 dark:border-slate-600">
  <div className="flex flex-col gap-2">
    <Link href="#" className="hover:opacity-60 active:opacity-40">Dashboard</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Autores</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Libros</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Prestamos</Link>
  </div>
</Dropdown>

Propiedades

Dropdown2

Cuadro desplegable que aparece cuando el usuario hace click en el title. El cuadro suele contener algún tipo de menú. Al pulsar en el mismo sitio, el menu se repliega.

Código de ejemplo

<Dropdown2 title="Dropdown2" className="bg-blue-100 dark:bg-blue-500 px-4 py-2 border border-slate-300 dark:border-slate-600">
  <div className="flex flex-col gap-2">
    <Link href="#" className="hover:opacity-60 active:opacity-40">Dashboard</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Autores</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Libros</Link>
    <Link href="#" className="hover:opacity-60 active:opacity-40">Prestamos</Link>
  </div>
</Dropdown2>

Propiedades

Modal

Diálogo modal que aparece al hacer click en el trigger y se muestra centrado en pantalla. Para cerrar se puede hacer clic fuera del diálogo o pulsar la tecla Esc.

Código de ejemplo

<Modal trigger={
  <div className="bg-blue-100 dark:bg-blue-500 px-4 py-2 border border-slate-300 dark:border-slate-600">
   Abrir Modal
  </div>
}>
  <div className="p-8">
    <p className="text-blue-500 font-bold">Esto es un diálogo modal.</p>
    <div className="text-wrap">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quam, nostrum dignissimos illum, ratione molestiae aut, esse a porro debitis quia eius modi nulla consequuntur! Iusto nulla eaque quis libero ducimus!
      Sint corrupti soluta, doloremque beatae vero facilis praesentium, perferendis officiis nam enim ratione exercitationem dolore aliquid adipisci veniam quos error obcaecati! Quis voluptatum aut alias ad placeat aliquid nihil obcaecati.
      Iste repellat culpa eligendi dolorem deleniti officiis ex magni, placeat magnam numquam nobis eveniet beatae. Debitis labore voluptate at, sint consequuntur minus ipsum optio vero quibusdam quam fugit ullam. Nostrum?
      Nam obcaecati error id, facilis ipsum, cupiditate omnis deserunt saepe aliquam maiores in perspiciatis consequatur consequuntur iure excepturi rerum provident. Cupiditate quis impedit atque, aspernatur alias itaque. Sint, cupiditate ipsa!
      Adipisci vel ad quos temporibus dicta quidem doloremque sed deleniti eos! Quis aspernatur veniam dolor, nulla blanditiis totam molestias perspiciatis nostrum laudantium corrupti, aliquam dolore? Ab amet officiis eligendi autem.
    </div>
  </div>
</Modal>

Propiedades

Skeleton

Estructura de ejemplo para su uso como fallback de Suspense.

Código de ejemplo

<Skeleton />

Propiedades

Ninguna. Deberás hacer un copia del componente y editar a tu gusto.

Spinner

Icono animado para su uso como fallback de Suspense.

Código de ejemplo

<div className="flex items-center gap-2">
  <Spinner type={0} size={12} color="text-orange-500 dark:text-orange-600" />
  <Spinner type={1} size={8} color="text-blue-600 dark:text-blue-300" />
  <Spinner type={2} size={9} />
  <Spinner type={3} size={11} />
  <Spinner type={4} size={11} color="text-blue-500 dark:text-blue-400" />
  <Spinner type={5} size={7} color="text-slate-500 dark:text-slate-400" />
  <Spinner type={6} size={9} color="text-zinc-500 dark:text-zinc-400" />
  <Spinner type={7} size={9} />
</div>

Propiedades

Bonus

Los siguientes spinners no están incluidos en esta biblioteca. Se muestran aquí para demostrar lo fácil que es crear nuestros propios spinners.

Código de ejemplo

<div className="flex items-center gap-2">
  <div className="size-10 inline-block border-x-4 border-blue-600 dark:border-blue-500 rounded-full animate-spin" />
  <span className="text-5xl text-slate-200 animate-spin">#</span>
  <span className="text-4xl animate-pulse">🔥</span>
  <div className="inline-block text-5xl animate-bounce">🦘</div>
  <span className="inline-block text-lg text-red-500 animate-ping">❤️</span>
</div>

Icons

Algunos iconos para su uso con InputCheck e InputGroup. Probablemente no necesites hacer uso de ellos de forma directa.

Código de ejemplo

<div className="flex items-center gap-2">
  <CircleIcon color="fill-violet-400" />
  <SquareIcon color="fill-blue-400" />
  <HexagonIcon color="fill-teal-400" />
  <CrossIcon color="fill-lime-400" />
  <StarIcon color="fill-yellow-400" />
  <HeartIcon color="fill-red-400" />
</div>

Propiedades

InputText

Input de tipo texto. La mayoría de las veces no necesitarás hacer uso de forma directa, sino a través del componente Form.

Código de ejemplo

<InputText
  label="Introduce tu nombre"
  name="nombre"
  value={"José"}
/>

Propiedades

InputNumber

Input de tipo número. La mayoría de las veces no necesitarás hacer uso de forma directa, sino a través del componente Form.

Código de ejemplo

<InputNumber
  label="Introduce tu edad"
  name="edad"
  value={18} 
/>

Propiedades

InputRange

Input de tipo rango. La mayoría de las veces no necesitarás hacer uso de forma directa, sino a través del componente Form.

Código de ejemplo

<InputRange
  label="Volumen"
  name="volume"
  value={50}
  min={0}
  max={100}
  step={1}
/>

Propiedades

InputDate

Input de varios tipos de tiempo. La mayoría de las veces no necesitarás hacer uso de forma directa, sino a través del componente Form.

Código de ejemplo

<InputDate 
  type="datetime-local" 
  label="Evento musical" 
  name="evento" 
/>

Propiedades

InputImage

Input de tipo file para imágenes. La mayoría de las veces no necesitarás hacer uso de forma directa, sino a través del componente Form.

Foto de empleadoHaz doble click o arrastra y suelta aquí

Código de ejemplo

<InputImage
  label="Foto de empleado"
  name="foto"
  src="https://randomuser.me/api/portraits/men/85.jpg"
  width={300}
  height={300}
/>

Propiedades

InputCheck

Input de tipo radio. La mayoría de las veces no necesitarás hacer uso de forma directa, sino a través del componente InputGroup.

Código de ejemplo

<InputCheck
  label="Amateur"
  name="nivel"
  value="amateur"
  checked={false}
  icon={<CrossIcon />}
/>

Propiedades

InputCheck multiple

Input de tipo checkbox. La mayoría de las veces no necesitarás hacer uso de forma directa, sino a través del componente InputGroup.

Código de ejemplo

<InputCheck
  multiple
  label="Lectura"
  name="gustos"
  value="leer"
  checked={true}
  icon={<HeartIcon />}
/>

Propiedades

InputGroup

Grupo de inputs de tipo radio. La mayoría de las veces no necesitarás hacer uso de forma directa, sino a través del componente Form.

Código de ejemplo

<InputGroup
  label="Categoria"
  name="categoria"
  options={[
    // [label, name, checked]
    ["Amateur", "amateur", false],
    ["Junior", "junior", false],
    ["Senior", "senior", true],
    ["Veterano", "veterano", false]
  ]}
  icon={<CrossIcon />}
/>

Propiedades

InputGroup multiple

Grupo de inputs de tipo checkbox. La mayoría de las veces no necesitarás hacer uso de forma directa, sino a través del componente Form.

Código de ejemplo

<InputGroup
  multiple
  label="Aficiones"
  name="aficiones"
  options={[
    // [label, name, checked]
    ["Lectura", "leer", true],
    ["Actividad física", "deporte", false],
    ["Cine", "cine", true],
    ["Playa", "playa", true]
  ]}
  icon={<HeartIcon />}
/>

Propiedades

InputSelect

Select. La mayoría de las veces no necesitarás hacer uso de forma directa, sino a través del componente Form.

Código de ejemplo

<InputSelect
  label="Categoría"
  name="categoria2"
  options={[
    // [label, name, checked]
    ["Amateur", "amateur", false],
    ["Junior", "junior", false],
    ["Senior", "senior", true],
    ["Veterano", "veterano", false]
  ]}
  className="w-80"
/>

Propiedades

InputSelect multiple

Select múltiple. La mayoría de las veces no necesitarás hacer uso de forma directa, sino a través del componente Form.

Código de ejemplo

<InputSelect
  multiple
  label="Aficiones"
  name="aficiones2"
  options={[
    // [label, name, checked]
    ["Lectura", "leer", true],
    ["Actividad física", "deporte", false],
    ["Cine", "cine", true],
    ["Playa", "playa", true]
  ]}
  className="w-80"
/>

Propiedades

Submit

Botón para enviar datos de un formulario. La mayoría de las veces no necesitarás hacer uso de forma directa, sino a través del componente Form. Consultar Form.

Código de ejemplo

<Submit formAction={async () => {}}>
  Submit
</Submit>

Propiedades

Form

Formulario de recogida de datos.

ImagenHaz doble click o arrastra y suelta aquí

Introduzca nombre:

Introduzca empresa:

Perfil laboral:

ConserjeAdministrativoProfesorAlumno

Hobbies:

LecturaCineMúsicaPlaya

Guardar datos

Código de ejemplo

<Form
  action={async () => {
      await new Promise(resolve => setTimeout(resolve, 1000))
      toast.info("Acción desactivada.")
  }}
  data={{ nombre: "Ana", empresa: "Junta Andalucía" }}
  className="border border-slate-100 shadow-lg rounded-md p-8 md:w-3/4 mx-auto"
  fields={[
          {
              name: "image",
              component: "InputImage",
              className: "self-end"
          },
          {
              name: "nombre",
              label: "Introduzca nombre:",
          },
          {
              name: "empresa",
              label: "Introduzca empresa:",
          },
          {
              name: "perfil",
              label: "Perfil laboral:",
              component: "InputGroup",
              options: [
                  // [label, name, checked]
                  ["Conserje", "conserje", false],
                  ["Administrativo", "administrativo", true],
                  ["Profesor", "profesor", true],
                  ["Alumno", "alumno", false],
              ]
          },
          {
              name: "hobbies",
              label: "Hobbies:",
              component: "InputGroup",
              multiple: true,
              options: [
                  // [label, name, checked]
                  ["Lectura", "leer", false],
                  ["Cine", "cine", true],
                  ["Música", "musica", true],
                  ["Playa", "playa", false]
              ]
          },
          {
              labels: ["Guardar datos", "Guardando datos ..."],
              component: "Submit",
              // color: "green",
              // round: "none"
          }
          ]}
  />

Propiedades

Table

Código de ejemplo

<Table
    data={[
      {
        nombre: 'Adán Guerrero Rentería',
        empresa: 'Gil Zambrano y Baca Irizarry',
        cargo: 'Administrador de Métricas Adelante',
      },
      {
        nombre: 'Adriana Reyes Díaz',
        empresa: 'Maya Montañez y Valentín Villarreal',
        cargo: 'Productor de Grupo Gerente',
      },
      {
        nombre: 'Agustín Aguilera Bernal',
        empresa: 'Véliz Mendoza S.A.',
        cargo: 'Oficial de Contabilidad Dinánmico',
      }
    ]}
    columns={[
        { name: "nombre", label: "Nombre" },
        { name: "empresa", label: "Empresa" },
        { name: "cargo", label: "Cargo" },
    ]}
    sort="empresa"
    direction="desc"
    width={1000}
/>

Propiedades

DragAndDrop

Componente con varias columnas donde arrastrar y soltar notas. Proporciona un tablero similar a Kanban.

Código de ejemplo

const initColumns = {
    todo: {
        titulo: 'To Do',
        items: [
            { id: '1', titulo: 'Diseñar base de datos', badge: 'Urgente', color: 'bg-red-100' },
            { id: '2', titulo: 'Crear componentes', badge: 'Urgente', color: 'bg-red-100' }
        ]
    },
    inProgress: {
        titulo: 'In Progress',
        items: [
            { id: '3', titulo: 'Configurar enrutador', badge: 'Normal', color: 'bg-amber-100' }
        ]
    },
    done: {
        titulo: 'Done',
        items: [
            { id: '4', titulo: 'Instalar dependencias', badge: 'Baja', color: 'bg-lime-100' }
        ]
    }
}

<DragAndDrop cols={initColumns} />

Propiedades

Drawer

Abrir Drawer

Código de ejemplo

<Drawer 
  trigger={<p className="text-red-400 dark:text-blue-300 cursor-pointer">Abrir Drawer</p>}
   position="right"    
   duration={700}
   area="w-20 md:w-40"
>
  <p>Uno</p>
  <p>Dos</p>
  <p>Tres</p>
</Drawer>

Propiedades