open-index/open-npm huggingface dataset:
npm package: @launchpad-ui/overlay
Description: An element that manages modals and popovers.
Latest version: 0.6.2

# @launchpad-ui/overlay

> An element that manages modals and popovers.

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

## Installation

```sh
$ yarn add @launchpad-ui/overlay
# or
$ npm install @launchpad-ui/overlay
```
npm package: @launchpad-ui/pagination
Description: Navigate through a paged list.
Latest version: 0.4.69
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/pagination

> Navigate through a paged list.

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

## Installation

```sh
$ yarn add @launchpad-ui/pagination
# or
$ npm install @launchpad-ui/pagination
```
npm package: @launchpad-ui/popover
Description: An element that displays content within a portal triggered by user interactions.
Latest version: 0.14.2

# @launchpad-ui/popover

> An element that displays content within a portal triggered by user interactions.

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

## Installation

```sh
$ yarn add @launchpad-ui/popover
# or
$ npm install @launchpad-ui/popover
```
npm package: @launchpad-ui/portal
Description: An element that renders a subtree in a different part of the DOM.
Latest version: 0.4.2

# @launchpad-ui/portal

> An element that renders a subtree in a different part of the DOM.

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

## Installation

```sh
$ yarn add @launchpad-ui/portal
# or
$ npm install @launchpad-ui/portal
```
npm package: @launchpad-ui/progress
Description: An element that indicates a page or content is loading.
Latest version: 0.5.57
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/progress

> An element that indicates a page or content is loading.

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

## Installation

```sh
$ yarn add @launchpad-ui/progress
# or
$ npm install @launchpad-ui/progress
```
npm package: @launchpad-ui/progress-bubbles
Description: Shows current progress through a multistep flow.
Latest version: 0.7.41
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/progress-bubbles

> Shows current progress through a multistep flow.

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

## Installation

```sh
$ yarn add @launchpad-ui/progress-bubbles
# or
$ npm install @launchpad-ui/progress-bubbles
```
npm package: @launchpad-ui/select
Description: Select dropdowns supporting single and multi select.
Latest version: 0.4.58
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/select

> Select dropdowns that support single and multiselect

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

## Installation

```sh
$ yarn add @launchpad-ui/select
# or
$ npm install @launchpad-ui/select
```
npm package: @launchpad-ui/slider
Description: An element used to set a value within a range.
Latest version: 0.5.22
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/slider

> An element used to set a value within a range.

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

## Installation

```sh
$ yarn add @launchpad-ui/slider
# or
$ npm install @launchpad-ui/slider
```
npm package: @launchpad-ui/snackbar
Description: An element that provides brief messages about app processes with a CTA.
Latest version: 0.5.32
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/snackbar

> An element that provides brief messages about app processes with a CTA.

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

## Installation

```sh
$ yarn add @launchpad-ui/snackbar
# or
$ npm install @launchpad-ui/snackbar
```
npm package: @launchpad-ui/split-button
Description: An element that presents an immediate action and additional options from a dropdown.
Latest version: 0.10.42
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/split-button

> An element that presents an immediate action and additional options from a dropdown.

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

## Installation

```sh
$ yarn add @launchpad-ui/split-button
# or
$ npm install @launchpad-ui/split-button
```
npm package: @launchpad-ui/stack
Description: An element used to add space between components.
Latest version: 0.1.33
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/stack

> An element used to add space between components.

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

## Installation

```sh
$ yarn add @launchpad-ui/stack
# or
$ npm install @launchpad-ui/stack
```
npm package: @launchpad-ui/tab-list
Description: An element that navigates between related sections of content on the same page.
Latest version: 0.5.39
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/tab-list

> An element that navigates between related sections of content on the same page.

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

## Installation

```sh
$ yarn add @launchpad-ui/tab-list
# or
$ npm install @launchpad-ui/tab-list
```
npm package: @launchpad-ui/table
Description: An element used to organize and display data to users.
Latest version: 0.9.2

# @launchpad-ui/table

> An element used to organize and display data to users.

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

## Installation

```sh
$ yarn add @launchpad-ui/table
# or
$ npm install @launchpad-ui/table
```
npm package: @launchpad-ui/tag
Description: Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.
Latest version: 0.3.69
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/tag

> Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.

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

## Installation

```sh
$ yarn add @launchpad-ui/tag
# or
$ npm install @launchpad-ui/tag
```
npm package: @launchpad-ui/toast
Description: Contains a concise message that indicates the completion of a task that requires no user interactions. 
Latest version: 0.3.46
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/toast

> Contains a concise message that indicates the completion of a task that requires no user interactions. 

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

## Installation

```sh
$ yarn add @launchpad-ui/toast
# or
$ npm install @launchpad-ui/toast
```
npm package: @launchpad-ui/toggle
Description: An element that represents on/off values as opposed to selection.
Latest version: 0.7.31
Deprecated: Use components from @launchpad-ui/components instead

# @launchpad-ui/toggle

> An element that represents on/off values as opposed to selection.

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

## Installation

```sh
$ yarn add @launchpad-ui/toggle
# or
$ npm install @launchpad-ui/toggle
```
npm package: @launchpad-ui/tokens
Description: LaunchPad design tokens delivered as CSS custom properties, CommonJS modules, and ES modules.
Latest version: 0.15.1

# @launchpad-ui/tokens

> Design tokens used to create experiences that express the LaunchDarkly brand.

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

## Installation

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

## Usage

### CSS Custom Properties

```css
@import '@launchpad-ui/tokens/dist/fonts.css';
@import '@launchpad-ui/tokens/dist/index.css';
@import '@launchpad-ui/tokens/dist/media-queries.css';
@import '@launchpad-ui/tokens/dist/themes.css';
```

### ES Modules

```js
import tokens from '@launchpad-ui/tokens';
```

### CommonJS Modules

```js
const tokens = require('@launchpad-ui/tokens');
```
npm package: @launchpad-ui/tooltip
Description: An element that provides additional information on hover or focus.
Latest version: 0.12.2

# @launchpad-ui/tooltip

> An element that provides additional information on hover or focus.

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

## Installation

```sh
$ yarn add @launchpad-ui/tooltip
# or
$ npm install @launchpad-ui/tooltip
```
npm package: @launchpad-ui/vars
Description: Vanilla Extract design token references for LaunchPad styles.
Latest version: 0.5.2

# @launchpad-ui/vars

> Vanilla Extract design token references for LaunchPad styles.

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

## Installation

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

## Usage

### Vanilla Extract styles

```js
import { vars } from '@launchpad-ui/vars';
import { style } from '@vanilla-extract/css';

export const container = style({
  backgroundColor: vars.color.bg.ui.secondary,
  color: vars.color.text.ui.secondary,
  padding: vars.spacing[500],
  border: `${vars.border.width[300]} solid ${vars.color.border.ui.primary}`,
  fontSize: vars.font.size[300],
});
```

**Note**

The [@launchpad-ui/tokens](../tokens/README.md) package must be installed and its tokens imported to ensure styles are applied.