### Install Nimbus Styles Package

Source: https://nimbus.tiendanube.com/documentation/overview/getting-started

Installs the Nimbus Styles package, which includes all necessary CSS variables and rules for Nimbus components to function correctly. This is a complementary installation for both isolated and bundled component usage.

```bash
npm install @nimbus-ds/styles
```

--------------------------------

### Install Nimbus Components Bundle

Source: https://nimbus.tiendanube.com/documentation/overview/getting-started

Installs the Nimbus Components bundle package using npm. This package contains all Nimbus components, suitable for complex applications requiring multiple components.

```bash
npm install @nimbus-ds/components
```

--------------------------------

### Implement Nimbus Components Bundle in React

Source: https://nimbus.tiendanube.com/documentation/overview/getting-started

Shows how to import and use multiple Nimbus components from the components bundle in a React application. It includes importing styles and various components like Title, Card, Text, Button, Alert, and Stack.

```typescript
// 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">Meu app simples</Title>
      <Alert appearance="primary" title="Olá, mundo">
        Este é um alerta simples para mostrar componentes Nimbus
        <Button onClick={onClickButton}>Clique aqui</Button>
      </Alert>
      <Card>
        <Text fontSize="base">
          Este é um parágrafo de exemplo dentro de um componente Card.
        </Text>
      </Card>
    </Stack>
  );
};

export default MyApp;
```

--------------------------------

### Implement Nimbus Button in React

Source: https://nimbus.tiendanube.com/documentation/overview/getting-started

Demonstrates how to import and use the Nimbus Button component in a React application. It includes importing the styles and the Button component, and handling a click event.

```typescript
// 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={onClickButton}>
      ...
    </Button>
  );
};

export default MyApp;
```

--------------------------------

### Install Help Link Component

Source: https://nimbus.tiendanube.com/documentation/patterns/help-link

Instructions to install the Help Link component using npm. This command downloads and installs the necessary package for using the Help Link pattern.

```bash
npm install @nimbus-ds/help-link
```

--------------------------------

### Install Pagination Component

Source: https://nimbus.tiendanube.com/documentation/composite-components/pagination

Instructions to install the Nimbus Pagination component via npm.

```APIDOC
## Install @nimbus-ds/pagination

### Description
Install the Pagination component using npm.

### Command
```bash
npm install @nimbus-ds/pagination
```
```

--------------------------------

### Installation

Source: https://nimbus.tiendanube.com/documentation/patterns/app-shell

Instructions on how to install the App Shell component using npm.

```APIDOC
## Installation

### Description
Installs the App Shell component package for use in your project.

### Method
Terminal Command

### Endpoint
N/A

### Parameters
None

### Request Example
```bash
npm install @nimbus-ds/app-shell
```

### Response
#### Success Response (Package Installation)
- The @nimbus-ds/app-shell package is successfully installed in your project's node_modules directory.

#### Response Example
(Terminal output indicating successful installation)
```

--------------------------------

### Alert Component Installation

Source: https://nimbus.tiendanube.com/documentation/composite-components/alert

Instructions on how to install the Nimbus Alert component package using npm.

```APIDOC
## Installation

### Description
Install the Alert component via terminal.

### Method
Command Line

### Endpoint
N/A

### Parameters
None

### Request Example
```bash
npm install @nimbus-ds/alert
```

### Response
N/A
```

--------------------------------

### Install Nimbus Box Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/box

Instructions to install the Nimbus Box component using npm. This is the first step before using the component in a project.

```bash
npm install @nimbus-ds/box
```

--------------------------------

### Install Alert Component

Source: https://nimbus.tiendanube.com/documentation/composite-components/alert

Command to install the Nimbus Alert component using npm.

```bash
npm install @nimbus-ds/alert
```

--------------------------------

### HTML Toast Example

Source: https://nimbus.tiendanube.com/documentation/atomic-components/toast

Provides an example of how to use the Toast component in plain HTML. Note: This is a conceptual example as the component is primarily designed for React.

```html
<div class="toast toast--primary" role="alert" aria-live="polite">Primary</div>
```

--------------------------------

### Install Sidebar Component

Source: https://nimbus.tiendanube.com/documentation/composite-components/sidebar

Provides the command to install the Nimbus Sidebar component using npm.

```bash
npm install @nimbus-ds/sidebar
```

--------------------------------

### Install Nimbus Tabs Component

Source: https://nimbus.tiendanube.com/documentation/composite-components/tabs

