### Instalación de la librería

Source: https://kitdigital.uss.cl/desarrollo/componentes-react-intro

Comandos para instalar el paquete del Kit Digital USS React mediante gestores de paquetes.

```bash
yarn add @ussebastian/kitdigital-react@latest
# or
npm i @ussebastian/kitdigital-react@latest
```

--------------------------------

### Implementación de Landing Page

Source: https://kitdigital.uss.cl/desarrollo/ejemplos-landing-react

Ejemplo de importación y uso de componentes del Kit Digital para construir una página básica.

```javascript
import React from 'react';
import { 
  Header, 
  Hero, 
  Cards, 
  Banner, 
  Footer 
} from '@ussebastian/kitdigital-react';

function LandingPage() {
  return (
    <div>
      <Header />
      <Hero 
        title="Bienvenido a USS"
        subtitle="Universidad San Sebastián"
        variant="primary"
      />
      <Cards />
      <Banner 
        title="¿Necesitas más información?"
        variant="secondary"
      />
      <Footer />
    </div>
  );
}

export default LandingPage;
```

--------------------------------

### Instalar el paquete del Kit Digital

Source: https://kitdigital.uss.cl/desarrollo/componentes-kitbase-intro

Comandos para añadir la librería al proyecto utilizando gestores de paquetes.

```bash
npm install @ussebastian/kitdigital@latest
# or
yarn add @ussebastian/kitdigital@latest
```

--------------------------------

### Inicializar componentes interactivos

Source: https://kitdigital.uss.cl/desarrollo/componentes-kitbase-intro

Métodos para cargar la lógica de componentes interactivos mediante módulos ES o un bundle global.

```javascript
// Importar componente específico
import { Modal } from "@ussebastian/kitdigital/dist/components/esm/Modal.js";

// Inicializar
window.addEventListener("DOMContentLoaded", () => {
  const modalElements = document.querySelectorAll("[data-uss-modal]");
  modalElements.forEach(element => {
    const modalInstance = new Modal(element);
    modalInstance.mount();
  });
});
```

```html
<script src="https://unpkg.com/@ussebastian/kitdigital@latest/dist/js/main.js"></script>
```

--------------------------------

### Implementación de formulario con componentes del Kit

Source: https://kitdigital.uss.cl/desarrollo/ejemplos-forms-react

Ejemplo de un componente funcional que gestiona el estado del formulario y utiliza los componentes de entrada del Kit Digital USS.

```javascript
import React, { useState } from 'react';
import { 
  TextInput, 
  EmailInput, 
  SelectInput, 
  TextareaInput,
  Button,
  Card
} from '@ussebastian/kitdigital-react';

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    subject: '',
    message: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
  };

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  return (
    <Card className="max-width-600 mx-auto p-32">
      <h2>Formulario de Contacto</h2>
      <form onSubmit={handleSubmit}>
        <TextInput
          label="Nombre completo"
          name="name"
          value={formData.name}
          onChange={handleChange}
          required
        />
        
        <EmailInput
          label="Correo electrónico"
          name="email"
          value={formData.email}
          onChange={handleChange}
          required
        />
        
        <SelectInput
          label="Asunto"
          name="subject"
          value={formData.subject}
          onChange={handleChange}
          options={[
            { value: 'general', label: 'Consulta general' },
            { value: 'academic', label: 'Información académica' },
            { value: 'support', label: 'Soporte técnico' }
          ]}
        />
        
        <TextareaInput
          label="Mensaje"
          name="message"
          value={formData.message}
          onChange={handleChange}
          rows={5}
          required
        />
        
        <Button type="submit" variant="primary">
          Enviar mensaje
        </Button>
      </form>
    </Card>
  );
}

export default ContactForm;
```

--------------------------------

### Implementar componentes básicos

Source: https://kitdigital.uss.cl/desarrollo/componentes-kitbase-intro

Ejemplos de marcado HTML utilizando las clases CSS del kit para botones y tarjetas.

```html
<!-- Ejemplo de botón -->
<button class="uss-btn uss-btn--primary">
  Mi botón
</button>

<!-- Ejemplo de card -->
<div class="uss-card">
  <img src="imagen.jpg" class="uss-card__img" alt="Descripción">
  <div class="uss-card__body">
    <h3 class="uss-card__title">Título</h3>
    <p class="uss-card__text">Descripción del contenido</p>
  </div>
</div>
```

