### Install Drawer with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/drawer/README.md

Install the Drawer component using NPM.

```shell
npm install @leafygreen-ui/drawer
```

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

### Install Drawer with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/drawer/README.md

Install the Drawer component using Yarn.

```shell
yarn add @leafygreen-ui/drawer
```

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

### Install ESLint

Source: https://github.com/mongodb/leafygreen-ui/blob/main/tools/eslint-plugin/README.md

Install ESLint as a development dependency using pnpm.

```sh
pnpm install -D eslint
```

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

### Install Menu Component with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/menu/README.md

Install the Menu component using Yarn.

```shell
yarn add @leafygreen-ui/menu
```

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

### Install Drawer with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/drawer/README.md

Install the Drawer component using PNPM.

```shell
pnpm add @leafygreen-ui/drawer
```

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

### Install Menu Component with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/menu/README.md

Install the Menu component using NPM.

```shell
npm install @leafygreen-ui/menu
```

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

### Drawer with Toolbar Example

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/drawer/README.md

Example of using the Drawer component with a Toolbar. This setup is recommended for most use cases. Ensure you have the necessary imports from '@leafygreen-ui/button' and '@leafygreen-ui/drawer'.

```tsx
import React, { useState } from 'react';

import Button from '@leafygreen-ui/button';
import {
  DrawerLayout,
  DrawerLayoutProps,
  useDrawerToolbarContext,
  DisplayMode,
  Size,
} from '@leafygreen-ui/drawer';

// Note: DrawerContent is a placeholder for your drawer content component
// This could be any React component to render inside the drawer
const DrawerContent = () => <div>Content inside the drawer</div>;

const DRAWER_TOOLBAR_DATA: DrawerLayoutProps['toolbarData'] = [
  {
    id: 'Code',
    label: 'Code',
    content: <DrawerContent />,
    title: 'Code Title',
    glyph: 'Code',
    onClick: () => {
      console.log('Code clicked');
    },
  },
  {
    id: 'Dashboard',
    label: 'Dashboard',
    content: <DrawerContent />,
    title: 'Dashboard Title',
    glyph: 'Dashboard',
    onClick: () => {
      console.log('Dashboard clicked');
    },
  },
  {
    id: 'Plus',
    label: "Perform some action, doesn't open a drawer",
    glyph: 'Plus',
    onClick: () => {
      console.log('Plus clicked, does not update drawer');
    },
  },
  {
    id: 'Settings',
    label: 'Settings',
    content: <DrawerContent />,
    title: 'Settings Title',
    glyph: 'Settings',
    visible: false, // This item will be hidden
  },
];

const App = () => {
  const Main = () => {
    const { openDrawer, closeDrawer } = useDrawerToolbarContext();

    return (
      <main>
        <Button onClick={() => openDrawer('Code')}>Open Code Drawer</Button>
        <div>Your main application content goes here</div>
        <Button onClick={() => closeDrawer()}>Close Drawer</Button>
      </main>
    );
  };

  return (
    <div>
      <DrawerLayout
        toolbarData={DRAWER_TOOLBAR_DATA}
        displayMode={DisplayMode.Overlay}
        size={Size.Default}
        onClose={() => {}}
      >
        <Main />
      </DrawerLayout>
    </div>
  );
};

```

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

### Install Stepper with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/stepper/README.md

Install the Stepper component using NPM.

```shell
npm install @leafygreen-ui/stepper
```

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

### Install Menu Component with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/menu/README.md

Install the Menu component using PNPM.

```shell
pnpm add @leafygreen-ui/menu
```

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

### Install Stepper with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/stepper/README.md

Install the Stepper component using PNPM.

```shell
pnpm add @leafygreen-ui/stepper
```

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

### Install LeafyGreen CLI

Source: https://github.com/mongodb/leafygreen-ui/blob/main/README.md

Install the LeafyGreen CLI globally to manage component installations.

