Navbar

6 variants

Hero

6 variants

Default

sections/hero/default.tsx

New version of Launch UI is out!Get started

Give your big idea the design it deserves

Professionally designed blocks and templates built with React, Shadcn/ui and Tailwind that will help your product stand out.

Layers

sections/hero/layers.tsx

Launch UI v2 is out!Read more

Give your big idea the design it deserves

Professionally designed blocks and templates built with React, Shadcn/ui and Tailwind that will help your product stand out.

Illustration

sections/hero/illustration.tsx

Give your big idea the design it deserves

Professionally designed blocks and templates built with React, Shadcn/ui and Tailwind that will help your product stand out.

Get Started

Free and open source forever.

Top Glow

sections/hero/top-glow.tsx

Give your big idea the design it deserves

Professionally designed blocks and templates built with React, Shadcn/ui and Tailwind that will help your product stand out.

Mobile App

sections/hero/mobile-app.tsx

New version of Launch UI is out!Get started

Give your big idea the design it deserves

Professionally designed blocks and templates built with React, Shadcn/ui and Tailwind that will help your product stand out.

Barebone

sections/hero/barebone.tsx

Bento Grid

5 variants

3 Rows Top

sections/bento-grid/3-rows-top.tsx

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.

3 Rows Bottom

sections/bento-grid/3-rows-bottom.tsx

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.

The code is yours

With Launch UI, the code is yours forever. You can use it as a starting point for your own projects and customize it to your needs.

Never bother about subscriptions and lock-ins.

ai-powered stack
21,000
active users
Sep 15 2025 12:34 PM
Changes committed and pushed
Cursor • contact@mikolajdobrucki.com
Sep 20 2025 2:43 PM
Pull Request #2121 merged
Github • contact@mikolajdobrucki.com
Aug 23 2025 6:34 PM
Deployed to production
Vercel • contact@mikolajdobrucki.com

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.

Integrate website and product

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

No extra dependencies, no extra maintenance.

Top-level performance

Made for static sites while avoiding heavy assets, your website will feel snappy and load instantly.
Accessibility first
Responsive design
Light and dark mode
Easy to customize
Accessibility first
Responsive design
Light and dark mode
Easy to customize
Accessibility first
Responsive design
Light and dark mode
Easy to customize
Top-level performance
Production ready
Made for localisation
CMS friendly
Top-level performance
Production ready
Made for localisation
CMS friendly
Top-level performance
Production ready
Made for localisation
CMS friendly

Made for search engines

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

2 Rows Top

sections/bento-grid/2-rows-top.tsx

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.

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. You can use it as a starting point for your own projects and customize it to your needs.

Never bother about subscriptions and lock-ins.

Mobile-first

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

Top-level performance

Lightweight and optimized, your website will will feel snappy and load instantly.

Fits right into your stack

Integrate your landing page directly in the product while using your favorite tools.

2 Rows Bottom

sections/bento-grid/2-rows-bottom.tsx

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.

95
Performance
85
Accessibility
90
Practices

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.

Top-level performance

With no heavy assets or dependencies, your website will feel snappy and load instantly.

No bloat, no extra maintenance.

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. You can use it as a starting point for your own projects and customize it to your needs.

Never bother about subscriptions and lock-ins.

Barebone

sections/bento-grid/barebone.tsx

Section title

Card title

Card description

Feature

6 variants

Sticky Left

sections/feature/sticky-left.tsx

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.

Sticky Right

sections/feature/sticky-right.tsx

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.

Mockup

sections/feature/mockup.tsx

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.

Illustration Top

sections/feature/illustration-top.tsx

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.

Illustration Bottom

sections/feature/illustration-bottom.tsx

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.

Barebone

sections/feature/barebone.tsx

Title

Description

Social Proof

6 variants

Marquee 2 Rows

sections/social-proof/marquee-2-rows.tsx

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.

Marquee

sections/social-proof/marquee.tsx

Loved by designers and developers across the planet

Here's what people are saying about Launch UI

Masonry

sections/social-proof/masonry.tsx

Static

sections/social-proof/static.tsx

Loved by designers and developers across the planet

Here's what people are saying about Launch UI

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. Simply incredible stuff.

L

Luna Martinez

@lunacode

@launchui is a game-changer for rapid prototyping. The components are so well thought out.

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.

Barebone

sections/social-proof/barebone.tsx

Title

Description

N

Name

@username

Text

Logos

6 variants

Default

sections/logos/default.tsx

Last updated: 1000

Built with industry-standard tools and best practices