--------------------------------

### Importación del componente Tooltip

Source: https://kitdigital.uss.cl/desarrollo/componentes-tooltip-react

Importación necesaria para utilizar el componente Tooltip desde la librería de componentes de Kit Digital.

```javascript
import { Tooltip } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Importación de estilos CSS

Source: https://kitdigital.uss.cl/desarrollo/ejemplos-landing-react

Línea necesaria para cargar los estilos globales del kit en la aplicación.

```css
import '@ussebastian/kitdigital-react/dist/css/main.css';
```

--------------------------------

### Aplicación de clases de margen y padding

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Ejemplos de uso de las clases base 'm-' y 'p-' con los valores definidos por el kit.

```html
<span class="p-24">padding</span>
<span class="p-0">padding</span>

<span class="m-160">margin</span>
<span class="m-56">margin</span>

<span class="p-24 m-16">padding + margin</span>
<span class="m-4 p-auto">margin + padding</span>
```

--------------------------------

### Estructura base HTML para Kit Digital USS

Source: https://kitdigital.uss.cl/desarrollo/ejemplos-forms

Plantilla HTML necesaria para inicializar el Kit Digital USS, incluyendo la carga de estilos CSS y scripts JS desde el CDN oficial.

```html
1<!DOCTYPE html>
2<html lang="es" style="height: 100%;">
3  <head>
4    <title>Ejemplo de Formulario - Kit Digital USS</title>
5    <meta charset="UTF-8" />
6    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7    <link
8      rel="stylesheet"
9      href="https://unpkg.com/@ussebastian/kitdigital@latest/dist/css/main.css"
10    />
11  </head>
12  <body>
13    <!-- Inserta acá el código del formulario -->
14    <script
15      type="module"
16      src="https://unpkg.com/@ussebastian/kitdigital@latest/dist/js/main.js"
17    ></script>
18  </body>
19</html>
```

--------------------------------

### Implementación de estilo declarativo

Source: https://kitdigital.uss.cl/desarrollo/componentes-react-intro

Uso de un objeto de configuración para definir el contenido del componente de forma concisa.

```jsx
import { Card } from "@ussebastian/kitdigital-react";

<Card
  variant="simple"
  content={{
    img: {
      src: "/imagen.jpg",
      alt: "Descripción"
    },
    tag: {
      label: "Etiqueta",
      variant: "primary"
    },
    title: "Título del card",
    description: "Descripción del contenido",
    buttonCallToAction: {
      variant: "primary",
      label: "Acción",
      icon: "ri-arrow-right-line"
    }
  }}
/>
```

--------------------------------

### Importar estilos CSS

Source: https://kitdigital.uss.cl/desarrollo/componentes-kitbase-intro

Métodos para incluir los estilos base en archivos CSS o directamente en el HTML.

```css
@import url("@ussebastian/kitdigital/dist/css/main.css");
```

```html
<link rel="stylesheet" href="https://unpkg.com/@ussebastian/kitdigital@latest/dist/css/main.css">
```

--------------------------------

### Integrar funcionalidad JavaScript vía CDN

Source: https://kitdigital.uss.cl/desarrollo

Añade el script antes del cierre de la etiqueta <body> para habilitar componentes interactivos.

```html
<script
  crossorigin="anonymous"
  type="module"
  src="https://unpkg.com/@ussebastian/kitdigital@latest/dist/js/main.js"
></script>
```

--------------------------------

### Importación del componente Icon

Source: https://kitdigital.uss.cl/desarrollo/componentes-iconos-react

Importación necesaria para utilizar el componente Icon desde la librería del kit digital.

```javascript
import { Icon } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Importar estilos CSS vía NPM

Source: https://kitdigital.uss.cl/desarrollo

Utiliza la directiva @import en el archivo principal de estilos del proyecto.

```css
@import "~@ussebastian/kitdigital/dist/css/main.css";
```

--------------------------------

### Alinear elementos individualmente

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Clases para sobrescribir la alineación de un elemento específico dentro de un contenedor flex.

```html
1<div class="flex align-self-start">...</div>
2<div class="flex align-self-end">...</div>
3<div class="flex align-self-center">...</div>
4
5<div class="flex align-self-sm-baseline">...</div>
6<div class="flex align-self-lg-stretch">...</div>
```