```bash
npm install -g @lg-tools/cli
```

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

### Install Toolbar with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/toolbar/README.md

Install the @leafygreen-ui/toolbar package using Yarn.

```shell
yarn add @leafygreen-ui/toolbar
```

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

### Install Progress Bar with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/progress-bar/README.md

Install the Progress Bar component using Yarn.

```shell
yarn add @leafygreen-ui/progress-bar
```

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

### Install Wizard Component

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/wizard/README.md

Install the Wizard component using your preferred package manager.

```shell
pnpm add @leafygreen-ui/wizard
```

```shell
yarn add @leafygreen-ui/wizard
```

```shell
npm install @leafygreen-ui/wizard
```

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

### Install Stepper with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/stepper/README.md

Install the Stepper component using Yarn.

```shell
yarn add @leafygreen-ui/stepper
```

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

### Install Progress Bar with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/progress-bar/README.md

Install the Progress Bar component using NPM.

```shell
npm install @leafygreen-ui/progress-bar
```

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

### Install Resizable with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/resizable/README.md

Install the @leafygreen-ui/resizable package using Yarn.

```shell
yarn add @leafygreen-ui/resizable
```

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

### Install Resizable with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/resizable/README.md

Install the @leafygreen-ui/resizable package using PNPM.

```shell
pnpm add @leafygreen-ui/resizable
```

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

### Install Progress Bar with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/progress-bar/README.md

Install the Progress Bar component using PNPM.

```shell
pnpm add @leafygreen-ui/progress-bar
```

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

### Install Resizable with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/resizable/README.md

Install the @leafygreen-ui/resizable package using NPM.

```shell
npm install @leafygreen-ui/resizable
```

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

### Install All LeafyGreen Packages

Source: https://github.com/mongodb/leafygreen-ui/blob/main/tools/install/README.md

Use this command to install all packages within the `@leafygreen-ui` scope.

```bash
> lg install
```

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

### Install Delete Wizard with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/delete-wizard/README.md

Install the delete-wizard package using NPM.

```shell
npm install @leafygreen-ui/delete-wizard
```

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

### Install Number Input with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/number-input/README.md

Install the Number Input component using NPM.

```shell
npm install @leafygreen-ui/number-input
```

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

### Install Toggle with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/toggle/README.md

Install the Toggle component using the PNPM package manager.

```shell
pnpm add @leafygreen-ui/toggle
```

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

### Install Toggle with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/toggle/README.md

Install the Toggle component using the Yarn package manager.

```shell
yarn add @leafygreen-ui/toggle
```

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

### Install Number Input with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/number-input/README.md

Install the Number Input component using PNPM.

```shell
pnpm add @leafygreen-ui/number-input
```

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

### Install Number Input with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/number-input/README.md

Install the Number Input component using Yarn.

```shell
yarn add @leafygreen-ui/number-input
```

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

### SideNav Example Usage

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/side-nav/README.md

An example demonstrating how to use the SideNav, SideNavGroup, and SideNavItem components.

```javascript
import { SideNav, SideNavGroup, SideNavItem } from '@leafygreen-ui/side-nav';

return (
  <SideNav
    widthOverride={300}
    className={css`
      height: 100vh; // sets height of SideNav
    `}
  >
    <SideNavItem>Overview</SideNavItem>
    <SideNavItem>Introduction</SideNavItem>
    <SideNavItem>
      Android SDK
      <SideNavItem>Install MongoDB Community Edition</SideNavItem>
      <SideNavGroup
        header="Fundamentals"
        collapsible
        glyph={<Icon glyph="Building" />}
      >
        <SideNavItem active>
          Upgrade MongoDB Community to MongoDB Enterprise
        </SideNavItem>
        <SideNavItem>Verify Integrity of MongoDB Packages</SideNavItem>
        <SideNavGroup header="Preferences">
          <SideNavItem>Privacy</SideNavItem>
          <SideNavItem>Security</SideNavItem>
        </SideNavGroup>
      </SideNavGroup>
    </SideNavItem>
  </SideNav>
);
```

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

