®Design system
UI Catalog
Separado como en shadcn/ui: Components son primitivos; Elements son composiciones (HeaderPage, Hero, Checkpoint, Trace…).
48 components · 18 elements · 66 total
Components
Piezas base de shadcn/ui en components/ui.
- AccordionSección colapsable de una o varias piezas de contenido.
- AlertMensaje destacado para información o errores.
- Alert DialogDiálogo modal que interrumpe al usuario con contenido importante y espera una respuesta.
- AvatarImagen de perfil con fallback de iniciales.
- BadgeEtiqueta compacta para estados o categorías.
- BreadcrumbRuta de navegación jerárquica.
- ButtonBotón con variantes y tamaños del design system.
- Button GroupGrupo de botones relacionados.
- CalendarSelector de fechas basado en DayPicker.
- CardContenedor con encabezado, contenido y pie.
- CarouselCarrusel de diapositivas con navegación.
- ChartWrappers de Recharts con tema Traky.
- CheckboxCasilla de verificación.
- Code BlockBloque de código con variantes default y destructive.
- CollapsibleContenido que se muestra u oculta al interactuar.
- CommandPaleta de comandos / búsqueda rápida (cmdk).
- DialogModal para formularios o contenido enfocado.
- DrawerPanel deslizante desde el borde (móvil / desktop).
- Dropdown MenuMenú desplegable de acciones.
- EmptyEstado vacío cuando no hay datos que mostrar.
- FieldComposición de label, control, ayuda y error.
- Hover CardTarjeta preview al pasar el cursor.
- InputCampo de texto de una línea.
- Input GroupInput con addons (prefijo, sufijo, botones).
- Input OTPEntrada de códigos OTP por dígitos.
- ItemFila / ítem reutilizable para listas.
- KbdRepresentación tipográfica de teclas.
- LabelEtiqueta accesible para controles de formulario.
- MapMapa interactivo (MapLibre / wrappers Traky).
- MarkerNota o separador entre turnos (AI Elements / Trace).
- Navigation MenuMenú de navegación con paneles.
- PaginationControles de paginación.
- PopoverPanel flotante anclado a un trigger.
- ProgressBarra de progreso.
- SelectSelector desplegable de opciones.
- SeparatorSeparador visual horizontal o vertical.
- SheetPanel lateral modal.
- SidebarShell de sidebar colapsable (app shell).
- SkeletonPlaceholder de carga.
- SonnerToasts con sonner (Toaster + toast()).
- SpinnerIndicador de carga circular.
- SwitchInterruptor on/off.
- TableTabla HTML estilizada.
- TabsPestañas para alternar paneles de contenido.
- TextareaCampo de texto multilínea.
- ToggleBotón con estado pressed.
- Toggle GroupGrupo de toggles (single o multiple).
- TooltipTexto de ayuda al hover/focus.
Elements
Patrones compuestos (más de un componente): cabeceras, hero, AI Elements, efectos.
- Animated BeamHaz animado que conecta dos elementos en la UI.
- Animated ListLista con entrada animada de ítems.
- Bento GridGrid tipo bento para destacar módulos o features.
- BubbleBurbuja de chat para mensajes de usuario o asistente.
- CheckpointPunto de restauración en un hilo (Marker + Button Restore).
- Data TableTabla rica (TanStack Table): sort, columnas, resize, reorder y view options. Misma base que /enterprise/packages.
- Entity IconEntityIcon: tile primary con Card normal (gloss de marca).
- Geo SelectorsSelectores geo CSC: país → provincia → ciudad, con JSON de app + raw CSC.
- GlobeGlobo 3D interactivo (cobe).
- Header PageCabecera de página enterprise: icono, título, descripción, acción y toolbar.
- HeroHero de marketing (badge, título, CTA, device). Composición de landing.
- MarqueeCarrusel infinito horizontal o vertical.
- MessageContenedor de turno de chat (avatar, content, footer).
- Number TickerNúmero animado al entrar en viewport.
- Package Multi RowsPackageMultiRowsFields: filas multi-paquete con preview JSON (creación masiva).
- Phone Number InputPhoneNumberInput: país + número nacional, con JSON e164 para API.
- TraceLíneas de pasos para reasoning, tool calls, sources y más (AI / agentic UI).
- Warehouse Rack BoardMapa de racks del almacén: grilla de celdas, drag & drop de posiciones y JSON para persistir.
Formularios
Entradas, selección y controles de campo.
Layout
Estructura, contenedores y composición.
Overlays
Diálogos, paneles y menús flotantes.
Feedback
Estados, avisos y progreso.
Datos
Tablas, listas y visualización.
Efectos
Animaciones y piezas visuales.