Figma
React19.2.1
TypeScript5.9.3
Shadcn/ui3.6.3New
Tailwind4.1.18

Grid 6

sections/logos/grid-6.tsx

Trusted by world's leading companies

AxionLabs
Synthetikai
Driftbase
Flowrate
Quantify
Orbitra

Grid 8

sections/logos/grid-8.tsx

Trusted by world's leading companies

AxionLabs
Synthetikai
Driftbase
Flowrate
Quantify
Orbitra
AxionLabs
Synthetikai

Marquee

sections/logos/marquee.tsx

Trusted by world's leading companies

AxionLabs
Synthetikai
Driftbase
Flowrate
Quantify
Orbitra
AxionLabs
Synthetikai
Driftbase
Flowrate
Quantify
Orbitra
AxionLabs
Synthetikai
Driftbase
Flowrate
Quantify
Orbitra
AxionLabs
Synthetikai
Driftbase
Flowrate
Quantify
Orbitra

Static

sections/logos/static.tsx

Trusted by world's leading companies

AxionLabs
Synthetikai
Driftbase
Flowrate
Quantify
Orbitra

Barebone

sections/logos/barebone.tsx

Title

React19.2.1

Items

5 variants

Default

sections/items/default.tsx

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

Default Brand

sections/items/default-brand.tsx

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

Large

sections/items/large.tsx

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

Large Brand

sections/items/large-brand.tsx

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

Barebone

sections/items/barebone.tsx

Title

Item Title

Item description goes here

FAQ

6 variants

Default

sections/faq/default.tsx

Questions and Answers

2 Cols

sections/faq/2-cols.tsx

Questions and Answers

2 Cols Raised

sections/faq/2-cols-raised.tsx

Questions and Answers

Raised

sections/faq/raised.tsx

Questions and Answers

Static

sections/faq/static.tsx

Questions and Answers

Why building a great landing page is critical for your business?

In today's AI-driven world, standing out is harder than ever. While anyone can build a product, a professional landing page makes the difference between success and failure.

Launch UI helps you ship faster without compromising on quality.

Why use Launch UI instead of a no-code tool?

No-code tools lock you into their ecosystem with recurring fees and limited control. They often come with performance issues and make it difficult to integrate with your product.

You can't even change your hosting provider and basic things like web analytics come as extra costs and paid add-ons.

What might seem like a convenient solution today could paint you into a corner tomorrow, limiting your ability to scale and adapt. Launch UI gives you full control of your code while maintaining professional quality.

How Launch UI is different from other components libraries and templates?

Launch UI stands out with premium design quality and delightful touches of custom animations and illustrations.

All components are carefully crafted to help position your product as a professional tool, avoiding the generic template look.

Unlike many libraries that rely on outdated CSS practices and old dependencies, Launch UI is built with modern technologies and best practices in mind.

Why exactly does it mean that "The code is yours"?

The basic version of Launch UI is open-source and free forever, under a do-whatever-you-want license.

The pro version that contains more components and options is a one-time purchase that gives you lifetime access to all current and future content. Use it for unlimited personal and commercial projects - no recurring fees or restrictions.

For complete details about licensing and usage rights, check out the pricing page.

Are Figma files included?

Yes! The complete Launch UI template is available for free on the Figma community.

Can I get a discount?

Yes! Join the feedback program and get 33% off your purchase by providing feedback on new features and components.

Barebone

sections/faq/barebone.tsx

Frequently Asked Questions

Testimonials

3 variants

Default

sections/testimonials/default.tsx

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.

Grid

sections/testimonials/grid.tsx

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

Carousel

sections/testimonials/carousel.tsx

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

CTA

4 variants

Default

sections/cta/default.tsx

Start building

Box

sections/cta/box.tsx

Get started

Start building with Launch UI

Get started with Launch UI and build your landing page in no time

Beam

sections/cta/beam.tsx

Start building

Get started with Launch UI and build your landing page in no time

Get Started

14-days trials. No credit card required.

Barebone

sections/cta/barebone.tsx

Title

Carousel

4 variants

Stats

4 variants

Boxed

sections/stats/boxed.tsx


used by
1
k
designers on Figma Community
over
1000
clones and forks of the template on Github
already
1
k
installations with shadcn/ui CLI
includes
1000
blocks and sections

Grid

sections/stats/grid.tsx

A powerful React library for websites

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

used by
1
k
designers on Figma Community
over
1000
clones and forks of the template on Github
already
1
k
installations with shadcn/ui CLI
includes
1000
blocks and sections

Grid Boxed