### Install Card Component

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/card/README.md

Install the Card component using your preferred package manager.

```shell
pnpm add @leafygreen-ui/card
```

```shell
yarn add @leafygreen-ui/card
```

```shell
npm install @leafygreen-ui/card
```

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

### Install @leafygreen-ui/search-input with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/search-input/README.md

Install the search input component using the Yarn package manager.

```shell
yarn add @leafygreen-ui/search-input
```

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

### Install Ripple using Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/ripple/README.md

Install the Ripple component using the Yarn package manager.

```shell
yarn add @leafygreen-ui/ripple
```

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

### Enter Pre-release Mode

Source: https://github.com/mongodb/leafygreen-ui/blob/main/DEVELOPER.md

Initiate pre-release mode with Changesets. Specify 'beta', 'alpha', 'next', or 'rc' as the pre-release tag.

```bash
pnpm changeset pre enter beta  # or: alpha, next, rc
```

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

### ActivationSteps Component Example

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/feature-walls/README.md

Demonstrates how to use the ActivationSteps component to guide users through a series of steps. Ensure you have React and useState imported.

```tsx
import Button, { Size, Variant } from `@leafygreen-ui/button`;
import { ActivationSteps } from `@leafygreen-ui/feature-walls`;

  const [currentStep, setCurrentStep] = useState(0);

  const handleNext = () => {
    setCurrentStep((prev) => prev + 1);
  };

  const handleBack = () => {
    setCurrentStep((prev) => prev - 1);
  };

  const steps = [
    {
      title: 'Step 1',
      description: (
        <>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur nunc mattis magna pretium, id mattis metus vestibulum. Integer cursus ex ante, ut molestie lorem vestibulum id.
          {' '}
          <Link href="https://www.mongodb.design/">{`I'm a link`}</Link>
        </>
      ),
      actions={
        <Button
          onClick={handleNext}
          size={Size.Small}
        >
          Primary button
        </Button>
      }
    },
    {
      title: 'Step 2',
      description:
        'In eleifend, ante eget rhoncus dignissim, ex ex interdum arcu, quis commodo erat lectus non felis. Nulla malesuada dui non consectetur placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.',
      actions={
        <>
          <Button
            onClick={handleBack}
            size={Size.Small}
          >
            Secondary button
          </Button>
          <Button
            onClick={handleNext}
            size={Size.Small}
            variant={Variant.Primary}
          >
            Primary button
          </Button>
        </>
      }
    },
    {
      title: 'Step 3',
      description:
        'In eleifend, ante eget rhoncus dignissim, ex ex interdum arcu, quis commodo erat lectus non felis. Nulla malesuada dui non consectetur placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eleifend, ante eget rhoncus dignissim, ex ex interdum arcu, quis commodo erat lectus non felis. Nulla malesuada dui non consectetur placerat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eleifend, ante eget rhoncus dignissim, ex ex interdum arcu, quis commodo erat lectus non felis.',
      media: <img alt="Test" src="https://placehold.co/170x100" />,
      actions={
        <>
          <Button
            onClick={handleBack}
            size={Size.Small}
          >
            Secondary button
          </Button>
          <Button
            onClick={handleNext}
            size={Size.Small}
            variant={Variant.Primary}
          >
            Primary button
          </Button>
        </>
      }
    },
  ];

  <ActivationSteps
    completedMessage="You did it!"
    title="Lorem ipsum title"
    steps={steps}
  />
```

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

### Example Usage

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/toast/README.md

Demonstrates how to set up the `ToastProvider` and use the `useToast` hook to display toasts.

```APIDOC
## Example Usage

### Description
An example demonstrating the integration of `ToastProvider` and `useToast` to create and manage toasts.

### Code

