Getting Started

Os componentes podem ser utilizados de duas maneiras distintas em projetos React, a primeira de forma isolada, importando apenas alguns componentes, ou de forma completa importantando um bundle com todos os componentes disponíveis.

Em ambos os casos o pacote de estilos e variáveis de css deve ser instalado de forma complementar.

Ver no Github

Importar componentes de forma isolada

Visando uma melhor performance, para projetos simples onde são utilizados poucos componentes, recomendamos a importação de componentes de forma isolada.

Implementando um botão

1. Instalação dos pacotes necessários

Começamos instalando o pacote do componente desejado através do terminal.

npm install @nimbus-ds/button

De forma complementar, instalamos também o pacote de estilos que contém todas as variáveis e regras necessárias para que o componente funcione.

npm install @nimbus-ds/styles

2. Implementação de uso

Importamos o componente do Nimbus e o arquivo de estilos css para o nosso projeto, permitindo assim a utilização do componente no projeto.

// App.tsx
import React from "react";
import "@nimbus-ds/styles/dist/index.css";

import { Button } from "@nimbus-ds/button";

const MyApp: React.FC = () => {
  const onClickButton = () => {
    alert("hello world!");
  }

  return (
    <Button appearance="primary" onClick={handleClick}>
      ...
    </Button>
  );
};

export default MyApp;

Importando o bundle de componente

Para abordagens mais complexas, onde é necessário utilizar muitos elementos distintos, recomendamos a instalação do bundle que contém todos os componentes Nimbus em um único pacote, evitando assim a necessidade da instalação individual.

Construindo um app simples

1. Instalação dos pacotes necessários

Começamos instalando o bundle de componentes através do terminal.

npm install @nimbus-ds/components

De forma complementar, instalamos também o pacote de estilos que contém todas as variáveis e estilos necessários para que os componentes funcionem.

npm install @nimbus-ds/styles

2. Implementação de uso

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.

// App.tsx
import React from "react";
import "@nimbus-ds/styles/dist/index.css";

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

const MyApp: React.FC = () => {
  const onClickButton = () => {
    alert("hello world!");
  }

  return (
    <Stack 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 onClick={onClickButton}>Click me</Button>
      </Alert>
      <Card>
        <Text fontSize="base">
          This is a sample paragraph inside a Card component.
        </Text>
      </Card>
    </Stack>
  );
};

export default MyApp;