--------------------------------

### Aplicación de clases de margen y padding direccionales

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Ejemplos de uso de variantes direccionales (t, r, b, l, x, y) para un control preciso del espaciado.

```html
<span class="pl-24">padding left</span>
<span class="px-20">padding left + right</span>

<span class="mb-auto">margin bottom</span>
<span class="my-56">margin top + bottom</span>

<span class="pt-80 mb-160">padding + margin</span>
<span class="my-56 px-20">margin + padding</span>
```

--------------------------------

### Importación del componente Form

Source: https://kitdigital.uss.cl/desarrollo/componentes-formularios-react

Importación necesaria para utilizar el componente Form desde la librería del kit digital.

```javascript
import { Form } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Integrar estilos CSS vía CDN

Source: https://kitdigital.uss.cl/desarrollo

Incluye la hoja de estilos en la etiqueta <head> del documento HTML.

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/@ussebastian/kitdigital@latest/dist/css/main.css"
/>
```

--------------------------------

### Importación del componente Button

Source: https://kitdigital.uss.cl/desarrollo/componentes-buttons-react

Importación necesaria para utilizar el componente Button desde la librería del kit.

```javascript
import { Button } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Importar funcionalidad JavaScript vía NPM

Source: https://kitdigital.uss.cl/desarrollo

Importa el módulo en el archivo principal de JavaScript para activar los componentes interactivos.

```javascript
import "@ussebastian/kitdigital/dist/js/main.js";
```

--------------------------------

### Componente <Form />

Source: https://kitdigital.uss.cl/desarrollo/componentes-formularios-react

El componente principal que encapsula un formulario. Acepta todos los atributos nativos de un elemento <form> de HTML.

```APIDOC
## <Form />

### Descripción
Componente contenedor para formularios. No gestiona validaciones, enfocándose exclusivamente en la presentación. Se recomienda utilizar junto con `<FormGroup/>`, `<FormGroupHelp/>` y `<FormLabel/>`.

### Props
- **className** (string) - Opcional - Clases CSS adicionales.
- **style** (object) - Opcional - Estilos en línea.
- **...props** (any) - Opcional - Acepta todos los atributos nativos del elemento <form>.

### Ejemplo de importación
```javascript
import { Form } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```
```

--------------------------------

### Implementar Tabs de forma independiente

Source: https://kitdigital.uss.cl/desarrollo/componentes-consumo

Importa el componente Tabs y monta las instancias encontradas en elementos con la clase uss-tab.

```javascript
import { Tabs } from "@ussebastian/kitdigital/dist/components/esm/Tabs.js";

window.addEventListener("DOMContentLoaded", () => {
  const tabElements = document.getElementsByClassName("uss-tab");
  if (tabElements.length > 0) {
    window.tabInstances = [];
    for (let i = 0; i < tabElements.length; i += 1) {
      window.tabInstances[i] = new Tab(tabElements[i]);
      window.tabInstances[i].mount();
    }
  }
});
```

--------------------------------

### Importación del componente Tag

Source: https://kitdigital.uss.cl/desarrollo/componentes-tags-react

Importación necesaria para utilizar el componente Tag desde la librería de componentes.

```javascript
import { Tag } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Importación del componente Tabs

Source: https://kitdigital.uss.cl/desarrollo/componentes-tabs-react

Importación necesaria de los subcomponentes para implementar la estructura de pestañas.

```javascript
import {
  Tabs, TabList, Tab, TabPanel
} from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Activación del Modal mediante HTML

Source: https://kitdigital.uss.cl/desarrollo/componentes-modal

Utiliza el atributo data-uss-modal-open-on-click para abrir un modal específico mediante un botón.

```html
<button class="uss-btn uss-btn--primary" data-uss-modal-open-on-click="modal-1">
  Abrir modal
</button>
```

--------------------------------

### Importación de componentes Modal

Source: https://kitdigital.uss.cl/desarrollo/componentes-modal-react

Importación necesaria de los subcomponentes del modal desde la librería del kit digital.

```javascript
import {
  ModalComponent,
  ModalBody,
  ModalFooter,
} from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Definir columnas con offset

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Ejemplo de aplicación de clases de columna y offset para posicionar elementos dentro de una fila.

