# Lexy Kit — contexto completo (HTML) Lexy Design System en HTML plano. Enlaza `https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/kit.css` (tokens + estilo) y `https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/kit.js` (overlays). Usa tokens semánticos. Catálogo y guía: https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/llms.txt · https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/AGENTS.md. ## Componentes ### Accordion Secciones colapsables para mostrar detalle bajo demanda (Radix). Progressive disclosure: muestra primero los títulos y despliega el contenido al pedirlo. El componente vive en tu proyecto: instálalo con `create-lexy add accordion` y edítalo con libertad. ```html

``` ### AlertDialog (overlay: modal) Confirmación modal que **interrumpe** (rol `alertdialog`): la persona debe elegir entre cancelar o confirmar — no hay X, ni cierre con click afuera. Para destruir, descartar cambios o salir de un flujo con costo. El componente vive en tu proyecto: instálalo con `create-lexy add alert-dialog` y edítalo con libertad. ```html ``` ### AppAccordion Acordeón de aplicación **data-driven**. Describe los items como datos (`items`) ```html

``` ### AppDialog (overlay: modal) Diálogo de aplicación al estilo **Material 3**. Estructura canónica sin dividers: El componente vive en tu proyecto: instálalo con `create-lexy add app-dialog` y edítalo con libertad. ```html ``` ### AppHeaderBar Barra de navegación superior **data-driven**. Describe la navegación como datos ```html
Lexy
``` ### AppSidebar Barra lateral de navegación **data-driven**. Describes la navegación como datos ```html
Contenido principal
``` ### Avatar Imagen de perfil con fallback. Para identificación visual. El componente vive en tu proyecto: instálalo con `create-lexy add avatar` y edítalo con libertad. ```html LX ``` ### Badge Etiqueta de estado o categoría, **no interactiva** (``). Para marcar estados ("Activo", "Pendiente") o clasificar. El componente vive en tu proyecto: instálalo con `create-lexy add badge` y edítalo con libertad. ```html Activo ``` ### BrandBackground Fondos oficiales del manual de marca Lexy (sección 05. Fondos) como componente: ```html
``` ### Breadcrumb Componente Breadcrumb. El componente vive en tu proyecto: instálalo con `create-lexy add breadcrumb` y edítalo con libertad. ```html ``` ### Button Botón de acción. Renderiza un ` ``` ### ButtonGroup Agrupa botones relacionados en una sola unidad visual. Sirve para acciones hermanas, comandos de toolbar o split actions. No mantiene estado de selección por sí mismo. El componente vive en tu proyecto: instálalo con `create-lexy add button-group` y edítalo con libertad. ```html
``` ### Calendar Selector de fechas construido sobre [React DayPicker](https://daypicker.dev), ```html
julio 2026
``` ### Card Contenedor de contenido. Para agrupar información relacionada. El componente vive en tu proyecto: instálalo con `create-lexy add card` y edítalo con libertad. ```html
Inicia sesión
Ingresa tu correo para acceder a tu cuenta.
¿Olvidaste tu contraseña?
``` ### Chart Gráficos construidos sobre [Recharts](https://recharts.org). No es un componente ```html
Visitantes
Enero – Junio 2026
EneFebMarAbrMayJun
Escritorio
Móvil
Tendencia de los últimos 6 meses.
``` ### Checkbox Casilla de verificación (Radix). Para un sí/no independiente o para elegir **varias** opciones de una lista. No trae label: emparéjalo con `Label`. El componente vive en tu proyecto: instálalo con `create-lexy add checkbox` y edítalo con libertad. ```html
``` ### Combobox (overlay: anchored) Campo de entrada con lista desplegable filtrable. Para búsqueda + selección. El componente vive en tu proyecto: instálalo con `create-lexy add combobox` y edítalo con libertad. ```html
``` ### Command Paleta de comandos. Para búsqueda y acciones rápidas. El componente vive en tu proyecto: instálalo con `create-lexy add command` y edítalo con libertad. ```html
``` ### CounterBadge Badge con contador numérico. Para notificaciones. El componente vive en tu proyecto: instálalo con `create-lexy add counter-badge` y edítalo con libertad. ```html
31299+
``` ### DatePicker (overlay: anchored) Selector de fecha en un campo: un `Button` que abre un `Popover` con un ```html ``` ### Dialog (overlay: modal) Diálogo modal primitivo (Radix). **Para la mayoría de los casos usa `AppDialog`**, que ya arma la composición Material 3 (icono, título, descripción, acciones). Usa `Dialog` directo solo para layouts modales a medida sin esa estructura. El componente vive en tu proyecto: instálalo con `create-lexy add dialog` y edítalo con libertad. ```html ``` ### DropdownMenu (overlay: anchored) Menú de **acciones** contextuales que se abre desde un disparador (Radix). Para agrupar acciones secundarias ("⋯", "Opciones") sin llenar la pantalla de botones. El componente vive en tu proyecto: instálalo con `create-lexy add dropdown-menu` y edítalo con libertad. ```html ``` ### Empty Estado vacío para cuando no hay datos, resultados o contenido que mostrar. ```html
Sin resultados
No se encontraron elementos que coincidan con tu búsqueda.
``` ### FeatureCard Tarjeta con icono y descripción. Para destacar características. El componente vive en tu proyecto: instálalo con `create-lexy add feature-card` y edítalo con libertad. ```html

