Installation
Install and start using Launch UI
Choose your preferred way of getting started:
Start with a template
The easiest way is to use the template available on GitHub:
Launch UI Template
With this template, you get a complete 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 the CLI
Initialize the project
If you want to add Launch UI to an existing project that already uses shadcn/ui, you can skip this step.
For a new Next.js project, you can use the command below. Replace my-app with your project name:
npx shadcn@latest init --base radix --template next --no-monorepo --preset nova --name my-app
Launch UI components are built with React and Radix UI. If you run npx shadcn@latest init without flags, choose Next.js, no monorepo, Radix, and the Nova preset when prompted.
Then move into the generated project folder:
cd my-app
Add Launch UI to the project
Add the base Launch UI styles:
npx shadcn@latest add @launchui/launchui
This command adds the CSS, utilities, and base UI pieces that Launch UI components need to work.
Watch out for overrides
In a fresh shadcn/ui project, expect to approve prompts to overwrite
globals.css when installing @launchui/launchui and button.tsx when
installing @launchui/button. If you are adding Launch UI to an existing app,
review those prompts carefully and merge the Launch UI
styles
manually if you need to preserve local changes.
Add components
Now you can start adding components. For example, to add a button:
npx shadcn@latest add @launchui/button
This command will add a button component to the components/ui folder or ask you if you want to replace the existing one.
Theme provider
Some Launch UI components switch automatically between light and dark assets.
If your app does not already have a ThemeProvider from next-themes, wrap
your layout with the provider generated by shadcn/ui or the provider installed
at components/contexts/theme-provider.tsx.
Follow the video tutorial
If you'd prefer to follow a video, check out this tutorial, which 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 framework other than Next.js, such as Remix, Astro, or Vite, start by following the shadcn/ui documentation.
Then follow the CLI instructions above.
Troubleshooting
If npx shadcn@latest init fails, refer to the shadcn/ui documentation first. In that case, the issue is with shadcn/ui, not Launch UI.
If the issue is related to the Launch UI registry, 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.