```html
<div class="col-2 offset-2">
  <div>...</div>
</div>
```

--------------------------------

### Implementar Modal de forma independiente

Source: https://kitdigital.uss.cl/desarrollo/componentes-consumo

Importa el componente Modal y monta la instancia sobre el elemento seleccionado.

```javascript
import { Modal } from "@ussebastian/kitdigital/dist/components/esm/Modal.js";
window.addEventListener("DOMContentLoaded", () => {
  const modalElements = document.getElementsByClassName("uss-tab");
  const modalInstance = new ComponentModal(modalElements[0]);
  modalInstance.mount();
});
```

--------------------------------

### Button Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-buttons-react

El componente Button se renderiza como <button> por defecto o como <a> si se proporciona la propiedad href. Acepta atributos estándar de HTML como disabled, target, entre otros.

```APIDOC
## Component: Button

### Description
El componente Button permite la creación de botones de interacción o enlaces de navegación. Se recomienda usar como enlace solo para navegación entre páginas.

### Import
```javascript
import { Button } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

### Props
- **href** (string) - Opcional - Si se proporciona, el componente se renderiza como un elemento <a>.
- **disabled** (boolean) - Opcional - Deshabilita el botón.
- **target** (string) - Opcional - Define el destino del enlace (ej. _blank).
- **...props** (any) - Opcional - Acepta atributos adicionales de los elementos <button> o <a>.

### Usage Example
```jsx
<Button>Botón Primario</Button>
<Button href="/home">Enlace de navegación</Button>
```
```

--------------------------------

### Definir dirección de flexbox

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Clases para establecer la dirección de los elementos dentro de un contenedor flex.

```html
1<div class="flex flex-row">...</div>
2<div class="flex flex-column">...</div>
3<div class="flex flex-row-reverse">...</div>
4<div class="flex flex-column-reverse">...</div>
```

--------------------------------

### Controlar el ajuste de elementos flex

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Clases para gestionar el comportamiento de envoltura (wrap) de los elementos, incluyendo variantes por punto de interrupción.

```html
1<div class="flex flex-wrap">...</div>
2<div class="flex flex-nowrap">...</div>
3<div class="flex flex-wrap-reverse">...</div>
4
5<div class="flex flex-md-wrap">...</div>
6<div class="flex flex-sm-nowrap">...</div>
7<div class="flex flex-xxl-wrap-reverse">...</div>
```

--------------------------------

### Import Footer Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-footer-react

Import the Footer component from the library package.

```javascript
import { Footer } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Tooltip Component Usage

Source: https://kitdigital.uss.cl/desarrollo/componentes-tooltip-react

Basic implementation of the Tooltip component in a React application.

```APIDOC
## Tooltip Component

### Description
The `<Tooltip/>` component is a wrapper that displays a tooltip when the user hovers over or focuses on the wrapped element.

### Import
```javascript
import { Tooltip } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

### Usage Notes
- Do not place the `<Tooltip>` inside a `<p>` tag, as it contains a `<div>` which is invalid HTML inside a paragraph. Use a `<span>` instead.
- Avoid placing interactive elements like buttons or links inside the tooltip, as this may hinder keyboard accessibility.

### Supported Positions
- top
- left
- right
- bottom
```

--------------------------------

### Importación del componente Link

Source: https://kitdigital.uss.cl/desarrollo/componentes-link-react

Importación necesaria para utilizar el componente Link desde la librería de componentes de React.

```javascript
import { Link } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Control del Modal mediante JavaScript

Source: https://kitdigital.uss.cl/desarrollo/componentes-modal

Accede a la instancia del modal a través del objeto global componentModalInstances para abrir o cerrar programáticamente.

```javascript
// open modal
window.componentModalInstances["modal-1"].openModal();

// close modal
window.componentModalInstances["modal-1"].closeModal();
```

--------------------------------

### Importación del componente Hero

Source: https://kitdigital.uss.cl/desarrollo/componentes-hero-react

Importación necesaria para utilizar el componente Hero desde la librería de componentes de React.

```javascript
import { Hero } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Implementación de estilo imperativo

Source: https://kitdigital.uss.cl/desarrollo/componentes-react-intro

Uso de componentes anidados para mayor flexibilidad y control granular sobre la estructura.

```jsx
import { Card, Tag, Button, Icon } from "@ussebastian/kitdigital-react";