Command to install the Nimbus Tabs component package using npm.

```bash
npm install @nimbus-ds/tabs
```

--------------------------------

### Install Nimbus Pagination Component

Source: https://nimbus.tiendanube.com/documentation/composite-components/pagination

Instructions on how to install the Nimbus Pagination component using npm. This command should be run in the project's terminal.

```bash
npm install @nimbus-ds/pagination
```

--------------------------------

### Install Nimbus Toast Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/toast

Instructions for installing the Nimbus Toast component using npm, a package manager for Node.js.

```bash
npm install @nimbus-ds/toast
```

--------------------------------

### Install Nimbus Icons with npm

Source: https://nimbus.tiendanube.com/documentation/resources/nimbus-icons

This command installs the Nimbus Icons library from npm, making its React components available for use in your project. Ensure you have Node.js and npm installed.

```bash
npm install @nimbus-ds/icons
```

--------------------------------

### Install Plan Display Component (npm)

Source: https://nimbus.tiendanube.com/documentation/patterns/plan-display

This command shows how to install the Plan Display component using npm, a package manager for Node.js. Ensure you have Node.js and npm installed before running this command.

```bash
npm install @nimbus-ds/plan-display
```

--------------------------------

### Install Nimbus Chip Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/chip

Provides the command to install the Nimbus Chip component using npm. This is a prerequisite for using the component in a project.

```bash
npm install @nimbus-ds/chip
```

--------------------------------

### Install Nimbus List Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/list

Instructions to install the Nimbus List component package via npm. This is a prerequisite for using the component in your project.

```bash
npm install @nimbus-ds/list
```

--------------------------------

### Install Menu Component using npm

Source: https://nimbus.tiendanube.com/documentation/patterns/menu

Provides the command to install the Menu component package from npm. Ensure you have Node.js and npm installed to use this command.

```bash
npm install @nimbus-ds/menu

```

--------------------------------

### Install Nimbus DS Initial Screen Component

Source: https://nimbus.tiendanube.com/documentation/patterns/initial-screen

Provides the npm command to install the Initial Screen component package from Nimbus DS. This is a necessary step before implementing the pattern in a project.

```bash
npm install @nimbus-ds/initial-screen
```

--------------------------------

### Install Nimbus Text Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/text

Provides the command to install the Text component from npm into your project.

```bash
npm install @nimbus-ds/text
```

--------------------------------

### Install Nimbus DS Title Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/title

Instructions for installing the Nimbus DS Title component using npm. This command fetches and installs the necessary package for using the Title component in your project.

```bash
npm install @nimbus-ds/title
```

--------------------------------

### Install Stepper Component with npm

Source: https://nimbus.tiendanube.com/documentation/composite-components/stepper

Installs the Nimbus Stepper component using npm. This is the initial step to integrate the Stepper into your project.

```bash
npm install @nimbus-ds/stepper
```

--------------------------------

### Install Accordion Package

Source: https://nimbus.tiendanube.com/documentation/composite-components/accordion

Instructions to install the Nimbus Accordion component package using npm.

```bash
npm install @nimbus-ds/accordion
```

--------------------------------

### Install Nimbus Table Component

Source: https://nimbus.tiendanube.com/documentation/composite-components/table

This command shows how to install the Nimbus Table component package using npm. Ensure you have Node.js and npm installed to run this command.

```bash
npm install @nimbus-ds/table
```

--------------------------------

### Toggle Component Example

Source: https://nimbus.tiendanube.com/documentation/atomic-components/toggle

A basic example of how to use the Toggle component from the Nimbus Design System in a React application. It demonstrates the import and rendering of the Toggle component.

```javascript
import React from "react";
import { Toggle } from "@nimbus-ds/components";

const Example: React.FC = () => <Toggle name="my-toggle" />;

export default Example;
```

--------------------------------

### Install Thumbnail With Action Component

Source: https://nimbus.tiendanube.com/documentation/patterns/thumbnail-with-action

Provides the npm command to install the @nimbus-ds/thumbnail-with-action package, which is necessary for implementing the Thumbnail With Action pattern.

```bash
npm install @nimbus-ds/thumbnail-with-action
```

--------------------------------

### Install Nimbus Textarea Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/textarea

Provides the command to install the Nimbus Textarea component package using npm. This is a necessary step before using the component in a project.

```bash
npm install @nimbus-ds/textarea
```

--------------------------------

### Install Nimbus Radio Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/radio