```javascript
import Button from '@leafygreen-ui/button';
import { ToastProvider, useToast, Variant } from '@leafygreen-ui/toast';

function App() {
  const { pushToast, clearStack, getStack, updateToast } = useToast();
  const stack = getStack();

  const createToast = () => {
    pushToast({
      title: 'Toast Title',
      description: 'Toast Description',
      variant: Variant.Success,
      timeout: null,
    });
  };

  return (
    <ToastProvider>
      <Button onClick={createToast}>Create toast</Button>
    </ToastProvider>
  );
}
```
```

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

### Install GuideCue with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/guide-cue/README.md

Use this command to add the GuideCue component to your project using NPM.

```shell
npm install @leafygreen-ui/guide-cue
```

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

### Install Select Component

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/select/README.md

Add the Select component to your project using your preferred package manager.

```shell
pnpm add @leafygreen-ui/select
```

```shell
yarn add @leafygreen-ui/select
```

```shell
npm install @leafygreen-ui/select
```

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

### Install Icon Component with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md

Use this command to install the icon package using Yarn.

```shell
yarn add @leafygreen-ui/icon
```

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

### Install Toolbar with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/toolbar/README.md

Install the @leafygreen-ui/toolbar package using NPM.

```shell
npm install @leafygreen-ui/toolbar
```

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

### Install GuideCue with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/guide-cue/README.md

Use this command to add the GuideCue component to your project using Yarn.

```shell
yarn add @leafygreen-ui/guide-cue
```

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

### Install Icon Component with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/icon/README.md

Use this command to install the icon package using PNPM.

```shell
pnpm add @leafygreen-ui/icon
```

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

### Install Toolbar with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/toolbar/README.md

Install the @leafygreen-ui/toolbar package using PNPM.

```shell
pnpm add @leafygreen-ui/toolbar
```

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

### Build and Publish Pre-releases

Source: https://github.com/mongodb/leafygreen-ui/blob/main/DEVELOPER.md

Build the necessary components and publish the pre-release packages.

```bash
pnpm build <...components>
pnpm changeset publish
```

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

### Enable Verbose Installation Output

Source: https://github.com/mongodb/leafygreen-ui/blob/main/tools/install/README.md

The `--verbose` flag provides detailed information during the installation process.

```bash
> lg install --verbose  # Shows detailed information during installation
```

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

### Install React 17 Dependencies

Source: https://github.com/mongodb/leafygreen-ui/blob/main/tools/test/README.md

Before testing with React 17, run the `init17` script to install the necessary testing dependencies.

```bash
> yarn init17
```

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

### Install Preview Card with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/preview-card/README.md

Use this command to add the Preview Card component to your project using NPM.

```shell
npm install @leafygreen-ui/preview-card
```

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

### Install GuideCue with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/guide-cue/README.md

Use this command to add the GuideCue component to your project using PNPM.

```shell
pnpm add @leafygreen-ui/guide-cue
```

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

### Install Project Dependencies

Source: https://github.com/mongodb/leafygreen-ui/blob/main/CONTRIBUTING.md

Install all project dependencies and link packages within the monorepo using the pnpm run init command.

```bash
pnpm run init
```

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

### Install Preview Card with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/preview-card/README.md

Use this command to add the Preview Card component to your project using PNPM.

```shell
pnpm add @leafygreen-ui/preview-card
```

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

### Install Preview Card with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/preview-card/README.md

Use this command to add the Preview Card component to your project using Yarn.

```shell
yarn add @leafygreen-ui/preview-card
```

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

### Install Basic LeafyGreen Packages

Source: https://github.com/mongodb/leafygreen-ui/blob/main/tools/install/README.md

Installs a set of basic components, including essentials plus commonly used components. Refer to the source code for the most up-to-date list.

```bash
> lg install --basic
```

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

### Install LeafyGreen ESLint Plugin

Source: https://github.com/mongodb/leafygreen-ui/blob/main/tools/eslint-plugin/README.md

Install the `@lg-tools/eslint-plugin` package as a development dependency.

```sh
pnpm install -D @lg-tools/eslint-plugin
```

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

### Install Delete Wizard with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/delete-wizard/README.md

Install the delete-wizard package using Yarn.

```shell
yarn add @leafygreen-ui/delete-wizard
```

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

### Display Test Command Help

Source: https://github.com/mongodb/leafygreen-ui/blob/main/tools/test/README.md

To view all available options for the test command, use the `--help` flag.

```bash
> lg test --help
```

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

### Install Delete Wizard with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/delete-wizard/README.md

Install the delete-wizard package using PNPM.

```shell
pnpm add @leafygreen-ui/delete-wizard
```

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

### Install Rich Links with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/chat/rich-links/README.md

Install the @lg-chat/rich-links package using NPM.

```shell
npm install @lg-chat/rich-links
```

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

### Install Rich Links with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/chat/rich-links/README.md

Install the @lg-chat/rich-links package using Yarn.

```shell
yarn add @lg-chat/rich-links
```

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

### Basic Toast Usage with useToast Hook

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/toast/README.md

This example demonstrates how to set up the ToastProvider and use the useToast hook to push a success toast. Ensure the useToast hook is used within a ToastProvider.

```javascript
import Button from '@leafygreen-ui/button';
import { ToastProvider, useToast, Variant } from '@leafygreen-ui/toast';