<Card>
  <Card.Img src="/imagen.jpg" alt="Descripción" />
  <Card.Body>
    <Tag variant="primary">Etiqueta</Tag>
    <h3>Título del card</h3>
    <p>Descripción del contenido</p>
    <Button variant="primary">
      Acción
      <Icon icon="ri-arrow-right-line" />
    </Button>
  </Card.Body>
</Card>
```

--------------------------------

### Import Pagination Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-pagination-react

Required import statement to use the Pagination component from the Kit BaseReact library.

```javascript
import { Pagination } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Importación del componente Accordion

Source: https://kitdigital.uss.cl/desarrollo/componentes-accordion-react

Importación necesaria de los componentes Accordion y AccordionItem desde la librería del Kit Digital USS.

```javascript
import {
  Accordion,
  AccordionItem,
} from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### ModalComponent

Source: https://kitdigital.uss.cl/desarrollo/componentes-modal-react

Componente principal que encapsula la lógica del modal y gestiona su visibilidad mediante estado controlado.

```APIDOC
## ModalComponent

### Descripción
Componente principal que encapsula `<ModalBody>` y `<ModalFooter>`. Es un componente controlado que requiere el estado de visibilidad y una función para modificarlo.

### Importación
`import { ModalComponent, ModalBody, ModalFooter } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";`

### Props
- **isOpen** (boolean) - Requerido - Estado que controla si el modal está visible.
- **setOpen** (function) - Requerido - Función para actualizar el estado de visibilidad del modal.
```

--------------------------------

### Importación de componentes Carousel

Source: https://kitdigital.uss.cl/desarrollo/componentes-carousel-react

Importación necesaria de los componentes de carrusel desde el paquete del kit digital.

```javascript
import {
  CarouselHero,
  CarouselCards,
  CarouselContent,
} from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Clases de ancho de borde

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-sombras-y-formas

Lista de las clases CSS disponibles para definir el grosor de los bordes en los componentes.

```text
1. border-0 (0px)
2. border (1px)
3. border-2 (2px)
4. border-4 (4px)
```

--------------------------------

### Importar AlertMessage

Source: https://kitdigital.uss.cl/desarrollo/componentes-alert-message-react

Importación necesaria para utilizar el componente AlertMessage en proyectos React.

```javascript
import { AlertMessage } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Importing Stepper Components

Source: https://kitdigital.uss.cl/desarrollo/componentes-stepper-react

Required imports for using the Stepper and StepperCircle components from the library.

```javascript
import {
  Stepper,
  StepperCircle,
} from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Establecer orden de elementos

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Clases para modificar el orden visual de los elementos dentro de un contenedor flex.

```html
1<div class="flex order-11">...</div>
2<div class="flex order-6">...</div>
3<div class="flex order-9">...</div>
4<div class="flex order-1">...</div>
5<div class="flex order-2">...</div>
6
7<div class="flex order-md-3">...</div>
8<div class="flex order-sm-4">...</div>
9<div class="flex order-lg-12">...</div>
```

--------------------------------

### Import Header Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-header-react

Import the Header component from the Kit Digital React library distribution.

```javascript
import { Header } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Implementar Carousel de forma independiente

Source: https://kitdigital.uss.cl/desarrollo/componentes-consumo

Importa el componente Carousel y recorre los elementos encontrados para inicializar cada instancia.

```javascript
import { Carousel } from "@ussebastian/kitdigital/dist/components/esm/Carousel.js";

const carouselElements = document.querySelectorAll("[data-uss-carousel]");
if (carouselElements.length > 0) {
  window.carouselInstances = [];
  for (let i = 0; i < carouselElements.length; i += 1) {
    window.carouselInstances[i] = new carousel(carouselElements[i]);
    window.carouselInstances[i].mount();
  }
}
```

--------------------------------

### Import Banner component

Source: https://kitdigital.uss.cl/desarrollo/componentes-banner-react

Required import statement to use the Banner component from the library.

```javascript
import { Banner } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Import Badge Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-badges-react

Required import statement to use the Badge component from the library.