Provides the npm command to install the Nimbus Radio component package. This is a necessary step before using the component in a project.

```bash
npm install @nimbus-ds/radio
```

--------------------------------

### Basic Pagination Example in React

Source: https://nimbus.tiendanube.com/documentation/composite-components/pagination

A basic example demonstrating how to use the Pagination component from '@nimbus-ds/components' in a React application. It shows how to set the active page, total page count, and handle page changes.

```jsx
import React from "react";
import { Pagination } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <Pagination activePage={2} onPageChange={(page) => page} pageCount={20} />
);

export default Example;
```

--------------------------------

### Install Select Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/select

Command to install the Nimbus Select component package using npm.

```bash
npm install @nimbus-ds/select
```

--------------------------------

### Install Nimbus Input Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/input

Instructions for installing the Nimbus Input component using npm. This command should be run in the terminal to add the component to your project.

```bash
npm install @nimbus-ds/input
```

--------------------------------

### Install Nimbus DS Icon Package

Source: https://nimbus.tiendanube.com/documentation/atomic-components/icon

Instructions on how to install the @nimbus-ds/icon package using npm. This is a prerequisite for using the Icon component in your project.

```bash
npm install @nimbus-ds/icon
```

--------------------------------

### Install Layout Component

Source: https://nimbus.tiendanube.com/documentation/patterns/layout

Instructions for installing the Nimbus Layout component using npm. This is a prerequisite for using the Layout component in your project.

```bash
npm install @nimbus-ds/layout
```

--------------------------------

### Install Thumbnail Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/thumbnail

Command to install the Nimbus Thumbnail component package using npm.

```bash
npm install @nimbus-ds/thumbnail
```

--------------------------------

### Install Page Component - npm

Source: https://nimbus.tiendanube.com/documentation/patterns/page

Instructions to install the Page component using npm. This command adds the necessary package to your project's dependencies.

```bash
npm install @nimbus-ds/page
```

--------------------------------

### Install Nimbus Button Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/button

Provides the command to install the Nimbus Button component package using npm. This is the first step for integrating the component into a project.

```bash
npm install @nimbus-ds/button
```

--------------------------------

### Install Migrator CLI with Yarn

Source: https://nimbus.tiendanube.com/documentation/tools/migrator

Installs the Nimbus DS Migrator CLI globally or as a project dependency using Yarn.

```shell
yarn add @nimbus-ds/migrator 
# or 
yarn global add @nimbus-ds/migrator
```

--------------------------------

### Install Nimbus Checkbox Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/checkbox

Command to install the Nimbus Checkbox component package using npm.

```bash
npm install @nimbus-ds/checkbox
```

--------------------------------

### Install Nimbus DS Icon Button

Source: https://nimbus.tiendanube.com/documentation/atomic-components/icon-button

Instructions on how to install the Nimbus DS Icon Button component package using npm.

```bash
npm install @nimbus-ds/icon-button
```

--------------------------------

### React Sidebar Example

Source: https://nimbus.tiendanube.com/documentation/composite-components/sidebar

Demonstrates the basic usage of the Sidebar component in React, showing how to control its visibility using state and a button.

```javascript
import React, { useState } from "react";
import { Box, Sidebar, Text, Button } from "@nimbus-ds/components";

const Example: React.FC = () => {
  const [open, setOpen] = useState(false);
  const toggleOpen = () => setOpen((prevState) => !prevState);

  return (
    <>
      <Button onClick={toggleOpen}>Open</Button>
      <Sidebar open={open} onRemove={toggleOpen}>
        <Box
          alignItems="center"
          borderColor="neutral-interactive"
          borderStyle="dashed"
          borderWidth="1"
          boxSizing="border-box"
          display="flex"
          height="100%"
          justifyContent="center"
          padding="2"
        >
          <Text fontSize="base" textAlign="center">
            Replace me with your content
          </Text>
        </Box>
      </Sidebar>
    </>
  );
};

export default Example;
```

--------------------------------

### Tabs Component Implementation

Source: https://nimbus.tiendanube.com/documentation/composite-components/tabs

Instructions on how to install and implement the Tabs component, including default and controlled modes.

```APIDOC
## Tabs Component Implementation

### Installation

Install the Tabs component using npm:

```bash
npm install @nimbus-ds/tabs
```

### Default Usage

A basic example of the Tabs component.

```jsx
import React from "react";
import { Tabs, Box, Text } from "@nimbus-ds/components";

