Documentação

Getting started

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

Releases

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

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.

Bibliotecas do Figma

Bibliotecas para download para designers

Temas

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

Fontes

Fontes para uso com Nimbus

Migrator

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

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.

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.

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.

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.

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.

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.

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.

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.

Badge

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

Box

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

Button

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

Checkbox

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

Chip

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

File uploader

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

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.

Icon

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

Input

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

Label

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

Link

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

List

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

Popover

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

Radio

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

Select

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

Skeleton

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

Spinner

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

Stack

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

Tag

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

Text

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

Textarea

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

Thumbnail

O componente Thumbnail nos permite apresentar miniaturas de imagens.

Title

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

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.

Toggle

O componente Toggle nos permite ativar ou desativar items.

Tooltip

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

Accordion

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

Alert

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

Card

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

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.

Pagination

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

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.

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.

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.

Table

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

Tabs

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

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Layout

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

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).

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.

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.

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.

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.

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.

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.

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.

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.

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!