Documentação

O nosso Design System é composto por bibliotecas de componentes React, pacotes de ícones e tokens, kits UI de Figma e ferramentas e recursos para construir aplicações para o ecossistema de Tiendanube / Nuvemshop.

Introdução

A seção Introdução fornece as bases para utilizar o Nimbus, incluindo um guia de início rápido e o registro de alterações e atualizações de nossas bibliotecas.

Getting started

Esse é um breve guia para começar a usar componentes do Nimbus em um projeto React.

Leia a documentação
Releases

Registro de alterações e atualizações de nossas bibliotecas e um changelog detalhado das alterações realizadas.

Leia a documentação

Recursos

O Nimbus fornece uma série de recursos adicionais para os usuários, que incluem ferramentas, bibliotecas e arquivos para download. Estes recursos facilitam o uso e a implementação do sistema de design, ajudando designers e desenvolvedores a maximizar a eficácia do Nimbus em seus projetos.

Nimbus Icons

Nosso set de icones open-source, especialmente desenhado para o Nimbus da morfologia do logotipo de nossa marca, para acelerar os designs e desenvolvimentos para pessoas que buscam potencializar histórias na América Latina. São flexíveis, locais e gratuitos.

Leia a documentação
Bibliotecas do Figma

Bibliotecas para download para designers

Leia a documentação
Temas

Um guia para instalar o suporte do Nimbus para temas nativos.

Leia a documentação
Fontes

Fontes para uso com Nimbus

Leia a documentação

Ferramentas

As ferramentas no Nimbus facilitam a migração de código, melhoram o trabalho com sugestões contextuais em ambientes de desenvolvimento e permitem medir a adoção e cobertura do sistema em projetos, otimizando a eficiência e a integração do design.

Migrator

Uma ferramenta utilitária para migrar projetos do Nimbus v1 para o Nimbus v2.

Leia a documentação
Cobertura

Ao considerar o Nimbus como produto em sua essência, é muito importante termos métricas para garantir que as necessidades dos usuários estão sendo atendidas. Portanto, para termos uma visão confiável se os objetivos e princípios estão sendo atendidos, e também para fazer um acompanhamento detalhado desta evolução, selecionamos algumas métricas que nos darão esta visão desejada.

Leia a documentação

Tokens

Os design tokens são variáveis básicas que são usadas para manter a consistência em um sistema de design. No Nimbus, referem-se às cores, tipografias, espaçamentos e outras propriedades básicas de design. Os tokens são usados para garantir uma aparência e sensação uniformes em todos os componentes e aplicações.

Color

Os tokens de cor são compostos por 5 categorias de cor: Primary, Success, Warning, Danger e Neutral. Cada uma dessas categorias possui uma paleta ampliada de 12 tons, onde 8 deles têm usos atrelados a funções definidas.

Leia a documentação
Typography

O sistema de tipografía do Nimbus é composto de 3 categorias, tamanhos de fonte, pesos e altura de linha. Além disso, disponibilizamos um token com o font-stack utilizado.

Leia a documentação
Breakpoint

O Nimbus possui breakpoints definidos para que as interfaces construídas com ele se adaptem de forma responsiva, proporcionando uma experiência adequada em diferentes tamanhos de tela.

Leia a documentação
Shadow

Os tokens de sombra do Nimbus se baseiam em níveis de distância do background, cada um deles está vinculado a um conjunto de propriedades diferentes para evidenciar essa característica.

Leia a documentação
Shape

Os shapes do Nimbus se baseiam em múltiplos de 4px, gerando escalas de radius que podem variar de acordo com a necessidade da interface.

Leia a documentação
Spacing

Os espaçamentos do Nimbus se baseiam em um grid de 4px, gerando escalas de espaçamento que podem variar de acordo com a necessidade de cada interface, essas escalas usam a unidade de medida rem que dentro do nosso systema equivalem a 16px.

Leia a documentação
zIndex

O Nimbus possui valores de z-index pré-definidos para facilitar a organização no empilhamento de elementos na tela, evitando assim a sobreposição de componentes.

Leia a documentação

Componentes atómicos