const Example = () => (
  <Tabs preSelectedTab={2}>
    <Tabs.Item label="Tab 1">
      <Box
        borderColor="neutral-interactive"
        borderStyle="dashed"
        borderWidth="1"
        padding="2"
      >
        <Text fontSize="base" textAlign="center">
          Replace me with your content 1
        </Text>
      </Box>
    </Tabs.Item>
    <Tabs.Item label="Tab 2">
      <Box
        borderColor="neutral-interactive"
        borderStyle="dashed"
        borderWidth="1"
        padding="2"
      >
        <Text fontSize="base" textAlign="center">
          Replace me with your content 2
        </Text>
      </Box>
    </Tabs.Item>
    <Tabs.Item label="Tab 3">
      <Box
        borderColor="neutral-interactive"
        borderStyle="dashed"
        borderWidth="1"
        padding="2"
      >
        <Text fontSize="base" textAlign="center">
          Replace me with your content 3
        </Text>
      </Box>
    </Tabs.Item>
  </Tabs>
);

export default Example;
```

### Controlled Mode

The Tabs component can be controlled by managing the selected tab state externally. Use the `selected` and `onTabSelect` props for this purpose.

- **`selected`** (number): The index of the currently selected tab.
- **`onTabSelect`** (function): A callback function executed when the selected tab changes.

This mode is useful for:
- Synchronizing tab state with other components.
- Implementing custom logic upon tab change.
- Managing tab state from a parent component.
```

--------------------------------

### Install Migrator CLI with npm

Source: https://nimbus.tiendanube.com/documentation/tools/migrator

Installs the Nimbus DS Migrator CLI globally or as a project dependency using npm.

```shell
npm i @nimbus-ds/migrator 
# or 
npm i -g @nimbus-ds/migrator
```

--------------------------------

### Install Nimbus Spinner Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/spinner

Provides the command to install the Nimbus Spinner component using npm. This is the first step to use the Spinner in your project.

```bash
npm install @nimbus-ds/spinner
```

--------------------------------

### Install Nimbus DS Tooltip via npm

Source: https://nimbus.tiendanube.com/documentation/atomic-components/tooltip

Provides the command to install the @nimbus-ds/tooltip package using npm, which is necessary for using the Tooltip component in your project.

```bash
npm install @nimbus-ds/tooltip
```

--------------------------------

### Install Nimbus DS Stack Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/stack

Installs the Nimbus DS Stack component using npm. This is the initial step required before implementing the component in your project.

```bash
npm install @nimbus-ds/stack
```

--------------------------------

### Install Callout Card Component

Source: https://nimbus.tiendanube.com/documentation/patterns/callout-card

This command shows how to install the Callout Card component using npm. It is a prerequisite for using the component in your project.

```bash
npm install @nimbus-ds/callout-card
```

--------------------------------

### Install Nimbus Popover Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/popover

Provides the command to install the Nimbus Popover component using npm, a necessary step before implementation.

```bash
npm install @nimbus-ds/popover
```

--------------------------------

### React Input Component Example

Source: https://nimbus.tiendanube.com/documentation/atomic-components/input

A basic example demonstrating how to use the Input component in a React application. It imports the Input component from '@nimbus-ds/components' and renders it with a placeholder.

```jsx
import React from "react";
import { Input } from "@nimbus-ds/components";

const Example: React.FC = () => <Input placeholder="Placeholder" />;

export default Example;
```

--------------------------------

### Link Component Installation (npm)

Source: https://nimbus.tiendanube.com/documentation/atomic-components/link

Provides the command to install the @nimbus-ds/link package using npm, which is necessary for using the Link component in a project.

```bash
npm install @nimbus-ds/link
```

--------------------------------

### Install Nimbus Toggle Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/toggle

Command to install the Nimbus Toggle component package using npm. This package provides the necessary files to use the Toggle component in your project.

```bash
npm install @nimbus-ds/toggle
```

--------------------------------

### Plan Display Component Example (React)

Source: https://nimbus.tiendanube.com/documentation/patterns/plan-display

This React component demonstrates the usage of the PlanDisplay pattern from the '@nimbus-ds/patterns' library. It showcases two different plan cards (Basic and Advanced) with varying features, pricing, and call-to-action buttons. The example utilizes components from '@nimbus-ds/icons' and '@nimbus-ds/components' for icons, text, and buttons.