const { pushToast, clearStack, getStack, updateToast } = useToast();
const stack = getStack();

const createToast = () => {
  pushToast({
    title: 'Toast Title',
    description: 'Toast Description',
    variant: Variant.Success,
    timeout: null,
  });
};

return (
  <ToastProvider>
    <Button onClick={createToast}>Create toast</Button>
  </ToastProvider>
);
```

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

### Install Rich Links with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/chat/rich-links/README.md

Install the @lg-chat/rich-links package using PNPM.

```shell
pnpm add @lg-chat/rich-links
```

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

### Install LeafyGreen Components with CLI

Source: https://github.com/mongodb/leafygreen-ui/blob/main/README.md

Use the LeafyGreen CLI to install all components or specific ones like 'button' and 'combobox'.

```bash
lg install
```

```bash
lg install button combobox
```

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

### Combine Scope-based Installations

Source: https://github.com/mongodb/leafygreen-ui/blob/main/tools/install/README.md

Flags can be combined to install packages from multiple scopes simultaneously.

```bash
> lg install --core --charts  # Install both UI and chart packages
```

```bash
> lg install --basic --chat # Install the basic packages and all chat packages
```

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

### Conventional Commit Examples

Source: https://github.com/mongodb/leafygreen-ui/blob/main/tools/prompt-kit/src/prompts/commitMessageGeneration.md

Examples demonstrating the Conventional Commits format for various types of changes.

```text
feat(button): add size prop
```

```text
fix(popover): resolve positioning issue
```

```text
chore: update dependencies
```

```text
docs(charts legend): update README with example and prop table
```

```text
style: format code with lint command
```

```text
refactor(charts tooltip): abstract visibility logic into hook
```

```text
test: add unit tests for new functionality
```

```text
build: update webpack configuration for better tree shaking
```

```text
ci: add automated testing workflow for pull requests
```

```text
perf(table): optimize rendering for large datasets
```

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

### Install Typography Package

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/typography/README.md

Install the typography package using your preferred package manager.

```shell
pnpm add @leafygreen-ui/typography
```

```shell
yarn add @leafygreen-ui/typography
```

```shell
npm install @leafygreen-ui/typography
```

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

### View Help for merge-prompts-vscode

Source: https://github.com/mongodb/leafygreen-ui/blob/main/tools/prompt-kit/README.md

Run this command to see all available options for the `lg merge-prompts-vscode` script.

```bash
> lg merge-prompts-vscode --help
```

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

### Install Marketing Modal with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/marketing-modal/README.md

Use this command to add the marketing-modal package to your project using NPM.

```shell
npm install @leafygreen-ui/marketing-modal
```

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

### Install Toggle with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/toggle/README.md

Install the Toggle component using the NPM package manager.

```shell
npm install @leafygreen-ui/toggle
```

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

### Install Tooltip with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/tooltip/README.md

Use this command to add the Tooltip component to your project using NPM.

```shell
npm install @leafygreen-ui/tooltip
```

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

### Button Loading State: Kitchen Sink Example

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/button/README.md

Configure the Button to display a loading state with both custom text and a loading indicator.

```javascript
<Button
  isLoading={true}
  loadingIndicator={<Spinner />}
  loadingText="loading..."
