Documentación
Nuestro Design System se compone de bibliotecas de componentes de React, paquetes de iconos y tokens, UI kits de Figma y herramientas y recursos para construir aplicaciones para el ecosistema de Tiendanube / Nuvemshop.
Introducción
La sección de Introducción provee las bases para utilizar Nimbus, incluyendo una guía de inicio rápido y el registro de cambios y actualizaciones de nuestras bibliotecas.
Getting started
Una breve guía para comenzar a usar componentes de Nimbus en un proyecto de React.
Leer documentaciónReleases
Registro de cambios y actualizaciones de nuestras bibliotecas y un changelog detallado de los cambios realizados.
Leer documentaciónRecursos
Nimbus proporciona una serie de recursos adicionales para los usuarios, que incluyen herramientas, librerías y archivos descargables. Estos recursos facilitan el uso y la implementación del design system, ayudando a los diseñadores y desarrolladores a maximizar la eficacia de Nimbus en sus proyectos.
Nimbus Icons
Nuestro set de iconos open-source, diseñado especialmente para Nimbus a partir de la morfología de nuestro logo, pensados para acelerar el diseño y desarrollo de nuestro ecosistema para potenciar historias en Latinoamérica. Son flexibles, locales y gratis.
Leer documentaciónHerramientas
Las herramientas de Nimbus facilitan la migración de código, mejoran el trabajo con sugerencias contextuales en entornos de desarrollo, y permiten medir la adopción y cobertura del sistema en proyectos, optimizando la eficiencia y la integración del diseño.
Migrator
Una herramienta de utilidad para migrar proyectos de Nimbus v1 a Nimbus v2.
Leer documentaciónCobertura
Al considerar Nimbus como producto en su esencia, es muy importante que contemos con métricas que aseguren que las necesidades de los usuarios se están cubriendo. Por lo tanto, para tener una visión confiable de si se están cumpliendo los objetivos y principios, y también para hacer un seguimiento detallado de esta evolución, hemos seleccionado algunas métricas que nos brindarán esta visión deseada.
Leer documentaciónTokens
Los design tokens son variables básicas que se utilizan para mantener consistencia en un sistema de diseño. En Nimbus, se refieren a los colores, tipografías, espacios y otras propiedades básicas de diseño. Los tokens se utilizan para asegurar una apariencia y sensación uniformes a través de todos los componentes y aplicaciones.
Color
Los tokens de color se componen de 5 categorías: Primary, Success, Warning, Danger y Neutral. Cada una de ellas posee una paleta ampliada de 12 tonos, de los cuales 8 están vinculados a funciones definidas.
Leer documentaciónTypography
Nuestra tipografía es la CentraNube, una adaptación de la tipografía Centra creada especialmente para Tiendanube. Esta tipografía no es libre de derechos por lo que no podemos disponibilizarla junto con el Design System. Por eso, dentro del font-stack de Nimbus, agregamos algunas fuentes de fallback para que nuestros usuarios puedan tener una experiencia óptima.
Leer documentaciónBreakpoint
Nimbus tiene breakpoints definidos para que las interfaces construidas con él se adapten de forma responsiva, proporcionando una experiencia adecuada a través de diferentes tamaños de pantalla.
Leer documentaciónShadow
Los tokens de sombra de Nimbus se basan en niveles de distancia desde el fondo, cada uno de los cuales está vinculado a un conjunto diferente de propiedades para resaltar esa característica.
Leer documentaciónShape
Las formas de Nimbus se basan en múltiplos de 4px, generando escalas de radio que pueden variar según las necesidades de la interfaz.
Leer documentaciónSpacing
El espaciado de Nimbus se basa en una grid de 4px, generando escalas de espaciado que pueden variar según las necesidades de cada interfaz, estas escalas utilizan la unidad de medida rem, que en nuestro sistema equivale a 16px.
Leer documentaciónzIndex
Nimbus cuenta con valores de z-index predefinidos para facilitar la organización a la hora de apilar elementos en la pantalla, evitando así la superposición de componentes.
Leer documentaciónComponentes atómicos
Son los bloques de construcción fundamentales en Nimbus. Se refieren a los elementos de UI más básicos, como botones, inputs, checkboxes, etc. Estos componentes atómicos son independientes y pueden ser utilizados y reutilizados para formar componentes compuestos.
Badge
El componente Badge se utiliza para comunicar cantidad de ítems o acciones pendientes.
Leer documentaciónBox
El componente Box nos permite agrupar y espaciar elementos y/u otros componentes
Leer documentaciónButton
El componente Button nos permite iniciar acciones, hacer cambios de estado o de página.
Leer documentaciónCheckbox
El componente Checkbox nos permite escoger una o varias opciones en una lista de selección.
Leer documentaciónChip
El componente Chip es utilizado para señalizar criterios o atributos relacionados a búsquedas o filtros de una lista de datos.
Leer documentaciónIcon button
El componente Icon Button se usa cuando tenemos una acción clara para el usuario, que, según el contexto en el que se encuentra, puede ser fácilmente representada por un icono.
Leer documentaciónIcon
El componente Icon es utilizado cuando necesitamos ilustrar una acción, estado o texto dentro o fuera de otro componente.
Leer documentaciónInput
El componente Input le permite a la persona usuaria ingresar o editar información en formato de texto.
Leer documentaciónLink
El componente Link nos permite navegar entre páginas internas o externas de un sitio.
Leer documentaciónList
El componente List nos permite organizar en una lista distintas informaciones con formato de texto.
Leer documentaciónPopover
El componente Popover nos permite mostrar más elementos dentro de una caja flotante.
Leer documentaciónRadio
El componente Radio nos permite seleccionar una única opción dentro de una lista de selección.
Leer documentaciónSelect
El componente Select permite a la persona usuaria seleccionar una opción dentro de una lista.
Leer documentaciónSkeleton
El componente Skeleton nos permite comunicar de forma visual que un componente está cargando.
Leer documentaciónSpinner
El componente Spinner es utilizado para informar el procesamiento de tareas.
Leer documentaciónStack
El componente Stack nos permite agrupar elementos y/o componentes de forma horizontal o vertical.
Leer documentaciónTag
El componente Tag se utiliza para categorizar información, organizar o indicar el estado de elementos o componentes usando palabras clave, iconos y colores.
Leer documentaciónText
Text es el componente de texto, utilizado para escribir y formatear bloques de contenido dentro de páginas y componentes.
Leer documentaciónTextarea
El componente Textarea permite a la persona usuaria ingresar y editar información en formato de texto largo.
Leer documentaciónTitle
Title es un componente de texto, pensado para dar jerarquía visual y semántica a los contenidos de una página.
Leer documentaciónToast
El componente Toast nos permite avisar a los usuarios en tono informativo, describiendo que algo ha pasado o está pasando, sin interrumpir la navegación.
Leer documentaciónTooltip
El componente Tooltip nos permite mostrar información adicional de una forma no intrusiva.
Leer documentaciónComponentes compuestos
En Nimbus, los componentes compuestos son bloques de diseño más complejos, formados por la unión de varios componentes atómicos. Son útiles para construir secciones específicas de una interfaz de usuario que se utilizan frecuentemente, permitiendo una mayor reutilización y eficiencia en el desarrollo.
Accordion
El componente Accordion nos permite comprimir el contenido en contenedores que pueden abrirse o cerrarse.
Leer documentaciónAlert
El componente alert nos permite comunicar sobre cambios o condiciones especiales en páginas o secciones.
Leer documentaciónCard
El componente Card nos permite agrupar contenidos y acciones relacionadas, facilitando la identificación de grupos de información.
Leer documentaciónModal
El componente Modal nos permite atraer la atención de la persona usuaria hacia un cuadro emergente que puede contener texto, acciones o formularios para realizar tareas cambiando el foco desde la operación que permanece en segundo plano. Es un componente intrusivo ya que interrumpe la operación habitual para exponer un mensaje o contenido.
Leer documentaciónPagination
El componente Pagination nos permite navegar entre una lista muy grande de entradas.
Leer documentaciónSegmented Control
El Segmented Control es un componente compuesto de selección exclusivo que permite a los usuarios elegir una o varias opciones de un grupo predefinido. Están diseñados para casos de selección rápida y contextual, como filtros de productos o vistas alternativas.
Leer documentaciónSidebar
El componente Sidebar es un contenedor flotante de tamaño grande que entra a la página desde los lados. Nos permite exponer acciones, formularios o secciones con mucha información sobre el contexto de una página.
Leer documentaciónStepper
El componente Stepper guía a los usuarios a través de un proceso dividido en pasos secuenciales, mostrando su progreso y permitiendo navegar entre etapas del flujo.
Leer documentaciónTable
El componente Table nos permite organizar los datos con una estructura tabular en una tabla.
Leer documentaciónTabs
El componente Tabs nos permite separar contenidos de una misma jerarquía en pestañas separadas.
Leer documentaciónPatterns
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ónTemplates
Plantillas listas para desarrollar aplicaciones nativas o externas para nuestro administrador de Tiendanube.
Templates
Plantillas listas para desarrollar aplicaciones nativas o externas para nuestro administrador de Tiendanube.
Ver ejemploContributing
Contributing
¡Queremos que formes parte de Nimbus! Por eso nuestro Design System es open-source y abierto a la comunidad. Todas las ideas, sugerencias y feedback que recibimos nos ayudan a mejorar la experiencia de nuestro ecosistema. Si querés colaborar con nosotros, empezá por nuestra guía de contribución.
Leer documentación