```jsx
import React from "react";
import { PlanDisplay } from "@nimbus-ds/patterns";
import { CheckIcon, CloseIcon } from "@nimbus-ds/icons";
import { Box, Title, Text, Button } from "@nimbus-ds/components";
import { mockPlanDisplayLabels } from "lib/mocks/mock-labels";

const Example: React.FC = () => (
  <PlanDisplay minWidth={{ xs: "150px", md: "500px" }} mx="4">
    <PlanDisplay.Card>
      <PlanDisplay.Header
        subtitle="Punto de venta"
        title={
          <Box display="flex" gap="1">
            <Title as="h3" color="neutral-textLow">
              Plan
            </Title>
            <Title as="h3" color="neutral-textHigh">
              Básico
            </Title>
          </Box>
        }
      >
        <Title as="h5">Suscripción gratuita</Title>
        <Text fontWeight="bold" fontSize="highlight">
          1.5% costo por transacción
        </Text>
      </PlanDisplay.Header>
      <PlanDisplay.Content>
        {mockPlanDisplayLabels.slice(0, 4).map((label) => (
          <PlanDisplay.Bullet key={label} icon={<CheckIcon />}>
            {label}
          </PlanDisplay.Bullet>
        ))}
        {mockPlanDisplayLabels.slice(4).map((label) => (
          <PlanDisplay.Bullet key={label} icon={<CloseIcon />} disabled>
            {label}
          </PlanDisplay.Bullet>
        ))}
      </PlanDisplay.Content>
    </PlanDisplay.Card>
    <PlanDisplay.Card highlighted>
      <PlanDisplay.Header
        subtitle="Punto de venta"
        title={
          <Box display="flex" gap="1">
            <Title as="h3" color="neutral-textLow">
              Plan
            </Title>
            <Title as="h3" color="neutral-textHigh">
              Avanzado
            </Title>
          </Box>
        }
      >
        <Title as="h5">$14.999 / mes</Title>
        <Text fontWeight="bold" fontSize="highlight">
          0.15% costo por transacción
        </Text>
      </PlanDisplay.Header>
      <PlanDisplay.Content>
        {mockPlanDisplayLabels.map((label) => (
          <PlanDisplay.Bullet key={label} icon={<CheckIcon />}>
            {label}
          </PlanDisplay.Bullet>
        ))}
      </PlanDisplay.Content>
      <PlanDisplay.Footer>
        <Box
          display="flex"
          flexDirection="column"
          justifyContent="center"
          alignItems="center"
          width="100%"
          gap="2"
        >
          <Button appearance="primary">
            <Text fontSize="base" color="currentColor">
              Comenzar gratis*
            </Text>
          </Button>
          <Text fontSize="caption">
            *Al finalizar la prueba podrás elegir cancelar, continuar o cambiar
            de plan
          </Text>
        </Box>
      </PlanDisplay.Footer>
    </PlanDisplay.Card>
  </PlanDisplay>
);

export default Example;

```

--------------------------------

### Install Nimbus Sortable Component

Source: https://nimbus.tiendanube.com/documentation/patterns/sortable

Command to install the Nimbus Sortable component using npm. This is the initial step required before implementing the component in your project.

```bash
npm install @nimbus-ds/sortable
```

--------------------------------

### Install Nimbus Menu Button Component

Source: https://nimbus.tiendanube.com/documentation/patterns/menu-button

Provides the npm command to install the Menu Button component package from Nimbus Design System.

```bash
npm install @nimbus-ds/menubutton
```

--------------------------------

### Install Side Modal Component

Source: https://nimbus.tiendanube.com/documentation/patterns/side-modal

Provides the command to install the Side Modal component using npm. This is a prerequisite for using the component in a project.

```bash
npm install @nimbus-ds/side-modal
```

--------------------------------

### Install Nimbus Skeleton Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/skeleton

Provides the command to install the Nimbus Skeleton component using npm. This is a prerequisite for using the component in your project.

```bash
npm install @nimbus-ds/skeleton
```

--------------------------------

### Install Nimbus DS Interactive List Component

Source: https://nimbus.tiendanube.com/documentation/patterns/interactive-list

Command to install the Nimbus DS interactive list component via npm. This is a prerequisite for using the component in your project.

```bash
npm install @nimbus-ds/interactive-list
```

--------------------------------

### Install Nimbus Badge Component

Source: https://nimbus.tiendanube.com/documentation/atomic-components/badge

Provides the command to install the Nimbus Badge component using npm. This is the first step required before using the component in a project.

```bash
npm install @nimbus-ds/badge
```

--------------------------------

