New version of Launch UI is out!Get started

Give your big idea the website it deserves

Landing page components built with React, Shadcn/ui and Tailwind that will make your website feel premium.

Launch UI app screenshot

Built with the best tools

Figma
React18.3.1
TypeScript5.6.2
Shadcn/ui2.0.7
Tailwind3.4.11

Build a website that is hard to forget.

Build a top-notch landing page even if you don't have the time for it. Create an irresistible offer that speaks professionalism and hi-end design.

Mobile-first

Optimized to look and feel great on all devices, operating systems, and screen sizes.

Launch UI app screenshot

Made for search engines

Unlike the bloated no-code solutions, Launch UI is built to be perfectly optimized for search engines.

The code is yours

With Launch UI, the code is yours forever. Never bother about subscriptions and lock-ins.

page.tsx

tailwind.config.ts

import { cn } from"@/lib/utils";
import clsx from "clsx";
import { PropsWithChildren  } from"react";

type NoteProps = PropsWithChildren & {
 title?: string;
 type?: "note" | "danger" | "warning" | "success";
 className?: string;
 };

export default function Note({
 children,
 title = "Note",
 type = "note",
 className,
 }: NoteProps ) {
 const noteClassNames = clsx({
 "dark:bg-stone-950/25 bg-stone-50": type == "note",
 "dark:bg-red-950 bg-red-100 border-red-200 dark:border-red-900":
 type === "danger",
 "dark:bg-orange-950 bg-orange-100 border-orange-200 dark:border-orange-900":
 type === "warning",
 "dark:bg-green-950 bg-green-100 border-green-200 dark:border-green-900":
 type === "success",
  });
import { Config } from"tailwindcss";

const config = {
 darkMode: ["class"],
 content: [
   "./pages/**/*.{js,ts,jsx,tsx,mdx}",
   "./components/**/*.{js,ts,jsx,tsx,mdx}",
   "./app/**/*.{js,ts,jsx,tsx,mdx}",
 ],
 theme: {
   extend: {
     colors: {
       background: "hsl(var(--background))",
       foreground: "hsl(var(--foreground))",
       card: {
         DEFAULT: "hsl(var(--card) / 0.2)",
         foreground: "hsl(var(--card-foreground))",
       },

Top-level performance

Made for static sites while avoiding heavy assets, your website will feel snappy and load instantly.

Data-agnostic

All the data is separate from components so you can edit it in seconds or make it dynamic.

Easily connect to a CMS of your choice.

We need to update this heading before launch
Sofia G.
Let me quickly jump into Sanity and fix it
Done!
Erik D.

Fits right into your stack

Integrate your landing page directly in the product and forget about multiple codebases and unnecessary APIs.

No extra dependencies, no extra maintenance.

Everything you need. Nothing you don't.

Accessibility first

Fully WCAG 2.0 compliant, made with best a11y practices

Responsive design

Looks and works great on any device and screen size

Light and dark mode

Seamless switching between color schemes, 6 themes included

Easy to customize

Flexible options to match your product or brand

Top-level performance

Made for lightning-fast load times and smooth interactions

Production ready

Thoroughly tested and launch-prepared

Made for localisation

Easy to implement support for multiple languages and regions

CMS friendly

Built to work with your any headless content management system

You can change anything. But you don't have to.

Get the full control of the code of your website. Change it or just use the defaults. Customize it in seconds with CSS variables.

Questions and Answers

Loved by designers and developers across the planet

These are some dummy testimonials from made-up names displayed to preview the social proof components in action.

Start building

Get Started