Installation
Install and start using Launch UI
Choose your preferred way of getting started:
Create new project
Start with a template
The easiest way is to use the template available on GitHub:
Launch UI Template
With this template, you get a fully-fledged Next.js landing page, with Shadcn/ui and Tailwind CSS already set up and a few sections already implemented.
Follow the README to get started. Then, use this documentation to add more components.
Start with CLI
If you prefer to start from scratch, run:
npx shadcn@canary init 'https://launchuicomponents.com/r'
This command will create a blank Next.js project with all the required configuration files. However, it will not install any components or examples.
Shadcn/ui canary release
The latest version of Launch UI uses Tailwind 4 that for now is only available in the canary release of shadcn/ui. That's why you need to install Launch UI with npx shadcn@canary instead of npx shadcn@lastest.
The shadcn CLI in canary doesn't support the -d flag neccessery to preselect defaults during the install. Therefore, the CLI will ask you about the base color. To match the hue of other variables used in Launch UI, select Zinc.
The CLI might also warn you about the peer dependency issues due to using React 19. You can then run the command with the flag you choose (--force or --legacy-peer-deps).
If you need help, check out this video that explains how to build a Launch UI landing page from scratch step by step:
Start with a different framework
If you prefer to use a different framework than Next.js, such as Remix, Astro or Vite, start by following the shadcn/ui documentation.
Then, follow the instructions below on how to add Launch UI to an existing project.
Add to existing project
Run the following command inside your project's directory:
npx shadcn@canary init 'https://launchuicomponents.com/r'
This command will create or update your Tailwind and Shadcn/ui configs as well as import all the CSS that Launch UI needs to work.
You can now start adding components to your project.
Watch out for overrides
If you already have a globals.css file in your project, this command will
try to override it. If you don't want to lose your existing configuration,
you'll have to merge the Launch UI
styles
manually.
Add to an existing project that already uses shadcn/ui
If the project already uses shadcn/ui, you can add Launch UI to it by running:
npx shadcn@canary add 'https://launchuicomponents.com/r'
You can now start adding components to your project, same as you would do with your existing shadcn/ui components.
Troubleshooting
If the CLI command doesn't work, try running npx shadcn@latest init -d to see if the issue persists.
If it does, refer to the shadcn/ui documentation first. In such case, it's a shadcn/ui issue, not a Launch UI one.
Things might not work as expected especially if you're using Next.js 15 (or React 19 in general).
If the npx shadcn@latest init -d command succeeds, run npx shadcn@latest add "https://launchuicomponents.com/r".
If this fails, please get in touch with me or open an issue on GitHub so I can help you out.
Need help?
File a feature request, report a bug, or ask me anything.