Launch UI v2 is out!Read more

Professionally designed blocks and templates for websites and apps

Carefully crafted components and templates built with React, Shadcn/ui and Tailwind that will help your product stand out from the crowd.

Get StartedGithub
Last updated: 1 Apr 2025

Built with industry-standard tools and best practices

Figma
React19.0.0
TypeScript5.6.3
Shadcn/ui2.4.0
New
Tailwind4.0
New

It's all about design quality

In a world where everybody can vibe-code a new thing overnight, the key is to stand out. Generic-looking shadcn/ui blocks won't help you to get noticed. With Launch UI, you can make sure that your design is unique and memorable.

Design-first

Each block and component is carfully crafted—not generated by AI—to give a unique look and feel AI would never come up with.

Made for fast development

With lightweight code, modern tooling and best practice, Launch UI is as fast in the browser as it is to build with.

The code is yours

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

page.tsx

globals.css

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 "tailwindcss";

@plugin "tailwindcss-animate";

@import "../styles/syntax.css" layer(utilities);
@import "../styles/theme.css" layer(utilities);

@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
 --color-brand: var(--brand);
 --color-brand-foreground: var(--brand-foreground);
 --color-light: var(--light);
 --color-light-foreground: var(--light-foreground);
 --color-background: var(--background);
 --color-foreground: var(--foreground);
 --color-sidebar-ring: var(--sidebar-ring);

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

Build your website and product with the same technologies and frameworks. 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

“I love that I don't need to think about the design because Launch UI perfectly solves it for me. If you value flexibility over written-in-stone components, I can highly recommend it.”

M
Marcin Zaremski
Indie Hacker

“What stands out about Launch UI is its flexibility. We've built everything from dashboards to marketing sites using these components, and they adapt beautifully to every context.”

M
Marcus Rodriguez
Tech Lead

“I've used many UI libraries over the years, but Launch UI strikes the perfect balance between flexibility and structure. It's become an essential part of my toolkit.”

D
Darius Flynn
Web Developer

What's inside?

Hundreds of components, blocks and templates, all created with React, Shadcn/ui and Tailwind that will help you make your product look special.

Blocks

Building blocks for creating beautiful user interfaces across various sections of your website.

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.

Get StartedGithub

Hero

6 sections

It's all about design quality

In a world where everybody can vibe-code a new thing overnight, the key is to stand out. Generic-looking shadcn/ui blocks won't help you to get noticed. With Launch UI, you can make sure that your design is unique and memorable.

Design-first

Each block and component is carfully crafted—not generated by AI—to give a unique look and feel AI would never come up with.

Made for fast development

With lightweight code, modern tooling and best practice, Launch UI is as fast in the browser as it is to build with.

The code is yours

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

page.tsx

globals.css

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 "tailwindcss";

@plugin "tailwindcss-animate";

@import "../styles/syntax.css" layer(utilities);
@import "../styles/theme.css" layer(utilities);

@custom-variant dark (&:where(.dark, .dark *));