São os blocos de construção fundamentais no Nimbus. Referem-se aos elementos de UI mais básicos, como botões, inputs, checkboxes, etc. Esses componentes atômicos são independentes e podem ser usados e reutilizados para formar componentes compostos.

Badge

O componente Badge nos permite comunicar quantidades de itens ou ações pendentes.

Leia a documentação
Box

O componente Box nos permite agrupar e espaçar elementos ou outros componentes.

Leia a documentação
Button

O componente Button nos permite iniciar ações, fazer mudanças de estado ou de página.

Leia a documentação
Checkbox

O componente Checkbox nos permite escolher uma ou diversas opções em uma lista de seleção.

Leia a documentação
Chip

O componente Chip é utilizado para sinalizar critérios ou atributos relacionados a buscas ou filtros de uma lista de informações.

Leia a documentação
File uploader

O componente File Uploader é utilizado para fazer o upload de arquivos.

Leia a documentação
Icon button

O componente Icon Button é utilizado quando temos uma ação clara ao usuário, levando em conta o contexto na qual se encontra, podendo ser facilmente representada por um ícone.

Leia a documentação
Icon

O componente Icon é utilizado quando precisamos ilustrar uma ação, estado ou texto dentro ou fora de outro componente.

Leia a documentação
Input

O componente Input permite ao usuário inserir ou editar informações em formato de texto.

Leia a documentação
Label

O componente label nos permite nomear elementos dentro de um formulário.

Leia a documentação
Link

O componente Link nos permite navegar entre páginas no mesmo site ou para outros sites.

Leia a documentação
List

O componente List nos permite organizar informações em formato de texto em uma lista.

Leia a documentação
Popover

O componente Popover nos permite mostrar mais elementos dentro de uma caixa flutuante.

Leia a documentação
Radio

O componente Radio nos permite escolher uma única opção dentro de uma lista de seleção.

Leia a documentação
Select

O componente Select permite ao usuário selecionar uma opção dentro de uma lista.

Leia a documentação
Skeleton

O componente Skeleton nos permite comunicar de forma visual o carregamento de outros componentes.

Leia a documentação
Spinner

O componente Spinner nos permite informar o carregamento de conteúdos.

Leia a documentação
Stack

O componente Stack nos permite agrupar elementos ou componentes de forma horizontal ou vertical.

Leia a documentação
Tag

O componente Tag é utilizado para categorizar informações, organizar ou indicar status de elementos ou componentes usando palavras-chave, ícones ou cores.

Leia a documentação
Text

O Text é o componente de texto, utilizado para escrever e formatar blocos de conteúdo dentro de páginas ou componentes.

Leia a documentação
Textarea

O componente Textarea permite ao usuário inserir ou editar informações em formato de texto longo.

Leia a documentação
Thumbnail

O componente Thumbnail nos permite apresentar miniaturas de imagens.

Leia a documentação
Title

Titles são componentes de texto, utilizados para empregar hierarquia visual e semântica aos conteúdos de uma página.

Leia a documentação
Toast

O componente Toast nos permite notificar usuários em um tom informacional, descrevendo que algo aconteceu ou está acontecendo, sem interromper a navegação.

Leia a documentação
Toggle

O componente Toggle nos permite ativar ou desativar items.

Leia a documentação
Tooltip

O componente Tooltip nos permite mostrar uma informação adicional de forma não intrusiva.

Leia a documentação

Componentes compostos

No Nimbus, os componentes compostos são blocos de design mais complexos, formados pela união de vários componentes atômicos. São úteis para construir seções específicas de uma interface de usuário que são usadas com frequência, permitindo uma maior reutilização e eficiência no desenvolvimento.

Accordion

O componente Accordion nos permite comprimir conteúdos em containers que podem ser abertos ou fechados.

Leia a documentação
Alert

O componente Alert nos permite comunicar sobre mudanças ou condições especiais em páginas ou seções.

Leia a documentação
Card

O componente Card nos permite agrupar conteúdos e ações relacionadas, facilitando a identificação de grupos de informações.

Leia a documentação
Modal

