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ó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ó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
The Calendar component allows the user to select a date or range of dates in a simple, straitforward and flexible UI thats based off of ReactDayPicker. It extends the properties of the ReactDayPicker component. Refer to the documentation site for a complete reference of the component's API.
Leer documentaciónCallout Card
This component is used to provide the user with useful information, tips, tutorials or shortcuts to other parts of the product. It is a visual component specially designed to be used in contexts such as integration, tutorials or dashboards, where we need to show different relevant information in the same space.
Leer documentaciónData List
DataList is a flexible list-style component that enables the organization of customizable row elements in a vertical manner, with visual separators between rows.
Leer documentaciónData Table
DataTable is a highly versatile component used to organize large quantities of tabular data. It supports pagination to help navigate through the data easily and efficiently, and also allows the user to sort and filter the data by columns. Additionally, it offers the ability to select one or multiple rows using checkboxes, which can be useful for performing batch actions or manipulating the data in other ways.
Leer documentaciónEditor
The Editor component was built using the Lexical API and was developed to be used in rich text fields.
Leer documentaciónEmpty Message
The Empty Message component can be used in multiple scenarios. To communicate whenever a search returns no results, if a page has no content, or if there is an error loading data. It can include an icon or illustration to support the written content, as well as a title and additional content text, and an optional node with actions that can be provided to the user so as to engage in next steps if there is an error on the page.
Leer documentaciónForm Field
The FormField component allows the user to enter or edit information in text format. Additionally, it provides a label, and a conditional help text that can be used to provide additional context on a validation scenario.
Leer documentaciónHelp Link
Help Link component is intended for adding helpful links with tutorials or educational content on the UI.
Leer documentaciónInteractive List
Interactive List allows users to build lists with multiple options that have some kind of interaction. It can be, and is not limited to, checkboxes, radios, toggles and buttons. This component is built on top of the DataList component that allows the creation of scrollable lists with multiple entries of different kinds of data.
Leer documentaciónLayout
The Layout component is intended for building single or multi-column layouts using predefined typologies.
Leer documentaciónMenu Button
The Menu Button component allows the user to create in-app menu-buttons that navigate through different sections of an application.
Leer documentaciónMenu
The Menu component allows the user to create in-app menus that navigate through different sections of an application.
Leer documentaciónNav Tabs
The NavTabs component represents the main navigation dock for an application on a mobile device, including up to 5 tabs or buttons for different sections. The component has a fixed position on the bottom of the screen.
Leer documentaciónPage
Page component allows the user to build application pages with all the necessary attributes for constructing a variety of layouts.
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
Sidemodal navigation provides access to the parts within its application. The side sections have the supplementary content that is linked on the left or right side of the screen.
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