Componentes
Cada componente que documenta el sistema, en vivo, con las props que especifica su página. Activa el modo oscuro en el encabezado para revisar ambos temas.
Tag y Badge
Un Tag es una etiqueta pequeña en forma de píldora que marca una sección o categoría; un Badge muestra un número.
Tags
Tags sobre Dark
Seleccionables
Badges
Card
Una Card agrupa una pieza de contenido en un panel blanco con borde Line.
Estática
Auditoría del sistema de diseño
Una revisión de tu UI actual frente a los tokens y los componentes.
Inset
Consejo
Las Cards inset pasan a segundo plano sobre una página blanca. Úsalas para notas laterales, nunca para el contenido principal.
Imagen y acciones
Ops dashboard
Input y Select
QInput recibe texto escrito. QSelect elige de una lista. Ambos comparten el mismo estilo de campo y las mismas reglas de etiquetas.
Texto
Con texto de ayuda
Error
Deshabilitado
Contraseña
Selección
Selección múltiple
Área de texto
Form
Un formulario valida en el cliente, muestra los errores junto al campo y reporta el resultado del servidor.
Invitar a un miembro
Table
QTable para datos tabulares: plana, con borde, encabezados Caption y fondo Soft al pasar el cursor.
Miembros
| Nombre | Correo | Rol | Estado | Acciones | |
|---|---|---|---|---|---|
| Aiden Clark | aiden@acme.com | Lector | Activo | ||
| Ana Ruiz | ana@acme.com | Administrador | Activo | ||
| Ben Okafor | ben@acme.com | Editor | Activo | ||
| Bianca Neri | bianca@acme.com | Administrador | Invitado | ||
| Carlos Vega | carlos@acme.com | Editor | Activo | ||
| Chloe Martin | chloe@acme.com | Lector | Activo | ||
| Dana Wolfe | dana@acme.com | Lector | Activo | ||
| Dev Patel | dev@acme.com | Administrador | Invitado | ||
| Elena Rossi | elena@acme.com | Editor | Activo | ||
| Farid Haddad | farid@acme.com | Lector | Activo | ||
| Grace Kim | grace@acme.com | Administrador | Activo | ||
| Hugo Silva | hugo@acme.com | Editor | Invitado | ||
| Ines Costa | ines@acme.com | Lector | Activo | ||
| Jonas Berg | jonas@acme.com | Administrador | Activo | ||
| Kara Nwosu | kara@acme.com | Editor | Activo | ||
| Liam Walsh | liam@acme.com | Lector | Invitado | ||
| Maya Cohen | maya@acme.com | Administrador | Activo | ||
| Noah Fischer | noah@acme.com | Editor | Activo | ||
| Olivia Brown | olivia@acme.com | Lector | Activo | ||
| Pablo Ortiz | pablo@acme.com | Administrador | Invitado | ||
| Quinn Taylor | quinn@acme.com | Editor | Activo | ||
| Rosa Lima | rosa@acme.com | Lector | Activo | ||
| Sam Lee | sam@acme.com | Administrador | Activo | ||
| Tara Singh | tara@acme.com | Editor | Invitado | ||
| Uma Rao | uma@acme.com | Lector | Activo |
Encabezado fijo
| Nombre | Rol | Ingreso |
|---|---|---|
| Aiden Clark | Lector | 27 sep 2026 |
| Rosa Lima | Lector | 18 sep 2026 |
| Ines Costa | Lector | 9 sep 2026 |
| Zoe Adams | Editor | 26 ago 2026 |
| Quinn Taylor | Editor | 17 ago 2026 |
| Hugo Silva | Editor | 8 ago 2026 |
| Yara Haddad | Administrador | 25 jul 2026 |
| Pablo Ortiz | Administrador | 16 jul 2026 |
| Grace Kim | Administrador | 7 jul 2026 |
| Xavi Puig | Lector | 24 jun 2026 |
| Olivia Brown | Lector | 15 jun 2026 |
| Farid Haddad | Lector | 6 jun 2026 |
| Wen Li | Editor | 23 may 2026 |
| Noah Fischer | Editor | 14 may 2026 |
| Elena Rossi | Editor | 5 may 2026 |
| Victor Hugo | Administrador | 22 abr 2026 |
| Maya Cohen | Administrador | 13 abr 2026 |
| Dev Patel | Administrador | 4 abr 2026 |
| Uma Rao | Lector | 21 mar 2026 |
| Liam Walsh | Lector | 12 mar 2026 |
| Chloe Martin | Lector | 3 mar 2026 |
| Dana Wolfe | Lector | 3 mar 2026 |
| Tara Singh | Editor | 20 feb 2026 |
| Kara Nwosu | Editor | 11 feb 2026 |
| Ben Okafor | Editor | 2 feb 2026 |
Dialog
QDialog con una QCard dentro, para confirmaciones y formularios cortos que bloquean la página.
Confirmación destructiva
Confirmación con plugin
Dialog con formulario
Pantalla completa en celulares
Notify
El plugin Notify de Quasar, para mensajes breves que no bloquean después de una acción.
Tipos
Positive ofrece Deshacer. Negative se queda hasta que lo descartes.
Tabs
QTabs, QTab y QTabPanels cambian entre vistas del mismo objeto sin salir de la página.
Predeterminadas
Densas, en una Card
Con íconos
List
QList y QItem para filas apiladas: navegación, configuración, listas de contactos, resultados de búsqueda.
Con borde, íconos y textos secundarios
Interactiva, con elemento activo
Densa, con separadores
Elementos expandibles
Tipografía y color
Referencia rápida. Cada valor de abajo se lee del CSS renderizado, así que muestra lo que trae este tema.
Encabezados
Roles de texto
Tokens, componentes de Quasar y patrones para cada aplicación Nuxt.
El texto Body mide 16px, con interlineado de 1.65 y el color Text.
Texto pequeño para ayudas, notas al pie y tablas densas.