Rendimiento

Optimizado para cargas rápidas y baja latencia.

``` ### Form Formularios con validación (patrón shadcn sobre `react-hook-form` + `zod`). `Form` provee el contexto, `FormField` registra cada campo y `FormItem`/`FormLabel`/`FormControl` cablean ids y `aria-*` automáticamente; `FormMessage` muestra el error del campo. `create-lexy add form` instala también `zod` y `@hookform/resolvers`. El componente vive en tu proyecto: instálalo con `create-lexy add form` y edítalo con libertad. ```html

Usaremos este correo para avisarte.

``` ### HeaderBar Barra superior de aplicación o sitio: marca a la izquierda y acciones a la derecha. Renderiza un `
` semántico. El componente vive en tu proyecto: instálalo con `create-lexy add header-bar` y edítalo con libertad. ```html
Lexy
``` ### Input Campo de texto de una línea. Renderiza un `` nativo; acepta todos sus atributos (`type`, `value`, `onChange`, `placeholder`, `aria-*`). El componente vive en tu proyecto: instálalo con `create-lexy add input` y edítalo con libertad. ```html
``` ### Label Etiqueta para campos de formulario. Incluye indicador de requerido. El componente vive en tu proyecto: instálalo con `create-lexy add label` y edítalo con libertad. ```html
``` ### Logo Logo de Lexy. Para marca del producto. El componente vive en tu proyecto: instálalo con `create-lexy add logo` y edítalo con libertad. ```html
LexyLexy
LexyLexy
``` ### Menubar Barra de menús horizontal. Para navegación de aplicación. El componente vive en tu proyecto: instálalo con `create-lexy add menubar` y edítalo con libertad. ```html ``` ### NavigationMenu Menú de navegación con dropdowns. Para sitios web. El componente vive en tu proyecto: instálalo con `create-lexy add navigation-menu` y edítalo con libertad. ```html ``` ### Pagination Navegación de paginación para listados, tablas y resultados de búsqueda. ```html ``` ### Popover (overlay: anchored) Panel flotante que se ancla a un elemento. Para contenido interactivo. El componente vive en tu proyecto: instálalo con `create-lexy add popover` y edítalo con libertad. ```html ``` ### ProfileCard Tarjeta de perfil. Para mostrar información de usuario. El componente vive en tu proyecto: instálalo con `create-lexy add profile-card` y edítalo con libertad. ```html
OB

Oscar Barría

Frontend Engineer