### Install File Uploader Package

Source: https://nimbus.tiendanube.com/documentation/atomic-components/file-uploader

Provides the command to install the File Uploader component package using npm. This is a prerequisite for using the component in a project.

```bash
npm install @nimbus-ds/file-uploader
```

--------------------------------

### React Tabs Example

Source: https://nimbus.tiendanube.com/documentation/composite-components/tabs

Demonstrates the basic usage of the Tabs component in React, allowing users to switch between different content panes.

```javascript
import React from "react";
import { Tabs, Box, Text } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <Tabs preSelectedTab={2}>
    <Tabs.Item label="Tab 1">
      <Box
        borderColor="neutral-interactive"
        borderStyle="dashed"
        borderWidth="1"
        padding="2"
      >
        <Text fontSize="base" textAlign="center">
          Replace me with your content 1
        </Text>
      </Box>
    </Tabs.Item>
    <Tabs.Item label="Tab 2">
      <Box
        borderColor="neutral-interactive"
        borderStyle="dashed"
        borderWidth="1"
        padding="2"
      >
        <Text fontSize="base" textAlign="center">
          Replace me with your content 2
        </Text>
      </Box>
    </Tabs.Item>
    <Tabs.Item label="Tab 3">
      <Box
        borderColor="neutral-interactive"
        borderStyle="dashed"
        borderWidth="1"
        padding="2"
      >
        <Text fontSize="base" textAlign="center">
          Replace me with your content 3
        </Text>
      </Box>
    </Tabs.Item>
  </Tabs>
);

export default Example;
```

--------------------------------

### Install Data List Component (npm)

Source: https://nimbus.tiendanube.com/documentation/patterns/data-list

Command to install the Data List component package from npm. This is a required step before using the component in a project.

```bash
npm install @nimbus-ds/data-list
```

--------------------------------

### Migrator CLI Usage and Examples

Source: https://nimbus.tiendanube.com/documentation/tools/migrator

Demonstrates how to use the Nimbus DS Migrator CLI, including showing help, listing commands, and migrating files. It specifies the required entry and output file paths.

```shell
$ @nimbus-ds --help

$ @nimbus-ds [command]

Commands:
$ @nimbus-ds migrate  Migrates Nimbus components from V1 to Nimbus V2 in the
specified file.

Options:
--version  Show version number                                   [boolean]
-e, --entry    Path to find the file to be migrated                 [required]
-o, --output   Migrated file output path                            [required]
--help     Show help                                             [boolean]

Examples:
$ @nimbus-ds migrate -e <path_entry_file> -o <path_output_file>
```

--------------------------------

### React Form Field Example

Source: https://nimbus.tiendanube.com/documentation/patterns/form-field

Demonstrates how to use the FormField.Input component from the @nimbus-ds/patterns library. It includes a label, help text, an icon for help, and a placeholder. Ensure you have @nimbus-ds/patterns and @nimbus-ds/icons installed.

```javascript
import React from "react";
import { FormField } from "@nimbus-ds/patterns";
import { ExclamationCircleIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <FormField.Input
    label="Label text"
    helpText="Help text"
    showHelpText={true}
    id="input-id"
    helpIcon={ExclamationCircleIcon}
    placeholder="Placeholder"
  />
);

export default Example;
```

--------------------------------

### Install Modal Component

Source: https://nimbus.tiendanube.com/documentation/composite-components/modal

Instructions to install the Nimbus Modal component using npm. This package provides the necessary files to use the modal functionality within a project.

```bash
npm install @nimbus-ds/modal
```

--------------------------------

### React Editor Implementation

Source: https://nimbus.tiendanube.com/documentation/patterns/editor

Example of how to import and use the Editor component in a React application using dynamic import for server-side rendering (SSR) prevention. This snippet demonstrates the basic setup for integrating the component.

```javascript
import React from "react";
import dynamic from "next/dynamic";

const Editor = dynamic(() => import("@nimbus-ds/editor"), { ssr: false });

const Example: React.FC = () => {
  return <Editor />;
};

export default Example;
```

--------------------------------

### React Menu Button Example

Source: https://nimbus.tiendanube.com/documentation/patterns/menu-button

Demonstrates how to use the MenuButton component from the Nimbus Design System in a React application. It includes state management for the active state and an example icon.