O componente Modal nos permite chamar a atenção do usuario para um box flutuante que pode ter texto, ações ou forms para realizar tarefas mudando o focus desde o background. É um componente intrusivo já que interrompe a operação do usuario para apresentar uma mensagem ou conteúdo.

Leia a documentação
Pagination

O componente Pagination nos permite navegar entre uma lista muito grande de entradas.

Leia a documentação
Segmented Control

O Segmented Control é um componente composto de seleção exclusivo que permite aos usuários escolher uma ou várias opções de um grupo predefinido. Eles são projetados para casos de seleção rápida e contextual, como filtros de produtos ou visualizações alternativas.

Leia a documentação
Sidebar

O componente Sidebar é um conteiner flutuante grande que entra na página desde os cantos. Nos permite apresentar ações, forms ou seções com muita informação sobre o contexto da página.

Leia a documentação
Stepper

O componente Stepper guia os usuários através de um processo dividido em etapas sequenciais, mostrando seu progresso e permitindo navegar entre as etapas do fluxo.

Leia a documentação
Table

O componente Table nos permite organizar dados com estrutura tabular em uma tabela.

Leia a documentação
Tabs

O componente Tabs nos permite separar conteúdos de mesma hierarquia em guias diferentes.

Leia a documentação

Patterns

Os patterns no Nimbus são combinações pré-definidas de componentes atômicos e compostos que resolvem problemas comuns de design e interação. Esses padrões são implementações testadas e validadas pela nossa equipe para ajudar os usuários a implementar soluções de design eficientes e 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.

Leia a documentação
Calendar

O padrão Calendar permite aos usuários selecionar datas individuais ou intervalos de datas dentro de uma interface visual baseada em um calendário. É chave para fluxos que requerem a definição de períodos temporais, como filtros, programação de eventos ou gestão de conteúdos. Seu propósito é oferecer uma seleção eficiente, clara e precisa de datas. Calendar foi criado baseado em ReactDayPicker e estende suas propriedades, consulte a documentação para obter uma referência completa da API do componente.

Leia a documentação
Callout Card

Callout Card é um padrão que destaca conteúdo relevante ou informativo dentro da interface. Seu propósito é captar a atenção do usuário em momentos chave, **reforçar uma ação recomendada ou proporcionar acessos diretos a outras partes do produto.** É útil para mensagens breves com chamada à ação ou referências contextuais.

Leia a documentação
Data List

Data list é um padrão visual que permite visualizar e gerenciar listados de itens estruturados, como ordens, informações de clientes, etc. Está projetado para mostrar informações resumidas de forma clara e ordenada. Seu design modular permite visualização rápida e uso intensivo em fluxos de trabalho administrativos, especialmente em contextos onde a ordem ou relação entre itens é relevante.

Leia a documentação
Data Table

A **Data Table** é um padrão que organiza informações estruturadas em linhas e colunas, facilitando sua exploração, comparação e manipulação. É utilizada para listar grandes volumes de dados (como produtos, pedidos ou clientes), permitindo realizar ações de forma eficiente e precisa a partir da mesma vista.

Leia a documentação
Editor

O **Editor** é um padrão de interface que permite aos usuários criar ou modificar conteúdo textual. Seu objetivo é oferecer uma experiência clara, eficiente e flexível para tarefas que requerem edição ou carregamento de grande quantidade de conteúdo textual ou entradas de texto enriquecido.

Leia a documentação
Empty Message

O padrão Empty message é utilizado para informar ao usuário que não há dados disponíveis em uma seção da interface. Sua função principal é fornecer contexto, comunicar o estado vazio de forma clara, e guiar o usuário para a ação mais relevante para resolver essa situação. É fundamental para evitar confusão, manter o foco e fomentar a produtividade, especialmente ao filtrar ou depois de eliminar conteúdo.

Leia a documentação

O padrão **Form Field** encapsula um controle de entrada (como input, select, textarea) junto com sua etiqueta, ajuda contextual e mensagens de validação. É essencial para capturar dados do usuário de forma clara, consistente e acessível. Seu objetivo é maximizar a eficiência, reduzir erros e assegurar a compreensão imediata do propósito de cada campo.