/>
```

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

### Install Text Area with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/text-area/README.md

Install the Text Area component using NPM.

```shell
npm install @leafygreen-ui/text-area
```

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

### Install Text Area with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/text-area/README.md

Install the Text Area component using Yarn.

```shell
yarn add @leafygreen-ui/text-area
```

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

### Get Help for CLI

Source: https://github.com/mongodb/leafygreen-ui/blob/main/tools/cli/README.md

Shows how to get a list of available subcommands or help for a specific subcommand. Run `--help` for an up-to-date list of commands.

```bash
> lg --help
```

```bash
> lg <subcommand> --help
```

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

### Install Context Drawer with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/context-drawer/README.md

Use this command to add the Context Drawer component to your project using NPM.

```shell
npm install @leafygreen-ui/context-drawer
```

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

### Install Text Area with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/text-area/README.md

Install the Text Area component using PNPM.

```shell
pnpm add @leafygreen-ui/text-area
```

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

### Install Chat Window with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/chat/chat-window/README.md

Use this command to add the Chat Window component to your project using NPM.

```shell
npm install @lg-chat/chat-window
```

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

### Install Gallery Indicator with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/gallery-indicator/README.md

Install the Gallery Indicator component using the NPM package manager.

```shell
npm install @leafygreen-ui/gallery-indicator
```

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

### Install Popover with NPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/popover/README.md

Install the Popover component using the NPM package manager.

```shell
npm install @leafygreen-ui/popover
```

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

### Basic Chart Example with DragProvider

Source: https://github.com/mongodb/leafygreen-ui/blob/main/charts/drag-provider/README.md

Demonstrates how to implement drag and drop functionality for chart components using nested DragProvider contexts. Configure chart state and dragEnd handlers as needed.

```typescript
function ChartPage() {
  // Chart state and dragEnd handlers configured here

  return (
    <DragProvider onDragEnd={handleChartCardDrag}>
      {/** Controls drag events for cards */}
      <ChartCard dragId="chart-card-1">
        <DragProvider onDragEnd={handleChartDrag}>
          {/** Controls drag events for charts inside chart-card-1 */}
          <Chart dragId="chart-1" />
          <Chart dragId="chart-2" />
        </DragProvider>
      </ChartCard>
      <ChartCard dragId="chart-card-2">
        <DragProvider onDragEnd={handleChartDrag}>
          {/** Controls drag events for charts inside chart-card-2 */}
          <Chart dragId="chart-3" />
          <Chart dragId="chart-4" />
        </DragProvider>
      </ChartCard>
    </DragProvider>
  )
}
```

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

### Install Popover with Yarn

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/popover/README.md

Install the Popover component using the Yarn package manager.

```shell
yarn add @leafygreen-ui/popover
```

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

### Install Gallery Indicator with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/gallery-indicator/README.md

Install the Gallery Indicator component using the PNPM package manager.

```shell
pnpm add @leafygreen-ui/gallery-indicator
```

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

### Install Popover with PNPM

Source: https://github.com/mongodb/leafygreen-ui/blob/main/packages/popover/README.md

Install the Popover component using the PNPM package manager.

```shell
pnpm add @leafygreen-ui/popover
```