Getting Started

Existen dos formas de usar componentes de Nimbus en proyectos de React.

Todos los componentes se encuentra publicados en paquetes separados y también contamos con un bundle que incluye todos los componentes de nuestro design system disponibles. Según la cantidad de componentes a usar en un determinado ambiente, recomendamos una o la otra.

Además, en ambos casos deberemos instalar un paquete adicional que contiene todos los estilos y variables de css.

Ver en Github

Importar componentes por separado

En proyectos simples donde se utilizarán pocos componentes, recomendamos importarlos por separado para mejor performance.

Implementando un botón

En este tutorial vamos a implementar un simple botón de Nimbus.

1. Instalación del paquete

Comenzamos instalando el paquete del componente deseado desde la terminal.

npm install @nimbus-ds/button

Adicionalmente, instalaremos también el paquete de estilos que contiene todas las variables y reglas de css necesarias para que el componente funcione.

npm install @nimbus-ds/styles

2. Implementación y uso

Importamos el botón de Nimbus y los estilos a nuestro proyecto y utilizamos el componente.

// 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 el bundle de componentes

Para abordajes más complejos, donde se requieren muchos componentes, recomendamos instalar el bundle que contiene todos los componentes de Nimbus disponibles en un sólo paquete. Este método nos evita tener que instalar cada componente que necesitemos de un paquete nuevo.

Construyendo una app simple

1. Instalación de los paquetes necesarios

Comenzamos instalando el bundle de componentes desde la terminal.

npm install @nimbus-ds/components

Vamos a instalar también el paquete de estilos que contiene todas las variables y reglas de css necesarias para todos los componentes.

npm install @nimbus-ds/styles

2. Implementación y uso

Importamos los componentes deseados de Nimbus y sus estilos a nuestro proyecto.

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

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

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

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

export default MyApp;