Leia a documentação
Help Link

O padrão **Help Link** proporciona um acesso direto e contextual à documentação ou recursos de ajuda relevantes dentro da interface do usuário. Seu objetivo é **fornecer suporte proativo, sem interromper o fluxo de trabalho do usuário.** Melhora a autonomia do usuário ao facilitar o acesso a respostas rápidas, especialmente em momentos de incerteza.

Leia a documentação
Initial Screen

Este padrão proporciona um design consistente para mostrar uma tela de início ou boas-vindas. Apresenta ao usuário uma funcionalidade ou serviço, oferecendo opções para obter mais informações ou continuar.

Leia a documentação
Interactive List

A *Interactive List* é um padrão de interface que permite mostrar em formato de lista elementos de seleção ou acesso. Está desenhada para melhorar a produtividade em tarefas frequentes como a gestão de itens, permitindo operar de forma rápida, acessível e sem abandonar o contexto.

Leia a documentação
Layout

The Layout component is intended for building single or multi-column layouts using predefined typologies.

Leia a documentação
Menu Button

O padrão **Menu Button** é um elemento interativo cujo objetivo é oferecer acesso rápido a uma seção ou ação específica dentro de uma listagem de acessos (Menu).

Leia a documentação
Menu

O componente Menu permite agrupar um conjunto de ações ou navegações em uma lista suspensa, ocasionalmente ativado a partir de um botão ou ícone. É fundamental para apresentar opções de maneira organizada, evitando o ruído visual e mantendo a interface limpa. Favorece a acessibilidade a funções secundárias sem comprometer a hierarquia visual do conteúdo principal.

Leia a documentação
Nav Tabs

Nav Tabs é um padrão de navegação que permite aos usuários alternar entre diferentes vistas ou seções. É utilizado principalmente em ambientes mobile e seu objetivo é organizar conteúdo relacionado e de igual hierarquia em abas claramente etiquetadas, melhorando a experiência de exploração e reduzindo a carga cognitiva.

Leia a documentação
Page

O componente **Page** atua como contêiner principal de vistas. Estrutura o conteúdo em seções hierárquicas, fornece contexto com títulos e descrições, e pode incluir ações principais (como botões). Seu objetivo é oferecer um framework consistente, claro e acessível que facilite a compreensão e execução de tarefas.

Leia a documentação
Plan Display

O pattern PlanDisplay organiza planos ou opções de forma comparativa e visual, ideal para mostrar preços, benefícios ou níveis de assinatura com layout flexível e personalizável.

Leia a documentação
Product Data List

O padrão Product Data List permite visualizar e gerenciar listas resumidas de produtos. É projetado para facilitar a seleção, organização e priorização de produtos relacionados, sejam eles alternativos ou complementares, através da funcionalidade de arrastar e soltar e ações de edição rápidas. Este padrão é ideal para fluxos de trabalho de edição ou configuração de produtos onde é necessário manter a relação entre os diferentes artigos do catálogo.

Leia a documentação
Product 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.

Leia a documentação
Side Modal

O Side Modal é um padrão de sobreposição lateral que permite ao usuário interagir com conteúdo adicional sem abandonar a visão principal. Aparece a partir da borda direita ou esquerda da tela, sem bloquear completamente o fundo, o que favorece a continuidade do contexto e a multitarefa. Seu objetivo é facilitar fluxos secundários, edição rápida ou tarefas complementares à visão principal.

Leia a documentação
Thumbnail 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.

Leia a documentação

Templates

Templates prontos para desenvolver aplicações nativas ou externas para nosso administrador Nuvemshop.

Templates

Templates prontos para desenvolver aplicações nativas ou externas para nosso administrador Nuvemshop.

Ver ejemplo

Contributing

Contributing

Queremos que você seja parte do Nimbus! Por isso nosso design system é open-source e aberto para a comunidade. Todas as ideias, sugestões e feedbacks que recebemos nos ajudam a melhorar a experiência de nosso ecossistema. Se quiser colaborar conosco, comece por nosso guia de contribuição!

Leia a documentação