```jsx
import React, { useState } from "react";
import { MenuButton } from "@nimbus-ds/patterns";
import { HomeIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => {
  const [active, setActive] = useState(false);
  const handleActive = () => setActive(!active);

  return (
    <MenuButton
      label="Menu button"
      startIcon={HomeIcon}
      onClick={handleActive}
      active={active}
    />
  );
};

export default Example;
```

--------------------------------

### Install Nimbus DS Progress Bar

Source: https://nimbus.tiendanube.com/documentation/atomic-components/progress-bar

Instructions to install the Nimbus DS Progress Bar component using npm. This is a necessary step before implementing the component in a project.

```bash
npm install @nimbus-ds/progress-bar
```

--------------------------------

### React Alert Implementation

Source: https://nimbus.tiendanube.com/documentation/composite-components/alert

Example of how to implement the Alert component in React. It shows basic usage with a title and content.

```jsx
import React from "react";
import { Alert } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <Alert appearance="primary" title="Alert title">
    Alert content
  </Alert>
);

export default Example;
```

--------------------------------

### Install App Shell Component (npm)

Source: https://nimbus.tiendanube.com/documentation/patterns/app-shell

Instructions for installing the App Shell component using npm. This command adds the necessary package to your project's dependencies.

```bash
npm install @nimbus-ds/app-shell

```

--------------------------------

### Install Segmented Control Package

Source: https://nimbus.tiendanube.com/documentation/composite-components/segmented-control

Provides the command to install the Segmented Control component package using npm.

```bash
npm install @nimbus-ds/segmented-control
```

--------------------------------

### React Initial Screen Implementation

Source: https://nimbus.tiendanube.com/documentation/patterns/initial-screen

Demonstrates how to implement the Initial Screen pattern using React components from Nimbus DS. It showcases the use of Hero, Bullet, and Button components to create a welcome experience with a call to action.

```jsx
import React from "react";
import { InitialScreen } from "@nimbus-ds/patterns";
import { BagIcon, FireIcon, TagIcon, TiendanubeIcon } from "@nimbus-ds/icons";
import { Button } from "@nimbus-ds/components";
import { mockInitialScreenBullets as bullets } from "lib/mocks/mock-labels";

const Example: React.FC = () => (
  <InitialScreen>
    <InitialScreen.Hero
      subtitle="META"
      title="¡Vendé más con Instagram y Facebook!"
      bullets={bullets.map(({ icon: NimbusIcon, description }, index) => (
        <InitialScreen.Bullet key={index} icon={<NimbusIcon />} text={description} />
      ))}
      actions={<Button appearance="primary">Conectar cuenta</Button>}
      image={
        <img
          src="/images/initial-screen.png"
          alt="Two people giving high five"
          width="100%"
        />
      }
    />
  </InitialScreen>
);

export default Example;
```

--------------------------------

### Install Nimbus Calendar Component

Source: https://nimbus.tiendanube.com/documentation/patterns/calendar

Instructions to install the Nimbus Calendar component using npm. This command adds the necessary package to your project's dependencies, enabling the use of the Calendar pattern.

```bash
npm install @nimbus-ds/calendar
```

--------------------------------

### Pagination Component Usage

Source: https://nimbus.tiendanube.com/documentation/composite-components/pagination

Example of how to use the Pagination component in a React application.

```APIDOC
## GET /websites/nimbus_tiendanube/Pagination

### Description
This section describes the usage and implementation of the Pagination component.

### Method
GET

### Endpoint
/websites/nimbus_tiendanube/Pagination

### Parameters
#### Query Parameters
- **activePage** (number) - Required - The currently selected page.
- **pageCount** (number) - Required - The total number of pages.
- **onPageChange** (function) - Required - Callback function when a page is clicked.
- **showNumbers** (boolean) - Optional - Determines if page numbers should be displayed.
- **renderItem** (object) - Optional - Custom render function for pagination items.

### Request Example
```javascript
{
  "activePage": 2,
  "pageCount": 20,
  "onPageChange": "(page) => page"
}
```

### Response
#### Success Response (200)
- **Component**: Renders the Pagination UI.

#### Response Example
```javascript
<Pagination activePage={2} onPageChange={(page) => page} pageCount={20} />
```
```

--------------------------------

### Install Editor Component via npm

Source: https://nimbus.tiendanube.com/documentation/patterns/editor

Command to install the Editor component package from npm. This is the first step to integrate the Editor into your project.

```bash
npm install @nimbus-ds/editor
```

--------------------------------

### Install Nav Tabs Component

Source: https://nimbus.tiendanube.com/documentation/patterns/nav-tabs

