# Construye interfaces claras y consistentes

> Documentación de QuicklyCSS V2 2.0.0-alpha.2. Versión preliminar.

- Página canónica: https://quicklycss.cl/docs/components.php
- Catálogo de API: https://quicklycss.cl/quicklycss-api.json
- Índice para IA: https://quicklycss.cl/llms.txt

Sistema de componentes · Quickly V2

Una colección de patrones accesibles que comparte la misma escala, los mismos tokens y la misma lógica de composición del core. Elige una anatomía, añade utilidades y adapta el resultado a cada contexto.

v2.0

◇
## Anatomía predecible
Las clases `.q-*` nombran cada pieza y mantienen una estructura reconocible.

⌁
## Accesibilidad desde HTML
Los controles parten de elementos nativos, foco visible y relaciones ARIA explícitas.

↗
## Interacción proporcional
El módulo JavaScript sólo interviene cuando el comportamiento no puede resolverse con HTML.

16  componentes documentados

4  familias funcionales

1  lenguaje de composición

0  dependencias de interfaz

i

## Una regla para toda la colección
Las clases de componente entregan la anatomía; las utilidades de Quickly controlan distribución, espacio, color, alineación, estados y responsive. Así cada pieza se adapta sin perder identidad.

Del patrón al resultado

## Una misma lógica para los 16 componentes
La anatomía aporta significado, las utilidades resuelven la presentación y el comportamiento sólo se añade cuando la interfaz necesita coordinar estados.

01 · Anatomía  Componente
`.q-card``.q-card__body`
Define la responsabilidad y las partes estables.

+

02 · Presentación  Utilidades
`grid g-16 p-24``text-center`
Ajustan layout, espacio, color y responsive.

+

03 · Si hace falta  Comportamiento
`data-qy-*``quicklycss_v2_components.js`
Sincroniza estados que HTML no resuelve por sí solo.

=

Resultado  Interfaz coherente
Legible, accesible y adaptable sin cambiar de lenguaje.

CSS   Presentación directa  para Card, Badge, Progress, Loading y Table.

HTML nativo   Interacción del navegador  para Dropdown y Accordion.

JS opcional   Estados coordinados  para Tabs, Modal, Offcanvas y Carousel.

Elige por intención

## Mapa de componentes
Empieza por la tarea que debe resolver la interfaz. Cada familia reúne componentes con una responsabilidad concreta.

01 · 4 componentes Presentar y comunicar Superficies, mensajes, etiquetas y navegación principal. Card · Alert · Badge · Navbar →
02 · 5 componentes Mostrar y alternar Opciones, paneles, capas y mensajes temporales. Dropdown · Tabs · Accordion · Modal · Toast →
03 · 3 componentes Capturar y organizar Entrada de datos, lectura tabular y navegación paginada. Form · Table · Pagination →
04 · 4 componentes Orientar el proceso Contenido lateral, progreso, espera y secuencias navegables. Offcanvas · Progress · Loading · Carousel →

Familia 01 · Presentar y comunicar

## Fundamentos visuales
Cuatro piezas para agrupar contenido, comunicar estados y establecer navegación. Funcionan desde HTML y CSS.

01
### [Card](component-card.md)
`.q-card`

Nuevo

#### Arquitectura modular
Combina estructura y contenido sin estilos externos.

[Ver componente](component-card.md)

02
### [Alert](component-alert.md)
`.q-alert`

i   Cambios guardados  La nueva configuración ya está activa.

03
### [Badge](component-badge.md)
`.q-badge`

Información  Activo  Pendiente  Error

04
### [Navbar](component-navbar.md)
`.q-navbar`

Quickly
- Inicio
- Sistema
- Docs

Familia 02 · Mostrar y alternar

## Interacción y capas
Patrones para revelar opciones, alternar paneles y mostrar contenido temporal sin perder el contexto ni el control del foco.

05
### [Dropdown](component-dropdown.md)
`.q-dropdown`

Abrir opciones  EditarDuplicar

06
### [Tabs](component-tabs.md)
`.q-tabs`

Configura la información principal del proyecto.
Conecta únicamente los módulos que utilices.

07
### [Accordion](component-accordion.md)
`.q-accordion`

¿Necesita JavaScript?  No. Utiliza `details` y `summary` nativos.
¿Es responsive?  Sí. Su ancho se adapta al contenedor.

08–09
### [Modal](component-modal.md) + [Toast](component-toast.md)
`.q-modal · .q-toast`

Proyecto actualizado  Todos los cambios fueron guardados.

Familia 03 · Capturar y organizar

## Formularios y datos
Controles legibles, tablas adaptables y paginación consistente para recorrer información estructurada.

10
### [Form](component-form.md)
`.q-field · .q-input`

Nombre   Se mostrará en tu perfil.    Correo

11
### [Table](component-table.md)
`.q-table`

| Proyecto | Estado |
| --- | --- |
| Documentación V2 | Activo |
| Componentes | Nuevo |

12
### [Pagination](component-pagination.md)
`.q-pagination`

- ‹
- 1
- 2
- 3
- ›

Familia 04 · Orientar el proceso

## Navegación y estado
Patrones para abrir contenido complementario, comunicar avance, representar espera y recorrer una secuencia.

13
### [Offcanvas](component-offcanvas.md)
`.q-offcanvas`

## Menú lateral

Contenido fuera de pantalla construido con Quickly V2.

14
### [Progress](component-progress.md)
`.q-progress`

Publicando proyecto  72%
72%

15
### [Loading](component-loading.md)
`.q-spinner · .q-skeleton`

Cargando…

16
### [Carousel](component-carousel.md)
`.q-carousel`

01
### Slide 1

02
### Slide 2