open-index/open-npm huggingface dataset:
npm package: @launchpad-ui/alert
Description: An element that informs users of a state or function of the product at a more granular level than banners.
Latest version: 0.9.56
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/alert

> An element that informs users of a state or function of the product at a more granular level than banners.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/alert?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/alert)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/alert?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/alert)

## Installation

```sh
$ yarn add @launchpad-ui/alert
# or
$ npm install @launchpad-ui/alert
```
npm package: @launchpad-ui/avatar
Description: An element that represents a user visually.
Latest version: 0.6.60
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/avatar

> An element that represents a user visually.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/avatar?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/avatar)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/avatar?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/avatar)

## Installation

```sh
$ yarn add @launchpad-ui/avatar
# or
$ npm install @launchpad-ui/avatar
```
npm package: @launchpad-ui/banner
Description: An element that contains a system-wide message or status.
Latest version: 0.10.60
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/banner

> An element that contains a system-wide message or status.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/banner?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/banner)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/banner?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/banner)

## Installation

```sh
$ yarn add @launchpad-ui/banner
# or
$ npm install @launchpad-ui/banner
```
npm package: @launchpad-ui/box
Description: A polymorphic React component with design token sprinkles.
Latest version: 0.4.2

# @launchpad-ui/box

> A polymorphic React component with design token sprinkles.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/box?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/box)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/box?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/box)

## Installation

```sh
$ yarn add @launchpad-ui/box
# or
$ npm install @launchpad-ui/box
```
npm package: @launchpad-ui/button
Description: An element that triggers an action based on user interaction.
Latest version: 0.15.13

# @launchpad-ui/button

> An element that triggers an action based on user interaction.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/button?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/button)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/button?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/button)

## Installation

```sh
$ yarn add @launchpad-ui/button
# or
$ npm install @launchpad-ui/button
```
npm package: @launchpad-ui/card
Description: >
Latest version: 0.2.69
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/card

> 

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/card?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/card)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/card?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/card)

## Installation

```sh
$ yarn add @launchpad-ui/card
# or
$ npm install @launchpad-ui/card
```
npm package: @launchpad-ui/chip
Description: An element representing keywords that categorize feature states for quick recognition.
Latest version: 0.9.58
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/chip

> An element representing keywords that categorize feature states for quick recognition.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/chip?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/chip)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/chip?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/chip)

## Installation

```sh
$ yarn add @launchpad-ui/chip
# or
$ npm install @launchpad-ui/chip
```
npm package: @launchpad-ui/clipboard
Description: An element that copies text to the clipboard.
Latest version: 0.11.68
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/clipboard

> An element that copies text to the clipboard.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/clipboard?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/clipboard)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/clipboard?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/clipboard)

## Installation

```sh
$ yarn add @launchpad-ui/clipboard
# or
$ npm install @launchpad-ui/clipboard
```
npm package: @launchpad-ui/collapsible
Description: A progressive disclosure component that allows the user to to click a trigger to show more content
Latest version: 0.1.92
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/collapsible

> A progressive disclosure component that allows the user to to click a trigger to show more content

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/collapsible?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/collapsible)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/collapsible?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/collapsible)

## Installation

```sh
$ yarn add @launchpad-ui/collapsible
# or
$ npm install @launchpad-ui/collapsible
```
npm package: @launchpad-ui/columns
Description: Elements used to lay out content horizontally with consistent spacing.
Latest version: 0.1.33
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/columns

> Elements used to lay out content horizontally with consistent spacing.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/columns?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/columns)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/columns?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/columns)

## Installation

```sh
$ yarn add @launchpad-ui/columns
# or
$ npm install @launchpad-ui/columns
```
npm package: @launchpad-ui/components
Description: An implementation of LaunchDarkly's LaunchPad Design System using React Aria Components.
Latest version: 0.18.1

# @launchpad-ui/components

> An implementation of LaunchDarkly's LaunchPad Design System using React Aria Components.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/components?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/components)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/components?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/components)

## Installation

```sh
$ yarn add @launchpad-ui/components
# or
$ npm install @launchpad-ui/components
```
npm package: @launchpad-ui/counter
Description: Indicates the count value of a resource.
Latest version: 0.4.26
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/counter

> Indicates the count value of a resource.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/counter?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/counter)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/counter?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/counter)

## Installation

```sh
$ yarn add @launchpad-ui/counter
# or
$ npm install @launchpad-ui/counter
```
npm package: @launchpad-ui/data-table
Description: An element used to display data in rows and columns.
Latest version: 0.2.30
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/data-table

> An element used to display data in rows and columns.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/data-table?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/data-table)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/data-table?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/data-table)

## Installation

