Pular para o conteúdo principal

Nimbus Design System

O Nimbus é o design system open-source da Nuvemshop. Com componentes validados em produtos Nuvemshop, padrões e templates otimizados, documentação com exemplos e sincronização entre o UI kit no Figma e o código, o Nimbus viabiliza desenvolvedores e designers a criarem interfaces consistentes, acessíveis e de alto desempenho. Você poderá usar ele para criar seus aplicativos dentro do ecossistema da Nuvemshop ou também para seu projeto próprio considerando a licença vigente.

Dentro do contexto do aplicativo, incentivamos o uso do Nimbus para desenvolver experiências de usuário coesas e reconhecíveis. É importante que seu aplicativo incorpore e faça uso das bibliotecas do Nimbus , seguindo tanto as diretrizes de design de aplicativos quanto as diretrizes mais abrangentes do Nimbus. Para aplicativos incorporados ao administrador, o uso do Nimbus é pré-requisito para mantermos a consistência e qualidade das interfaces integradas ao administrador dos lojistas.

Principais pacotes do Nimbus​

Nimbus Styles

O pacote essencial que fornece variáveis e estilos necessários para o funcionamento dos componentes.

@nimbus-ds/styles

Nimbus Components

O pacote que reúne uma coleção de componentes atômicos e compostos, essenciais para a construção no Nimbus. De botões a inputs e checkboxes, esses blocos de construção formam a base do design de interface, permitindo a criação de componentes mais complexos e reutilizáveis.

@nimbus-ds/components

Nimbus Patterns

O conjunto central de padrões pré-construídos que oferece combinações inteligentes de componentes atômicos e compostos no Nimbus. Essas soluções pré-definidas, testadas e validadas pela equipe, resolvem desafios de design e interação com eficácia, promovendo uma abordagem coesa e consistente para implementar soluções de design.

@nimbus-ds/patterns

Nimbus Tokens

Os design tokens representam as variáveis fundamentais usadas para manter a coerência em um sistema de design. No contexto do Nimbus, eles abrangem elementos como cores, tipografias e espaçamentos essenciais. Esses tokens são a base para garantir uma aparência e sensação uniformes em todos os componentes e aplicações.

@nimbus-ds/tokens

Nimbus Icons

Um conjunto de ícones open-source exclusivamente criados para o Nimbus, moldados a partir da morfologia do nosso logotipo de marca. Projetados para agilizar o design e desenvolvimento, esses ícones oferecem flexibilidade, localização e gratuidade, enriquecendo as soluções de quem deseja impulsionar histórias na América Latina.

@nimbus-ds/icons

Templates​

Tela de Ajustes

Possui controles interativos e componentes que manipulam estados agrupados.

Ver exemplo

Modal de confirmação

Inclui um modal de confirmação que está aberto para confirmar uma ação destrutiva.

Ver exemplo

Página de formulário

Ele inclui vários componentes de entrada de dados que cobrem uma variedade de opções.

Ver exemplo

Modelo de página básico

Ele oferece um caso de exemplo onde todos os elementos possíveis de uma página são encontrados.

Ver exemplo

Tela de login

Este modelo de login pode ser usado para fazer login em um aplicativo externo.

Ver exemplo

Página de lista simples

Possui uma lista de dados simples com strings de texto e ações.

Ver exemplo

Página de lista de produtos

Emula a lista de produtos do administrador Nuvemshop.

Ver exemplo

Configurando e utilizando o Nimbus​

  1. Para esse exemplo vamos instalar apenas os pacotes essenciais do nimbus.
yarn add @nimbus-ds/styles @nimbus-ds/components

ou

npm add @nimbus-ds/styles @nimbus-ds/components
  1. Importamos todos os componentes necessários do Nimbus e o arquivo de estilos css para o nosso projeto, permitindo assim a utilização de qualquer componente Nimbus no projeto.
import React from "react";
import useThemeContext from "@theme/hooks/useThemeContext";
import "@nimbus-ds/styles/dist/index.css";

import { Title, Card, Text, Button, Alert, Box } from "@nimbus-ds/components";

const App: React.FC = () => (
  <Box display="flex" flexDirection="column" gap="4">
    <Title as="h1">My simple app</Title>
    <Alert appearance="primary" title="Hello world">
      This is a simple alert to show Nimbus components
      <Button>Click me</Button>
    </Alert>
    <Card>
      <Card.Body>
        <Text fontSize="base">
          This is a sample paragraph inside a Card component.
        </Text>
      </Card.Body>
    </Card>
  </Box>
);

export default App;
  1. Após a implementação acima dentro do seu projeto teremos a seguinte saida.

My simple app

Hello world
This is a simple alert to show Nimbus components

This is a sample paragraph inside a Card component.

Próximos passos​