```javascript
import { Badge } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Implementar Acordeón de forma independiente

Source: https://kitdigital.uss.cl/desarrollo/componentes-consumo

Importa el componente Accordion y móntalo sobre elementos con el atributo data-uss-carousel.

```javascript
import { Accordion } from "@ussebastian/kitdigital/dist/components/esm/Accordion.js";
window.addEventListener("DOMContentLoaded", () => {
  const accordionElements = document.querySelectorAll("[data-uss-carousel]");
  const accordionInstance = new Accordion(accordionElements[0]);
  accordionInstance.mount();
});
```

--------------------------------

### Alinear contenido horizontalmente

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Clases para distribuir el espacio entre y alrededor de los elementos a lo largo del eje principal.

```html
1<div class="flex justify-content-end">...</div>
2<div class="flex justify-content-center">...</div>
3<div class="flex justify-content-around">...</div>
4<div class="flex justify-content-evenly">...</div>
5
6<div class="flex justify-sm-content-between">...</div>
7<div class="flex justify-md-content-start">...</div>
```

--------------------------------

### Importing the Divider component

Source: https://kitdigital.uss.cl/desarrollo/componentes-divider-react

Required import statement to use the Divider component from the library.

```javascript
import { Divider } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Import Linked List Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-linked-list-react

Required import statement to use the LinkedList component from the library.

```javascript
import { LinkedList } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### <AspectRatio />

Source: https://kitdigital.uss.cl/desarrollo/componentes-aspect-ratio-react

The AspectRatio component forces a specific aspect ratio on its children. It can be configured with various ratios, object-fit properties, and custom container styles.

```APIDOC
## <AspectRatio />

### Description
Component used to set an aspect ratio on an element, typically an image. It forces the specified aspect ratio on all its children.

### Props
- **ratio** (string) - Required - The aspect ratio to apply. Options: '1:1', '4:3', '3:2', '16:9', '2:1', '21:9', '3:4', '2:3', '9:16', '1:2', '9:21'.
- **containInDiv** (boolean) - Optional - Default: false. Determines if the child content is inside a container div; the aspect ratio is applied to the children, not the div.
- **className** (string) - Optional - CSS class to apply to the container div.
- **style** (CSSProperties) - Optional - Inline styles to apply to the container div.
- **ObjectFit** (string) - Optional - Default: 'cover'. Determines how the child content fits the window. Options: 'contain', 'cover', 'fill', 'scale-down'.
- **children** (ReactNode | ReactNode[]) - Required - The elements to which the aspect ratio is applied.
```

--------------------------------

### Badge Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-badges-react

The Badge component is used for displaying informative labels. It accepts children for content and supports various variants as props.

```APIDOC
## Badge Component

### Description
The Badge component is an informative UI element that displays status or labels. It does not support click interactions and renders the provided children.

### Usage
```javascript
import { Badge } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";

<Badge>Content</Badge>
```
```

--------------------------------

### Personalizar variables CSS

Source: https://kitdigital.uss.cl/desarrollo/componentes-kitbase-intro

Sobrescritura de variables globales para adaptar el diseño a la identidad visual requerida.

```css
:root {
  --primary-color: #tu-color;
  --font-family: "Tu-fuente", sans-serif;
  /* ... otras variables */
}
```

--------------------------------

### Icon Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-iconos-react

The Icon component is used to display icons. It accepts a name for the icon and a size property to control its dimensions.

```APIDOC
## <Icon/>

### Description
This component encapsulates the icon described in the USS icon kit and also utilizes icons from the Remix Icon library. It accepts standard `<i>` element props such as `className` and `style`.

### Props
- **Icon** (string) - Required - The name of the icon.
- **size** (string) - Optional - Defines the size of the icon. Possible values: 'xs', 'sm', 'lg', 'xl'.

### Usage Example
```javascript
import { Icon } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";

<Icon Icon="home" size="lg" />
```
```

--------------------------------

### CarouselContent

Source: https://kitdigital.uss.cl/desarrollo/componentes-carousel-react

Componente contenedor para carruseles de contenido que integran una imagen lateral junto con texto descriptivo.

```APIDOC
## CarouselContent

### Descripción
Contenedor para carruseles de contenido mixto, estructurado para mostrar una imagen lateral y texto descriptivo.

### Importación
import { CarouselContent } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Import Table Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-tables-react

Required import statement to use the Table component from the library.

