@launchpad-ui/core

@launchpad-ui/core

A modern, intuitive, and accessible design system made and used by the LaunchDarkly team. Built on React, TypeScript, and CSS.

Installation

$ yarn add @launchpad-ui/core
# or
$ npm install @launchpad-ui/core

Usage

First, import the CSS variable tokens into your project:

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

Voilà, you can now begin using any of the components available in LaunchPad. For the full list, view our Storybook.

import { Alert, AlertKind } from '@launchpad-ui/core';

...

return (
  <Alert kind={AlertKind.ERROR}>
    An unexpected error occurred.
  </Alert>
)

Importing stylesheets

Side-effect imports of CSS files are used for component styles. In LaunchPad, we also expose each component's stylesheets so you can import them directly. For a Remix example, click here.

FAQs

Should I import each component package separately, or import everything at once via the core package?

To guarantee strict compatibility between the component packages your app uses, we suggest importing @launchpad-ui/core instead of importing each component package separately.

If you choose to use LaunchPad via single component imports (e.g. @launchpad-ui/button) on its own, there are two things to be aware of:

• You may create token conflicts that expose difficult to diagnose bugs as described here.
• You may create inconsistencies in UI styling where subdependencies are used in components as shown here.

View the list of component NPM packages here: https://www.npmjs.com/search?q=%40launchpad-ui

Can I test pre-release versions of components?

To feature flag and test a pre-release version of a component, first install the pre-release using an alias:

$ yarn add @launchpad-ui/alert-beta@npm:@launchpad-ui/alert@0.10.0-beta.0

Then import and use the pre-release version alongside the version from core:

import { Alert, AlertKind } from '@launchpad-ui/core';
import { Alert as BetaAlert } from '@launchpad-ui/alert-beta';

...

if (enableNewAlert()) {
  return (
    <BetaAlert>...</BetaAlert>
  );
}

return (
  <Alert kind={AlertKind.ERROR}>
    An unexpected error occurred.
  </Alert>
)