@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:

1. You may create token conflicts that expose difficult to diagnose bugs as described here.
2. 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/[email protected]

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>
)