# Lexy Kit — catálogo para agentes

> Lexy Design System en **HTML plano** (sin React ni Radix) para construir
> prototipos low-fi con el look real de Lexy. Artefacto derivado del registry;
> no se edita a mano. Esta página es el punto de entrada: léela y sigue los
> enlaces (texto plano servido por CDN) para el markup de cada pieza.

## Cómo construir un prototipo

1. Enlaza el tema y el runtime de overlays:
   `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/kit.css">` y
   `<script src="https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/kit.js" defer></script>`.
2. Toma el markup de un componente o block (enlaces abajo) y compón la página.
3. Usa **tokens semánticos** (`bg-primary`, `text-foreground`, `border-border`,
   `text-muted-foreground`…); el estilo ya está resuelto en `kit.css`.
4. Para overlays, copia el bloque `<div class="kit-ix">` (estado *Interactivo*)
   y carga `kit.js`: el toggle (click/hover, backdrop, Escape) es automático.
5. **Define el mundo** (cliente vs CRM) y sigue las pautas de diseño.

Guía completa: https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/AGENTS.md · Todo inline: https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/llms-full.txt ·
Índice máquina-legible: https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/manifest.json

## Componentes

- [Accordion](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/accordion.html): 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.
- [AlertDialog](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/alert-dialog.html) _(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.
- [AppAccordion](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/app-accordion.html): Acordeón de aplicación **data-driven**. Describe los items como datos (`items`)
- [AppDialog](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/app-dialog.html) _(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.
- [AppHeaderBar](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/app-header-bar.html): Barra de navegación superior **data-driven**. Describe la navegación como datos
- [AppSidebar](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/app-sidebar.html): Barra lateral de navegación **data-driven**. Describes la navegación como datos
- [Avatar](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/avatar.html): 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.
- [Badge](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/badge.html): Etiqueta de estado o categoría, **no interactiva** (`<span>`). 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.
- [BrandBackground](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/brand-background.html): Fondos oficiales del manual de marca Lexy (sección 05. Fondos) como componente:
- [Breadcrumb](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/breadcrumb.html): Componente Breadcrumb. El componente vive en tu proyecto: instálalo con `create-lexy add breadcrumb` y edítalo con libertad.
- [Button](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/button.html): Botón de acción. Renderiza un `<button>` nativo; acepta todos sus atributos (`onClick`, `type`, `disabled`, `aria-*`). El componente vive en tu proyecto: instálalo con `create-lexy add button` y edítalo con libertad.
- [ButtonGroup](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/button-group.html): 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.
- [Calendar](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/calendar.html): Selector de fechas construido sobre [React DayPicker](https://daypicker.dev),
- [Card](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/card.html): 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.
- [Chart](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/chart.html): Gráficos construidos sobre [Recharts](https://recharts.org). No es un componente
- [Checkbox](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/checkbox.html): 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.
- [Combobox](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/combobox.html) _(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.
- [Command](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/command.html): 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.
- [CounterBadge](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/counter-badge.html): 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.
- [DatePicker](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/date-picker.html) _(overlay: anchored)_: Selector de fecha en un campo: un `Button` que abre un `Popover` con un
- [Dialog](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/dialog.html) _(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.
- [DropdownMenu](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/dropdown-menu.html) _(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.
- [Empty](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/empty.html): Estado vacío para cuando no hay datos, resultados o contenido que mostrar.
- [FeatureCard](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/feature-card.html): 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.
- [Form](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/form.html): 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.
- [HeaderBar](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/header-bar.html): Barra superior de aplicación o sitio: marca a la izquierda y acciones a la derecha. Renderiza un `<header>` semántico. El componente vive en tu proyecto: instálalo con `create-lexy add header-bar` y edítalo con libertad.
- [Input](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/input.html): Campo de texto de una línea. Renderiza un `<input>` 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.
- [Label](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/label.html): 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.
- [Logo](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/logo.html): 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.
- [Menubar](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/menubar.html): 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.
- [NavigationMenu](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/navigation-menu.html): 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.
- [Pagination](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/pagination.html): Navegación de paginación para listados, tablas y resultados de búsqueda.
- [Popover](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/popover.html) _(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.
- [ProfileCard](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/profile-card.html): 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.
- [Progress](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/progress.html): Barra de progreso. Para mostrar avance. El componente vive en tu proyecto: instálalo con `create-lexy add progress` y edítalo con libertad.
- [RadioGroup](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/radio-group.html): 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.
- [ScrollArea](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/scroll-area.html): Área de scroll estilizada con barras de scroll personalizadas.
- [Searchbox](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/searchbox.html): 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.
- [Select](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/select.html) _(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.
- [Separator](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/separator.html): Separador visual. Para dividir secciones. El componente vive en tu proyecto: instálalo con `create-lexy add separator` y edítalo con libertad.
- [Sheet](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/sheet.html) _(overlay: sheet)_: Panel lateral deslizante. Alternativa a `Dialog` para contenido secundario que
- [Sidebar](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/sidebar.html): 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.
- [Skeleton](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/skeleton.html): 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.
- [Slider](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/slider.html): 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.
- [Snippet](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/snippet.html): 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.
- [Spinner](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/spinner.html): 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.
- [StatusDot](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/status-dot.html): 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.
- [Switch](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/switch.html): 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.
- [Table](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/table.html): 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.
- [Tabs](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/tabs.html): 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.
- [Tag](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/tag.html): 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.
- [Textarea](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/textarea.html): Campo de texto multilínea, redimensionable verticalmente (alto mínimo predefinido). Renderiza un `<textarea>` nativo. El componente vive en tu proyecto: instálalo con `create-lexy add textarea` y edítalo con libertad.
- [Toaster](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/toaster.html): 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.
- [Tooltip](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/tooltip.html) _(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.
- [Tree](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/components/tree.html): Á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.

## Blocks (páginas compuestas)

- [confirmacion](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/blocks/confirmacion.html): 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.
- [crm-app-layout](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/blocks/crm-app-layout.html): 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.
- [crm-desk](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/blocks/crm-desk.html): 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.
- [crm-detalle-caso](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/blocks/crm-detalle-caso.html): 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.
- [intake-wizard](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/blocks/intake-wizard.html): 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.
- [login](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/blocks/login.html): 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.

## Pautas de diseño

- [arquitectura-informacion-ux](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/pautas/arquitectura-informacion-ux.md): Esta pauta guía cómo ordenar información en interfaces Lexy para que sean claras, progresivas y fáciles de leer. Úsala junto con la filosofía de cliente o CRM y la guía de UX writing.
- [buenas-practicas](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/pautas/buenas-practicas.md): Reglas de oficio accionables: cuándo usar qué componente, cómo armar formularios,
- [calidad-industria](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/pautas/calidad-industria.md): Esta pauta define la **vara de calidad** de una interfaz Lexy: qué separa una
- [diseno-cliente](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/pautas/diseno-cliente.md): > Hacemos fácil lo legal.
- [diseno-crm-lexy](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/pautas/diseno-crm-lexy.md): > La interfaz existe para que el trabajo se haga fácil. Todo gira en torno a la tarea.
- [patrones-de-codigo](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/pautas/patrones-de-codigo.md): Patrones que mantienen legible y mantenible el código React de un proyecto Lexy: composición antes que props-monolito, estado de formulario consolidado, constantes tipadas fuera del JSX y convenciones de assets y fuentes. Nacen de la auditoría de desarrollo del bootstrap (junio 2026).
- [recetas-layout](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/pautas/recetas-layout.md): Composiciones canónicas listas para adaptar. Cada receta indica para qué **mundo**
- [sistema-visual](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/pautas/sistema-visual.md): Esta pauta da los **valores concretos** (espaciado, densidad, tipografía, color de
- [ux-writing](https://cdn.jsdelivr.net/npm/@lexydesign/kit@latest/kit/pautas/ux-writing.md): > Documento para IA y diseñadores. Define cómo se escribe dentro de los productos Lexy: tono, patrones de microcopy y reglas por tipo de componente. Los ejemplos están tomados de los productos Lexy (flujo de Carga de Documentos y desks del equipo).