@launchpad-ui/core
TypeScript icon, indicating that this package has built-in type declarations

0.50.0 • Public • Published

@launchpad-ui/core

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

See it on NPM! How big is this package in your project?

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

Readme

Keywords

none

Package Sidebar

Install

npm i @launchpad-ui/core

Weekly Downloads

550

Version

0.50.0

License

Apache-2.0

Unpacked Size

31.8 kB

Total Files

9

Last publish

Collaborators

  • launchdarkly