Patterns
Los patterns en Nimbus son combinaciones predefinidas de componentes atómicos y compuestos que resuelven problemas comunes de diseño e interacción. Estos patterns son implementaciones probadas y validadas por nuestro equipo para ayudar a los usuarios a implementar soluciones de diseño eficientes y consistentes.
App Shell
The AppShell component is the main outer frame of an application. It provides the basic architecture to build an application inside of our admin.
Leer documentaciónCalendar
El patrón Calendar permite a los usuarios seleccionar fechas individuales o rangos de fechas dentro de una interfaz visual basada en un calendario. Es clave para flujos que requieren la definición de períodos temporales, como filtros, programación de eventos o gestión de contenidos. Su propósito es ofrecer una selección eficiente, clara y precisa de fechas. Calendar fue creado basado en ReactDayPicker y extiende sus propiedades, consultar la documentación para obtener una referencia completa de la API del componente.
Leer documentaciónCallout Card
Callout Card es un patrón que destaca contenido relevante o informativo dentro de la interfaz. Su propósito es captar la atención del usuario en momentos clave, reforzar una acción recomendada o proporcionar accesos directos a otras partes del producto. Es útil para mensajes breves con llamado a la acción o referencias contextuales.
Leer documentaciónData List
Data list es un patrón visual que permite visualizar y gestionar listados de ítems estructurados, como ordenes, información de clientes, etc. Está diseñado para mostrar información resumida de forma clara y ordenada. Su diseño modular permite visualización rápida y uso intensivo en flujos de trabajo administrativos, especialmente en contextos donde el orden o relación entre ítems es relevante.
Leer documentaciónData Table
La Data Table es un patrón que organiza información estructurada en filas y columnas, facilitando su exploración, comparación y manipulación. Se utiliza para listar grandes volúmenes de datos (como productos, pedidos o clientes), permitiendo realizar acciones de forma eficiente y precisa desde la misma vista.
Leer documentaciónEditor
El Editor es un patrón de interfaz que permite a los usuarios crear o modificar contenido textual. Su objetivo es ofrecer una experiencia clara, eficiente y flexible para tareas que requieren edición o carga de gran cantidad de contenido textual o entradas de texto enriquecido.
Leer documentaciónEmpty Message
El patrón Empty message se utiliza para informar al usuario que no hay datos disponibles en una sección de la interfaz. Su función principal es brindar contexto, comunicar el estado vacío de forma clara, y guiar al usuario hacia la acción más relevante para resolver esa situación. Es clave para evitar confusión, mantener el foco y fomentar la productividad, especialmente al filtrar o después de eliminar contenido.
Leer documentaciónForm Field
El patrón Form Field encapsula un control de entrada (como input, select, textarea) junto con su etiqueta, ayuda contextual y mensajes de validación. Es esencial para capturar datos del usuario de forma clara, consistente y accesible. Su objetivo es maximizar la eficiencia, reducir errores y asegurar la comprensión inmediata del propósito de cada campo.
Leer documentaciónHelp Link
El patrón Help Link proporciona un acceso directo y contextual a la documentación o recursos de ayuda relevantes dentro de la interfaz de usuario. Su objetivo es brindar soporte proactivo, sin interrumpir el flujo de trabajo del usuario. Mejora la autonomía del usuario al facilitar el acceso a respuestas rápidas, especialmente en momentos de incertidumbre.
Leer documentaciónInitial Screen
Este patrón proporciona un diseño consistente para mostrar una pantalla de inicio o bienvenida. Presenta al usuario una funcionalidad o servicio, ofreciendo opciones para obtener más información o continuar.
Leer documentaciónInteractive List
La Interactive List es un patrón de interfaz que permite mostrar en formato de lista elementos de selección o acceso. Está diseñada para mejorar la productividad en tareas frecuentes como la gestión de ítems, permitiendo operar de forma rápida, accesible y sin abandonar el contexto.
Leer documentaciónLayout
The Layout component is intended for building single or multi-column layouts using predefined typologies.
Leer documentaciónMenu Button
El patrón Menu Button es un elemento interactivo cuyo objetivo es ofrecer acceso rápido a una sección o acción especifica dentro de una listado de accesos (Menu).
Leer documentaciónMenu
El componente Menu permite agrupar un conjunto de acciones o navegaciones en un listado desplegable, en ocaciones activado desde un botón o ícono. Es fundamental para presentar opciones de manera organizada, evitando el ruido visual y manteniendo la interfaz limpia. Favorece la accesibilidad a funciones secundarias sin comprometer la jerarquía visual del contenido principal.
Leer documentaciónNav Tabs
Nav Tabs es un patrón de navegación que permite a los usuarios alternar entre diferentes vistas o secciones. Se utiliza principalmente en entornos mobile y su objetivo es organizar contenido relacionado y de igual jerarquía en pestañas claramente etiquetadas, mejorando la experiencia de exploración y reduciendo la carga cognitiva.
Leer documentaciónPage
El componente Page actúa como contenedor principal de vistas. Estructura el contenido en secciones jerárquicas, proporciona contexto con títulos y descripciones, y puede incluir acciones principales (como botones). Su objetivo es ofrecer un marco consistente, claro y accesible que facilite la comprensión y ejecución de tareas.
Leer documentaciónPlan Display
El pattern PlanDisplay organiza planes u opciones de forma comparativa y visual, ideal para mostrar precios, beneficios o niveles de suscripción con disposición flexible y personalizable.
Leer documentaciónProduct Data List
El patrón Product Data List permite ver y gestionar listas resumidas de productos. Está diseñado para facilitar la selección, organización y priorización de productos relacionados, ya sean alternativos o complementarios, mediante la función de arrastrar y soltar y acciones de edición rápidas. Este patrón es ideal para flujos de trabajo de edición o configuración de productos donde es necesario mantener la relación entre los diferentes artículos del catálogo.
Leer documentaciónProduct Updates
ProductUpdates component allows the user to showcase new features or updates in a non-distractive way by displaying the information in a floating popover with a high-contrast setting that catches the eye of the user.
Leer documentaciónSide Modal
El Side Modal es un patrón de superposición lateral que permite al usuario interactuar con contenido adicional sin abandonar la vista principal. Aparece desde el borde derecho o izquierdo de la pantalla, sin bloquear completamente el fondo, lo que favorece la continuidad del contexto y la multitarea. Su objetivo es facilitar flujos secundarios, edición rápida o tareas complementarias a la vista principal.
Leer documentaciónThumbnail With Action
The Thumbnail With Action pattern allows you to add interactive elements to image thumbnails. By overlaying custom content onto a thumbnail component in one of the four corners, you can embed atomic components such as buttons, icons, or links that enable users to perform specific actions related to the image.
Leer documentación