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çãoReleases
Registro de alterações e atualizações de nossas bibliotecas e um changelog detalhado das alterações realizadas.
Leia a documentaçãoRecursos
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çãoFerramentas
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çãoCobertura
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çãoTokens
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çãoTypography
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çãoBreakpoint
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çãoShadow
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çãoShape
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çãoSpacing
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çãozIndex
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çãoComponentes 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çãoBox
O componente Box nos permite agrupar e espaçar elementos ou outros componentes.
Leia a documentaçãoButton
O componente Button nos permite iniciar ações, fazer mudanças de estado ou de página.
Leia a documentaçãoCheckbox
O componente Checkbox nos permite escolher uma ou diversas opções em uma lista de seleção.
Leia a documentaçãoChip
O componente Chip é utilizado para sinalizar critérios ou atributos relacionados a buscas ou filtros de uma lista de informações.
Leia a documentaçãoFile uploader
O componente File Uploader é utilizado para fazer o upload de arquivos.
Leia a documentaçãoIcon 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çãoIcon
O componente Icon é utilizado quando precisamos ilustrar uma ação, estado ou texto dentro ou fora de outro componente.
Leia a documentaçãoInput
O componente Input permite ao usuário inserir ou editar informações em formato de texto.
Leia a documentaçãoLink
O componente Link nos permite navegar entre páginas no mesmo site ou para outros sites.
Leia a documentaçãoList
O componente List nos permite organizar informações em formato de texto em uma lista.
Leia a documentaçãoPopover
O componente Popover nos permite mostrar mais elementos dentro de uma caixa flutuante.
Leia a documentaçãoRadio
O componente Radio nos permite escolher uma única opção dentro de uma lista de seleção.
Leia a documentaçãoSelect
O componente Select permite ao usuário selecionar uma opção dentro de uma lista.
Leia a documentaçãoSkeleton
O componente Skeleton nos permite comunicar de forma visual o carregamento de outros componentes.
Leia a documentaçãoStack
O componente Stack nos permite agrupar elementos ou componentes de forma horizontal ou vertical.
Leia a documentaçãoTag
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çãoText
O Text é o componente de texto, utilizado para escrever e formatar blocos de conteúdo dentro de páginas ou componentes.
Leia a documentaçãoTextarea
O componente Textarea permite ao usuário inserir ou editar informações em formato de texto longo.
Leia a documentaçãoTitle
Titles são componentes de texto, utilizados para empregar hierarquia visual e semântica aos conteúdos de uma página.
Leia a documentaçãoToast
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çãoTooltip
O componente Tooltip nos permite mostrar uma informação adicional de forma não intrusiva.
Leia a documentaçãoComponentes 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çãoAlert
O componente Alert nos permite comunicar sobre mudanças ou condições especiais em páginas ou seções.
Leia a documentaçãoCard
O componente Card nos permite agrupar conteúdos e ações relacionadas, facilitando a identificação de grupos de informações.
Leia a documentaçãoModal
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çãoPagination
O componente Pagination nos permite navegar entre uma lista muito grande de entradas.
Leia a documentaçãoSegmented 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çãoSidebar
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çãoStepper
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çãoTable
O componente Table nos permite organizar dados com estrutura tabular em uma tabela.
Leia a documentaçãoTabs
O componente Tabs nos permite separar conteúdos de mesma hierarquia em guias diferentes.
Leia a documentaçãoPatterns
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çãoCalendar
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çãoCallout 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çãoData 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çãoData 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çãoEditor
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çãoEmpty 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çãoO 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çãoHelp 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çãoInitial 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çãoInteractive 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çãoLayout
The Layout component is intended for building single or multi-column layouts using predefined typologies.
Leia a documentaçãoMenu 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çãoMenu
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çãoNav 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çãoPage
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çãoPlan 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çãoProduct 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çãoProduct 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çãoSide 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çãoThumbnail 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çãoTemplates
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 ejemploContributing
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