``` ### Progress Barra de progreso. Para mostrar avance. El componente vive en tu proyecto: instálalo con `create-lexy add progress` y edítalo con libertad. ```html
``` ### RadioGroup Selección **única** entre opciones visibles (Radix). Usa `RadioGroup` como contenedor y `RadioGroupItem` por opción. El componente vive en tu proyecto: instálalo con `create-lexy add radio-group` y edítalo con libertad. ```html
``` ### ScrollArea Área de scroll estilizada con barras de scroll personalizadas. ```html
Item 1
Descripción del item 1 para mostrar scroll.
Item 2
Descripción del item 2 para mostrar scroll.
Item 3
Descripción del item 3 para mostrar scroll.
Item 4
Descripción del item 4 para mostrar scroll.
Item 5
Descripción del item 5 para mostrar scroll.
Item 6
Descripción del item 6 para mostrar scroll.
Item 7
Descripción del item 7 para mostrar scroll.
Item 8
Descripción del item 8 para mostrar scroll.
Item 9
Descripción del item 9 para mostrar scroll.
Item 10
Descripción del item 10 para mostrar scroll.
Item 11
Descripción del item 11 para mostrar scroll.
Item 12
Descripción del item 12 para mostrar scroll.
Item 13
Descripción del item 13 para mostrar scroll.
Item 14
Descripción del item 14 para mostrar scroll.
Item 15
Descripción del item 15 para mostrar scroll.
Item 16
Descripción del item 16 para mostrar scroll.
Item 17
Descripción del item 17 para mostrar scroll.
Item 18
Descripción del item 18 para mostrar scroll.
Item 19
Descripción del item 19 para mostrar scroll.
Item 20
Descripción del item 20 para mostrar scroll.
``` ### Searchbox Campo de búsqueda con icono. Para búsquedas. El componente vive en tu proyecto: instálalo con `create-lexy add searchbox` y edítalo con libertad. ```html
``` ### Select (overlay: anchored) Lista desplegable de selección **única** (Radix). Ahorra espacio cuando hay muchas opciones y no necesitas verlas todas a la vez. El componente vive en tu proyecto: instálalo con `create-lexy add select` y edítalo con libertad. ```html
``` ### Separator Separador visual. Para dividir secciones. El componente vive en tu proyecto: instálalo con `create-lexy add separator` y edítalo con libertad. ```html

Sección A

Sección B

``` ### Sheet (overlay: sheet) Panel lateral deslizante. Alternativa a `Dialog` para contenido secundario que ```html ``` ### Sidebar Primitivas internas (estilo shadcn) que usa `AppSidebar` por debajo. **No las compongas a mano para una barra de navegación: usa `AppSidebar`** (data-driven). Recurre a estas primitivas solo para layouts a medida. El componente vive en tu proyecto: instálalo con `create-lexy add sidebar` y edítalo con libertad. ```html
Contenido
Área de contenido principal.
``` ### Skeleton Esqueleto de carga. Para estados de espera. El componente vive en tu proyecto: instálalo con `create-lexy add skeleton` y edítalo con libertad. ```html
``` ### Slider Control deslizante. Para selección de rango numérico. El componente vive en tu proyecto: instálalo con `create-lexy add slider` y edítalo con libertad. ```html
``` ### Snippet Fragmento de código. Para mostrar código con copia. El componente vive en tu proyecto: instálalo con `create-lexy add snippet` y edítalo con libertad. ```html 
pnpm create lexy@latest
``` ### Spinner Indicador de carga visual. Usa el icono `Loader2` de Lucide con animación de rotación. El componente vive en tu proyecto: instálalo con `create-lexy add spinner` y edítalo con libertad. ```html ``` ### StatusDot Punto de estado con color, pensado para acompañar texto (estado de una fila, disponibilidad, conexión). El color **nunca** es la única señal: va con texto o `aria-label`. El componente vive en tu proyecto: instálalo con `create-lexy add status-dot` y edítalo con libertad. ```html
ActivoPendienteErrorEn revisiónDestacadoInactivo
``` ### Switch Interruptor de palanca. Para activar/desactivar estados. El componente vive en tu proyecto: instálalo con `create-lexy add switch` y edítalo con libertad. ```html
``` ### Table Tabla de datos para comparar/escanear filas y columnas. Componente compuesto (`TableHeader`, `TableContent`, `TableRow`, `TableCell` — también disponibles como alias `Table.Header`, `Table.Content`, `Table.Row`, `Table.Cell`) basado en CSS grid. El componente vive en tu proyecto: instálalo con `create-lexy add table` y edítalo con libertad. ```html
Nombre
Estado
Dueño
Inicio
Activo
Producto
Registro
En revisión
Diseño
Facturación
Activo
Operaciones
Ajustes
Pendiente
Plataforma
``` ### Tabs Pestañas para alternar entre vistas **del mismo nivel** sin salir de la página (Radix). Progressive disclosure: muestra una categoría a la vez. El componente vive en tu proyecto: instálalo con `create-lexy add tabs` y edítalo con libertad. ```html
Gestiona los datos de tu cuenta.
``` ### Tag Etiqueta de categoría. Para clasificación. El componente vive en tu proyecto: instálalo con `create-lexy add tag` y edítalo con libertad. ```html Etiqueta ``` ### Textarea Campo de texto multilínea, redimensionable verticalmente (alto mínimo predefinido). Renderiza un ` ``` ### Toaster Notificaciones efímeras de la app (sobre **Sonner**, tematizado con tokens Lexy). Se monta **una vez** en el layout raíz y se dispara imperativo con `toast.*` desde cualquier parte. Reemplaza al `Toast` presentacional del sistema antiguo (deprecado). El componente vive en tu proyecto: instálalo con `create-lexy add toaster` y edítalo con libertad. ```html
``` ### Tooltip (overlay: anchored) Etiqueta breve que aparece al pasar el cursor o enfocar (Radix). Para **ayuda complementaria**, nunca para información esencial. El componente vive en tu proyecto: instálalo con `create-lexy add tooltip` y edítalo con libertad. ```html ``` ### Tree Árbol jerárquico. Para navegación en profundidad. El componente vive en tu proyecto: instálalo con `create-lexy add tree` y edítalo con libertad. ```html
src
index.ts
package.json
``` ## Blocks ### confirmacion Pantalla de confirmación / éxito para **mundo cliente**: celebra breve, dice qué pasa ahora y dónde seguir. Instálalo con `create-lexy add confirmacion` — trae `Button` (el icono es de lucide). La vista queda en tu proyecto (`views/EnvioConfirmado.tsx`): edítala con libertad. ```html

