https://github.com/launchdarkly/launchpad-ui
:rocket: LaunchDarkly's design system
https://github.com/launchdarkly/launchpad-ui
accessibility component-library design-systems design-tokens launchdarkly launchdarkly-service-component managed-by-terraform react ssr
Last synced: about 2 months ago
JSON representation
:rocket: LaunchDarkly's design system
- Host: GitHub
- URL: https://github.com/launchdarkly/launchpad-ui
- Owner: launchdarkly
- License: other
- Created: 2022-04-18T12:38:03.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2026-05-07T00:10:00.000Z (about 2 months ago)
- Last Synced: 2026-05-07T00:16:06.157Z (about 2 months ago)
- Topics: accessibility, component-library, design-systems, design-tokens, launchdarkly, launchdarkly-service-component, managed-by-terraform, react, ssr
- Language: TypeScript
- Homepage: https://launchpad.launchdarkly.com/
- Size: 29 MB
- Stars: 52
- Watchers: 27
- Forks: 10
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# LaunchPad
A modern, intuitive, and accessible design system built and used by the LaunchDarkly team.
[](https://launchpad.launchdarkly.com) [](https://github.com/launchdarkly/launchpad-ui/actions?query=branch%3Amain)
## Installation
```sh
$ npm install @launchpad-ui/components @launchpad-ui/icons @launchpad-ui/tokens
```
```sh
$ yarn add @launchpad-ui/components @launchpad-ui/icons @launchpad-ui/tokens
```
## Packages
[](https://www.npmjs.com/package/@launchpad-ui/components)
[](https://www.npmjs.com/package/@launchpad-ui/icons)
[](https://www.npmjs.com/package/@launchpad-ui/tokens)
## Apps
[](https://marketplace.visualstudio.com/items?itemName=LaunchDarklyOfficial.launchpad-design-system)
## AI Code Generation
For consistent, high-quality AI-generated code that follows LaunchPad standards, see our [AI Prompt Header guide](AI_PROMPT_HEADER.md). This ensures AI assistants use our design system correctly and follow established patterns.
## Contributing
We welcome contributions! See the [contributing docs](https://github.com/launchdarkly/launchpad-ui/blob/main/CONTRIBUTING.md) to learn how to get started.
## Questions?
- LaunchDarkly employees can reach out with questions or comments in [our Slack channel, #ask-launchpad-design-system](https://launchdarkly.slack.com/channels/CDXEFNMLP)
- You can also [start a discussion](https://github.com/launchdarkly/launchpad-ui/discussions) in the LaunchPad repository to ask a question!
## Figma MCP Server Setup
If you'd like to generate new components or recipes with AI using [Figma MCP Server](https://www.figma.com/blog/introducing-figmas-dev-mode-mcp-server/), follow the instructions in [Figma's MCP Guide](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server).
Note that using Figma MCP server requires Dev or Full seat in Figma. For the best results it's recommended to use LaunchPad components and auto layout in your designs to ensure the generated code is mapped correctly to components and tokens instead of generating raw HTML code and styles.
Once the MCP is enabled in your Figma and IDE, open the AI chat as usual and use prompt like:
**Create a new code example in recipes that displays the selected Figma File layout. Use the design system components and use figma.tsx files to help with the mapping.**