sections/stats/grid-boxed.tsx

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
3
k
designers and developers
used by
1
k
designers on Figma Community
over
1000
clones and forks of the template on Github
already
1
k
installations with shadcn/ui CLI

Default

sections/stats/default.tsx

used by
1
k
designers on Figma Community
over
1000
clones and forks of the template on Github
already
1
k
installations with shadcn/ui CLI
includes
1000
blocks and sections

Pricing

7 variants

Default

sections/pricing/default.tsx

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.


  • $1000 templates
  • $1000 blocks and sections
  • $1000 illustrations
  • $1000 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

2 Cols

sections/pricing/2-cols.tsx

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

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

Lifetime access. Free updates. No recurring fees.


  • $1000 templates
  • $1000 blocks and sections
  • $1000 illustrations
  • $1000 custom animations

Pro Team

For teams and agencies working on cool products together

$749
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

2 Cols Subscription

sections/pricing/2-cols-subscription.tsx

Pricing

This is just a preview of a component variant for subscription products. Launch UI Pro version is available as one-time purchase with lifetime access.

MonthlyYearlySave 20%

Starter

Perfect for small teams and growing businesses

$12
one-time paymentplus local taxes
Get started

Billed yearly ($144/year)


  • Up to 5 team members
  • 20GB storage
  • Basic analytics
  • 24/7 email support
  • API access

Enterprise

For larger teams with advanced needs

$60
one-time paymentplus local taxes
Contact sales

Billed yearly ($720/year)


  • Unlimited team members
  • Unlimited storage
  • Advanced analytics
  • 24/7 priority support
  • Custom integrations
  • SSO authentication
  • Dedicated account manager

3 Cols Subscription

sections/pricing/3-cols-subscription.tsx

Pricing

This is just a preview of a component variant for subscription products. Launch UI Pro version is available as one-time purchase with lifetime access.

MonthlyYearlySave 20%

Free

For everyone starting out on a website for their big idea

$0
Get started for free

Free and open-source forever


  • 9 landing page sections
  • 36 components
  • 5 custom animations

Starter

Perfect for small teams and growing businesses

$12
one-time paymentplus local taxes
Get started

Billed yearly ($144/year)


  • Up to 5 team members
  • 20GB storage
  • Basic analytics
  • 24/7 email support
  • API access

Enterprise

For larger teams with advanced needs

$60
one-time paymentplus local taxes
Contact sales

Billed yearly ($720/year)


  • Unlimited team members
  • Unlimited storage
  • Advanced analytics
  • 24/7 priority support
  • Custom integrations
  • SSO authentication
  • Dedicated account manager

Discounts

sections/pricing/discounts.tsx

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

$149
$75
one-time paymentplus local taxes
50% off with code BLACKFRIDAY
Get all-access

Lifetime access. Free updates. No recurring fees.


  • $1000 templates
  • $1000 blocks and sections
  • $1000 illustrations
  • $1000 custom animations

Pro Team

For teams and agencies working on cool products together

$749
$499
one-time paymentplus local taxes
50% off with code BLACKFRIDAY
Get all-access for your team

Lifetime access. Free updates. No recurring fees.


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

Discounts Banner

sections/pricing/discounts-banner.tsx

Build your dream landing page, today.

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


Black Friday Sale

Get Launch UI Pro for 50% off

01
Days
:
12
Hours
:
15
Minutes
:
48
Seconds

Limited time offer. Valid until December 1st, 2025.


Pro

For early-stage founders, solopreneurs and indie devs

$149
$75
one-time paymentplus local taxes
50% off with code BLACKFRIDAY
Get all-access

Lifetime access. Free updates. No recurring fees.


  • $1000 templates
  • $1000 blocks and sections
  • $1000 illustrations
  • $1000 custom animations

Pro Team

For teams and agencies working on cool products together

$749
$374
one-time paymentplus local taxes
50% off with code BLACKFRIDAY
Get all-access for your team

Lifetime access. Free updates. No recurring fees.


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

Sale Banner

sections/pricing/sale-banner.tsx


Black Friday Sale

Get Launch UI Pro for 50% off

01
Days
:
12
Hours
:
15
Minutes
:
48
Seconds

Limited time offer. Valid until December 1st, 2025.

Footer

4 variants

Tabs

3 variants

Left

sections/tabs/left.tsx

Make the right impression

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

Top

sections/tabs/top.tsx

Make the right impression

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

Bottom

sections/tabs/bottom.tsx

Make the right impression

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

Gallery

3 variants

Launch UI Pro Component Directory