¡Enviamos tus documentos!

El equipo legal los está revisando. Podrás seguir su estado en la pestaña «Enviados» y te avisaremos si falta algo.

``` ### crm-app-layout Estructura persistente de la app interna (**CRM**): navegación lateral colapsable data-driven (`AppSidebar`) y área de trabajo (`SidebarInset`). Instálalo con `create-lexy add crm-app-layout` — trae `AppSidebar`, `Sidebar` y `Logo`. La vista queda en tu proyecto (`views/AppLayout.tsx`): edítala con libertad. ```html
Lexy
Contenido de la página
``` ### crm-desk Desk de trabajo para **CRM**: ancho completo, toolbar con búsqueda y acción primaria, tabla densa y escaneable con estado por fila, y paginación al pie. Instálalo con `create-lexy add crm-desk` — trae `Table`, `StatusDot`, `Pagination`, `Input` y `Button`. La vista queda en tu proyecto (`views/CasosDesk.tsx`): edítala con libertad. ```html

Casos

24 activos · 3 vencen hoy

  • María Pérez

    En revisión

    Despido

    Vence hoy

  • Juan Soto

    Al día

    Deuda

    12 días

``` ### crm-detalle-caso Detalle master-detail para **CRM**: contexto del caso a la izquierda (panel fijo de 288px), trabajo al centro en tabs, acción primaria a la mano. La información que se consulta junta vive junta. Instálalo con `create-lexy add crm-detalle-caso` — trae `Tabs`, `Badge`, `Separator` y `Button`. La vista queda en tu proyecto (`views/CasoDetalle.tsx`): edítala con libertad. ```html

Gestiones

``` ### intake-wizard Paso de wizard de intake para **mundo cliente**: un paso enfocado, columna angosta (`max-w-xl`), indicador de avance arriba y CTA al final. Instálalo con `create-lexy add intake-wizard` — trae consigo `Progress`, `Input`, `Label` y `Button`. La vista queda en tu proyecto (`views/IntakeDatosPersonales.tsx`): edítala con libertad. ```html

Paso 2 de 4

Cuéntanos tus datos

Usaremos esta información para preparar la primera revisión de tu caso.

Datos personales

Te escribiremos solo para avanzar con tu caso.

``` ### login Pantalla de acceso: una sola tarea, foco único, ayuda contextual breve. Instálalo con `create-lexy add login` — trae `Card`, `Input`, `Label` y `Button`. La vista queda en tu proyecto (`views/Login.tsx`): edítala con libertad. ```html
Ingresa a Lexy
Te acompañamos con tu caso desde aquí.
```