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çã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çã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
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.
Leia a documentaçãoCallout 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.
Leia a documentaçãoData 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.
Leia a documentaçãoData 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.
Leia a documentaçãoEditor
The Editor component was built using the Lexical API and was developed to be used in rich text fields.
Leia a documentaçãoEmpty 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.
Leia a documentaçãoForm 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.
Leia a documentaçãoHelp Link
Help Link component is intended for adding helpful links with tutorials or educational content on the UI.
Leia a documentaçãoInteractive 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.
Leia a documentaçãoLayout
The Layout component is intended for building single or multi-column layouts using predefined typologies.
Leia a documentaçãoMenu Button
The Menu Button component allows the user to create in-app menu-buttons that navigate through different sections of an application.
Leia a documentaçãoMenu
The Menu component allows the user to create in-app menus that navigate through different sections of an application.
Leia a documentaçãoNav 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.
Leia a documentaçãoPage
Page component allows the user to build application pages with all the necessary attributes for constructing a variety of layouts.
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
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.
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