This command shows how to install the Nav Tabs component package from npm. This component is part of the Nimbus Design System patterns and requires installation before use in a project.

```bash
npm install @nimbus-ds/nav-tabs
```

--------------------------------

### Install Empty Message Component

Source: https://nimbus.tiendanube.com/documentation/patterns/empty-message

Command to install the @nimbus-ds/empty-message package via npm.

```bash
npm install @nimbus-ds/empty-message
```

--------------------------------

### React List Example

Source: https://nimbus.tiendanube.com/documentation/atomic-components/list

Demonstrates how to use the Nimbus List component in a React application to create an unordered list. It requires the '@nimbus-ds/components' package.

```jsx
import React from "react";
import { List } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <List as="ul">
    <List.Item>Aliquam vitae eleifend nulla. Duis</List.Item>
    <List.Item>Nullam malesuada sapien sit amet</List.Item>
    <List.Item>Vivamus diam eros, pretium a</List.Item>
    <List.Item>Mauris ut feugiat quam. Fusce</List.Item>
    <List.Item>Duis leo orci, consectetur pulvinar</List.Item>
  </List>
);

export default Example;
```

--------------------------------

### Stepper Example in React

Source: https://nimbus.tiendanube.com/documentation/composite-components/stepper

Demonstrates the default usage of the Stepper component in React. It allows users to select and navigate through sequential steps, displaying the current progress. Dependencies include React and Nimbus DS components like Box, Button, Stepper, and Text.

```javascript
import React, { useState } from "react";
import { Box, Button, Stepper, Text } from "@nimbus-ds/components";
import { mockStepperLabels as labels } from "../../../lib/mocks/mock-labels";

const Example: React.FC = () => {
  const [selected, setSelected] = useState(0);
  const [activeStep, setActiveStep] = useState(0);

  return (
    <Box display="flex" flexDirection="column" gap="3" minWidth="250px">
      <Text color="neutral-textHigh">Selected step: {selected + 1}</Text>
      <Stepper
        activeStep={activeStep}
        selectedStep={selected}
        onSelectStep={setSelected}
        justifyContent="flex-start"
      >
        {labels.map((label) => (
          <Stepper.Item key={label} label={label} />
        ))}
      </Stepper>
      <Box display="flex" gap="3">
        <Button
          onClick={() => {
            setActiveStep(activeStep - 1);
            setSelected(activeStep - 1);
          }}
          disabled={activeStep === 0}
        >
          Previous
        </Button>
        <Button
          appearance="primary"
          onClick={() => {
            setActiveStep(activeStep + 1);
            setSelected(activeStep + 1);
          }}
          disabled={activeStep === labels.length - 1}
        >
          Next
        </Button>
      </Box>
    </Box>
  );
};

export default Example;
```

--------------------------------

### Install Product Updates Component

Source: https://nimbus.tiendanube.com/documentation/patterns/product-updates

Instructions to install the Product Updates component using npm. This command adds the necessary package to your project dependencies.

```bash
npm install @nimbus-ds/productupdates
```

--------------------------------

### Install Form Field Component

Source: https://nimbus.tiendanube.com/documentation/patterns/form-field

Installs the Form Field component package using npm. This command should be run in your project's terminal.

```bash
npm install @nimbus-ds/formfield
```

--------------------------------

### Basic Help Link Example (React)

Source: https://nimbus.tiendanube.com/documentation/patterns/help-link

A basic implementation of the Help Link pattern using React. It wraps a Nimbus Link component to provide contextual help. Dependencies include React, Nimbus HelpLink, Nimbus components (Icon, Link), and Nimbus icons (ExternalLinkIcon).

```jsx
import React, { useState } from "react";
import { HelpLink } from "@nimbus-ds/patterns";
import { Icon, Link } from "@nimbus-ds/components";
import { ExternalLinkIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => {
  return (
    <HelpLink>
      <Link
        as="a"
        href="https://nimbus.tiendanube.com/"
        target="_blank"
        appearance="primary"
        textDecoration="none"
      >
        Help link
        <Icon source={<ExternalLinkIcon />} color="currentColor" />
      </Link>
    </HelpLink>
  );
};

export default Example;
```

--------------------------------

### Install Nimbus DS Card Component

Source: https://nimbus.tiendanube.com/documentation/composite-components/card

Provides the npm command to install the Nimbus DS Card component package, which is necessary for using the component in a project.

```bash
npm install @nimbus-ds/card
```