```javascript
import { Table } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Alinear elementos verticalmente

Source: https://kitdigital.uss.cl/desarrollo/fundamentos-layout

Clases para controlar la alineación de los elementos a lo largo del eje transversal.

```html
1<div class="flex align-items-start">...</div>
2<div class="flex align-items-end">...</div>
3<div class="flex align-items-baseline">...</div>
4
5<div class="flex align-items-lg-center">...</div>
6<div class="flex align-item-xl-stretch">...</div>
```

--------------------------------

### Estructura HTML del Modal

Source: https://kitdigital.uss.cl/desarrollo/componentes-modal

Define la estructura base del modal utilizando la etiqueta dialog y las clases CSS correspondientes para el cuerpo y pie del componente.

```html
<dialog class="uss-modal" data-uss-modal-id="modal-1">
  <div class="uss-modal__body">
    <div class="uss-modal__icon uss-modal__icon--sm uss-modal__icon--info">
      <i class="uss-icon ri-information-line"></i>
    </div>
    <div class="w-100 uss-modal__body-content">
      <h4>Consectetur adipiscing #1</h4>
      <p>
        Lectus magna fringilla urna, porttitor rhoncus dolor purus non enim
        praesent elementum facilisis leo, vel fringilla est ullamcorper eget
        nulla facilisi etiam dignissim diam quis
      </p>
    </div>
  </div>
  <div class="uss-modal__footer">
    <a
      href="#"
      class="uss-btn uss-btn--secondary col-3 justify-content-center"
      data-uss-modal-close-on-click
    >
      Volver
    </a>
    <a
      href="#"
      class="uss-btn uss-btn--primary col-3 justify-content-center"
      data-uss-modal-close-on-click
      onclick="alert('Acción de prueba')"
    >
      Acción
    </a>
  </div>
</dialog>
```

--------------------------------

### CarouselHero

Source: https://kitdigital.uss.cl/desarrollo/componentes-carousel-react

Componente contenedor diseñado para carruseles de tipo Hero, permitiendo la inclusión de items como elementos hijos.

```APIDOC
## CarouselHero

### Descripción
Contenedor especializado para carruseles Hero. Requiere que los items del carrusel sean pasados como elementos hijos.

### Importación
import { CarouselHero } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Import Breadcrumb Component

Source: https://kitdigital.uss.cl/desarrollo/componentes-breadcrumb-react

Required import statement to use the Breadcrumb component from the library.

```javascript
import { Breadcrumb } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### Import Card component

Source: https://kitdigital.uss.cl/desarrollo/componentes-cards-react

Required import statement to use the Card component from the USS React library.

```javascript
import { Card } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

--------------------------------

### AlertMessage Component API

Source: https://kitdigital.uss.cl/desarrollo/componentes-alert-message-react

The AlertMessage component is used to display contextual alerts. It can be implemented using either 'children' or 'content' props to define the message body.

```APIDOC
## AlertMessage Component

### Description
The AlertMessage component allows displaying important notifications to the user. It is ideal for communicating system states, errors, warnings, confirmations, or relevant information.

### Props
- **variant** (string) - Optional - Defines the alert type and visual appearance. Options: "info", "success", "warning", "error".
- **title** (string) - Optional - Main title of the alert message.
- **icon** (IconName) - Optional - Custom icon for the alert.
- **onClose** (() => void) - Optional - Callback function executed when the alert is closed.
- **children** (ReactNode) - Optional - Message content as children elements. Cannot be used with 'content'.
- **content** (string | ReactNode) - Optional - Message content. Cannot be used with 'children'.

### Usage Example
```javascript
import { AlertMessage } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";

<AlertMessage 
  variant="info" 
  title="Información importante" 
  onClose={() => console.log("Closed")}>
  Esta es una alerta informativa.
</AlertMessage>
```
```

--------------------------------

### CarouselCards

Source: https://kitdigital.uss.cl/desarrollo/componentes-carousel-react

Componente contenedor para carruseles de tarjetas. Acepta elementos hijos directamente sin requerir un componente de items dedicado.

```APIDOC
## CarouselCards

### Descripción
Contenedor principal para carruseles de tipo tarjeta. Los elementos hijos se renderizan dentro del carrusel.

### Importación
import { CarouselCards } from "@ussebastian/kitdigital-react/dist/uss-react.es.js";
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.