```sh
$ yarn add @launchpad-ui/data-table
# or
$ npm install @launchpad-ui/data-table
```
npm package: @launchpad-ui/drawer
Description: A partial overlay that appears from the right side of the screen.
Latest version: 0.9.13

# @launchpad-ui/drawer

> A partial overlay that appears from the right side of the screen.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/drawer?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/drawer)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/drawer?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/drawer)

## Installation

```sh
$ yarn add @launchpad-ui/drawer
# or
$ npm install @launchpad-ui/drawer
```
npm package: @launchpad-ui/dropdown
Description: An element that displays a list of actions or options to a user.
Latest version: 0.10.13

# @launchpad-ui/dropdown

> An element that displays a list of actions or options to a user.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/dropdown?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/dropdown)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/dropdown?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/dropdown)

## Installation

```sh
$ yarn add @launchpad-ui/dropdown
# or
$ npm install @launchpad-ui/dropdown
```
npm package: @launchpad-ui/filter
Description: filter a list of results
Latest version: 0.11.13

# @launchpad-ui/filter

> filter a list of results

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/filter?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/filter)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/filter?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/filter)

## Installation

```sh
$ yarn add @launchpad-ui/filter
# or
$ npm install @launchpad-ui/filter
```
npm package: @launchpad-ui/focus-trap
Description: An internal utility not intended for public usage.
Latest version: 0.5.1

# @launchpad-ui/focus-trap

> An internal utility not intended for public usage.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/focus-trap?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/focus-trap)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/focus-trap?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/focus-trap)

## Installation

```sh
$ yarn add @launchpad-ui/focus-trap
# or
$ npm install @launchpad-ui/focus-trap
```
npm package: @launchpad-ui/form
Description: Elements for composing forms, such as input fields, labels, radio buttons, etc.
Latest version: 0.15.13

# @launchpad-ui/form

> Elements for composing forms, such as input fields, labels, radio buttons, etc.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/form?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/form)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/form?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/form)

## Installation

```sh
$ yarn add @launchpad-ui/form
# or
$ npm install @launchpad-ui/form
```
npm package: @launchpad-ui/icons
Description: An element that supplements content and represents an action or feature within LaunchDarkly.
Latest version: 0.25.4

# @launchpad-ui/icons

> An element that supplements content and represents an action or feature within LaunchDarkly.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/icons?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/icons)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/icons?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/icons)

## Installation

```sh
$ yarn add @launchpad-ui/icons
# or
$ npm install @launchpad-ui/icons
```

## Usage

### Basic

The `name` prop specifies which icon to render.

```js
import { Icon } from '@launchpad-ui/icons';

const MyIcon = () => <Icon name="info" />;
```

### CORS limitation

Unfortunately SVG sprites [cannot be accessed cross-domain](https://oreillymedia.github.io/Using_SVG/extras/ch10-cors.html). The workaround is to fetch the file and inject it into the document to access the icons directly.

Fetch and inject the sprite for `Icon` to render icons correctly:

```js
import sprite from '@launchpad-ui/icons/sprite.svg';

fetch(sprite)
  .then(async (response) => response.text())
  .then((data) => {
    const parser = new DOMParser();
    const content = parser.parseFromString(data, 'image/svg+xml').documentElement;
    content.id = 'lp-icons-sprite';
    content.style.display = 'none';
    document.body.appendChild(content);
  })
  .catch((err) => {
    console.log('Failed to fetch sprite', err);
  });
```

To minimize latency, you can preload the sprite file accordingly:

```html
<link
  rel="preload"
  href="{assets_location}/sprite.svg"
  as="fetch"
  type="image/svg+xml"
  crossorigin
/>
```
npm package: @launchpad-ui/inline
Description: An element used to add horizontal space between components.
Latest version: 0.1.33
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/inline

> An element used to add horizontal space between components.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/inline?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/inline)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/inline?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/inline)

## Installation

```sh
$ yarn add @launchpad-ui/inline
# or
$ npm install @launchpad-ui/inline
```
npm package: @launchpad-ui/inline-edit
Description: An element used to display and allow inline editing of a form element value.
Latest version: 0.3.57
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/inline-edit

> An element used to display and allow inline editing of a form element value.

[![See it on NPM!](https://img.shields.io/npm/v/@launchpad-ui/inline-edit?style=for-the-badge)](https://www.npmjs.com/package/@launchpad-ui/inline-edit)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@launchpad-ui/inline-edit?style=for-the-badge)](https://bundlephobia.com/result?p=@launchpad-ui/inline-edit)

## Installation

```sh
$ yarn add @launchpad-ui/inline-edit
# or
$ npm install @launchpad-ui/inline-edit
```