@theme inline {
 --color-brand: var(--brand);
 --color-brand-foreground: var(--brand-foreground);
 --color-light: var(--light);
 --color-light-foreground: var(--light-foreground);
 --color-background: var(--background);
 --color-foreground: var(--foreground);
 --color-sidebar-ring: var(--sidebar-ring);

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

Build your website and product with the same technologies and frameworks. Forget about multiple codebases and unnecessary APIs.

No extra dependencies, no extra maintenance.

Bento Grid

5 sections

Everything you need at your fingertips

A comprehensive collection of components written in modern React, Typescript and Tailwind CSS.

You'll find here everything you need to build your next landing page.

Feature

6 sections

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.

F

Fabrizio Fernandez

@fab3304

Playing around with @launchui suddenly made me feeling inspired to launch that side project.

D

Darius Flynn

@flynnn

Exploring @launchui's sleek UI. It's like a dark mode enthusiast's playground.

F

Felix B.

@felixbs

Digging into @launchui. Those shadows are giving me serious design envy.

F

Fabrizio Fernandez

@fab3304

Playing around with @launchui suddenly made me feeling inspired to launch that side project.

D

Darius Flynn

@flynnn

Exploring @launchui's sleek UI. It's like a dark mode enthusiast's playground.

F

Felix B.

@felixbs

Digging into @launchui. Those shadows are giving me serious design envy.

F

Fabrizio Fernandez

@fab3304

Playing around with @launchui suddenly made me feeling inspired to launch that side project.

D

Darius Flynn

@flynnn

Exploring @launchui's sleek UI. It's like a dark mode enthusiast's playground.

F

Felix B.

@felixbs

Digging into @launchui. Those shadows are giving me serious design envy.

F

Fabrizio Fernandez

@fab3304

Playing around with @launchui suddenly made me feeling inspired to launch that side project.

D

Darius Flynn

@flynnn

Exploring @launchui's sleek UI. It's like a dark mode enthusiast's playground.

F

Felix B.

@felixbs

Digging into @launchui. Those shadows are giving me serious design envy.

O

Olivia Blackwood

@olivia1992

@launchui is not messing around with its component library game.

E

Esme Rothschild

@EmeRothArt

@launchui is slick. That globe graphic though. Making me feel like I'm building websites for a sci-fi movie.

K

Kai Nakamura

@KaiNakWaves

Just made my first website with @launchui. Its flexibility is speaking my language. No drama, just seamless integration.

O

Olivia Blackwood

@olivia1992

@launchui is not messing around with its component library game.

E

Esme Rothschild

@EmeRothArt

@launchui is slick. That globe graphic though. Making me feel like I'm building websites for a sci-fi movie.

K

Kai Nakamura

@KaiNakWaves

Just made my first website with @launchui. Its flexibility is speaking my language. No drama, just seamless integration.

O

Olivia Blackwood

@olivia1992

@launchui is not messing around with its component library game.

E

Esme Rothschild

@EmeRothArt

@launchui is slick. That globe graphic though. Making me feel like I'm building websites for a sci-fi movie.

K

Kai Nakamura

@KaiNakWaves

Just made my first website with @launchui. Its flexibility is speaking my language. No drama, just seamless integration.

O

Olivia Blackwood

@olivia1992

@launchui is not messing around with its component library game.

E

Esme Rothschild

@EmeRothArt

@launchui is slick. That globe graphic though. Making me feel like I'm building websites for a sci-fi movie.

K

Kai Nakamura

@KaiNakWaves

Just made my first website with @launchui. Its flexibility is speaking my language. No drama, just seamless integration.

Social Proof

6 sections

Questions and Answers

FAQ

6 sections

Navbar

6 sections

Trusted by world's leading companies

Catalog
PictelAI
CoreOS
EasyTax
Peregrin
LeapYear
Catalog
PictelAI
CoreOS
EasyTax
Peregrin
LeapYear
Catalog
PictelAI
CoreOS
EasyTax
Peregrin
LeapYear
Catalog
PictelAI
CoreOS
EasyTax
Peregrin
LeapYear

Logos

6 sections

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

Items

5 sections

Recently built with Launch UI

Dozens of designers and developers have already built their websites with Launch UI.

Carousel

4 sections

A proven solution for good design

Thousands of designers and developers have already used Launch UI to create beautiful and functional websites and products.

used by
6.6
k
designers and developers
used by
2.2
k
designers on Figma Community
over
484
clones and forks of the template on Github
already
4
k
installations with shadcn/ui CLI

Stats

4 sections

“I love that I don't need to think about the design because Launch UI perfectly solves it for me. If you value flexibility over written-in-stone components, I can highly recommend it.”

M
Marcin Zaremski
Indie Hacker

“What stands out about Launch UI is its flexibility. We've built everything from dashboards to marketing sites using these components, and they adapt beautifully to every context.”

M
Marcus Rodriguez
Tech Lead

“I've used many UI libraries over the years, but Launch UI strikes the perfect balance between flexibility and structure. It's become an essential part of my toolkit.”

D
Darius Flynn
Web Developer

Testimonials

3 sections

Start building

Get Started

CTA

4 sections

Footer

4 sections

Build your dream landing page, today.

Get lifetime access to all the components. No recurring fees. Just simple, transparent pricing.

Pro

For early-stage founders, solopreneurs and indie devs

$99
one-time paymentplus local taxes
Get all-access

Lifetime access. Free updates. No recurring fees.

  • 4 website templates
  • 2 app templates
  • 72 blocks and sections
  • 15 illustrations
  • 14 custom animations

Pro Team

For teams and agencies working on cool products together

$499
one-time paymentplus local taxes
Get all-access for your team

Lifetime access. Free updates. No recurring fees.

  • All the templates, components and sections available for your entire team

Pricing

4 sections

Make the right impression

Launch UI makes it easy to build an unforgetable website that resonates with professional design-centric audiences.

Tabs

3 sections

What's inside?

Hundreds of components, blocks and templates, all created with React, Shadcn/ui and Tailwind that will help you make your product look special.

Blocks

Building blocks for creating beautiful user interfaces across various sections of your website.

Hero

5 sections

Bento Grid

5 sections

Feature

6 sections

Social Proof

6 sections

FAQ

5 sections

Navbar

5 sections

Logos

5 sections

Items

4 sections

Carousel

4 sections

Stats

3 sections

Testimonials

3 sections

CTA

3 sections

Footer

3 sections

Pricing

3 sections

Tabs

3 sections

Website Templates

Complete website templates ready to be customized for your business needs.

Saturn

A modern and clean template for SaaS businesses and marketing websites. Designed to showcase your product and convert visitors into customers.

View Template

Neptune

A template for groundbreaking AI products and applications. Perfect for showcasing AI capabilities and demonstrating complex features.

View Template

Luna

A comprehensive template for developer-focused projects. Perfect for showcasing developer features and building trust with potential customers.

View Template

Pluto

A sleek and engaging template designed for mobile app marketing. Perfect for showcasing app features and driving downloads.

View Template

App Templates

Ready-to-use app interface templates that you can integrate with your backend.

Calendar App

Responsive, customizable calendar block made with shadcn/ui, tailwind and react. Perfect for scheduling apps, time management tools, CRMs, and productivity platforms.

View Template

AI Chat App

Interactive chat block made with shadcn/ui, tailwind and react. A great starting point for building AI assistants, customer support tools, messaging platforms, and virtual agents.

View Template

Gallery

3 sections

Website Templates

Complete website templates ready to be customized for your business needs.

Saturn

A modern and clean template for SaaS businesses and marketing websites. Designed to showcase your product and convert visitors into customers.

View Template

Neptune

A template for groundbreaking AI products and applications. Perfect for showcasing AI capabilities and demonstrating complex features.

View Template

Luna

A comprehensive template for developer-focused projects. Perfect for showcasing developer features and building trust with potential customers.

View Template

Pluto

A sleek and engaging template designed for mobile app marketing. Perfect for showcasing app features and driving downloads.

View Template

App Templates

Ready-to-use app interface templates that you can integrate with your backend.

Calendar App

Responsive, customizable calendar block made with shadcn/ui, tailwind and react. Perfect for scheduling apps, time management tools, CRMs, and productivity platforms.

View Template

AI Chat App

Interactive chat block made with shadcn/ui, tailwind and react. A great starting point for building AI assistants, customer support tools, messaging platforms, and virtual agents.

View Template

Recently built with Launch UI

Dozens of designers and developers have already built their websites with Launch UI.

A proven solution for good design

Thousands of designers and developers have already used Launch UI to create beautiful and functional websites and products.

used by
6.6
k
designers and developers
used by
2.2
k
designers on Figma Community
over
484
clones and forks of the template on Github
already
4
k
installations with shadcn/ui CLI

Level-up your design game, today

Get lifetime access to all templates and blocks. No recurring fees. Just simple, transparent pricing.

Pro

For early-stage founders, solopreneurs and indie devs

$99
one-time paymentplus local taxes
Get all-access

Lifetime access. Free updates. No recurring fees.

  • 4 website templates
  • 2 app templates
  • 72 blocks and sections
  • 15 illustrations
  • 14 custom animations

Pro Team

For teams and agencies working on cool products together

$499
one-time paymentplus local taxes
Get all-access for your team

Lifetime access. Free updates. No recurring fees.

  • All the templates, components and sections available for your entire team

Questions and Answers

Start building

Get Started