A modern, intuitive, and accessible design system made and used by the LaunchDarkly team. Built on React, TypeScript, and CSS.
$ yarn add @launchpad-ui/core
# or
$ npm install @launchpad-ui/core
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>
)
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.
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
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>
)