Revolutionize Your Business with Relax UI
Landing page components built with React, Shadcn/ui, and Tailwind that will make your website feel premium.
Trusted by 18,000+ creators
Built with industry-standard tools and best practices
Everything you need. Nothing you don't.
Accessibility first
Responsive design
Light and dark mode
Easy to customize
Top-level performance
Production ready
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.
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, Relax Theme is built to be perfectly optimized for search engines.
The code is yours
With Relax Theme, 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
Make the right impression
Relax Theme makes it easy to build an unforgettable website that resonates with professional design-centric audiences.
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
Lifetime access. Free updates. No recurring fees.
- 67 landing page sections
- 127 components
- 16 illustrations
- 15 custom animations
Pro Team
For teams and agencies working on cool products together
Lifetime access. Free updates. No recurring fees.
- All the templates, components and sections available for your entire team
All the components you need
Relax Theme provides a comprehensive set of components that includes everything you might need to build an effective, modern landing page.
Hero sections
Start with the right impression
These shadcn hero sections are designed to make a strong first impression. They are optimized for maximum performance and deliver smooth animations and responsive interactions without compromising on functionality or design.
Bento grids
Showcase your features
These shadcn bento grids are designed to showcase your features in a way that is both functional and visually appealing. They are optimized for maximum performance and deliver smooth animations and responsive interactions without compromising on functionality or design.
Navbars
Guide your users like a pro
These shadcn navbars are designed to help you stay organized. They are optimized for maximum performance and deliver smooth animations and responsive interactions without compromising on functionality or design.
Testimonials
Prove your success
These shadcn testimonials, quotes, and reviews are designed to showcase your success. They are optimized for maximum performance and deliver smooth animations and responsive interactions without compromising on functionality or design.
Illustrations
Showcase your product
These shadcn mockup, illustration, and background components are designed to showcase your product. They are optimized for maximum performance and deliver smooth animations and responsive interactions without compromising on functionality or design.
Loved by designers and developers across the planet
Here's what people are saying about Relax Theme
Fabrizio Fernandez
@fab3304
@relaxui Playing around with @relaxui suddenly made me feeling inspired to launch that side project.
Darius Flynn
@flynnn
@relaxui Exploring @relaxui's sleek UI. It's like a dark mode enthusiast's playground. Simply incredible stuff.
Luna Martinez
@lunacode
@relaxui @relaxui is a game-changer for rapid prototyping. The components are so well thought out.
Fabrizio Fernandez
@fab3304
@relaxui Playing around with @relaxui suddenly made me feeling inspired to launch that side project.
Darius Flynn
@flynnn
@relaxui Exploring @relaxui's sleek UI. It's like a dark mode enthusiast's playground. Simply incredible stuff.
Luna Martinez
@lunacode
@relaxui @relaxui is a game-changer for rapid prototyping. The components are so well thought out.
Fabrizio Fernandez
@fab3304
@relaxui Playing around with @relaxui suddenly made me feeling inspired to launch that side project.
Darius Flynn
@flynnn
@relaxui Exploring @relaxui's sleek UI. It's like a dark mode enthusiast's playground. Simply incredible stuff.
Luna Martinez
@lunacode
@relaxui @relaxui is a game-changer for rapid prototyping. The components are so well thought out.
Fabrizio Fernandez
@fab3304
@relaxui Playing around with @relaxui suddenly made me feeling inspired to launch that side project.
Darius Flynn
@flynnn
@relaxui Exploring @relaxui's sleek UI. It's like a dark mode enthusiast's playground. Simply incredible stuff.
Luna Martinez
@lunacode
@relaxui @relaxui is a game-changer for rapid prototyping. The components are so well thought out.
Olivia Blackwood
@olivia1992
@relaxui @relaxui is not messing around with its component library game.
Esme Rothschild
@EmeRothArt
@relaxui @relaxui is slick. That globe graphic though. Making me feel like I'm building websites for a sci-fi movie.
Kai Nakamura
@KaiNakWaves
@relaxui Just made my first website with @relaxui. Its flexibility is speaking my language. No drama, just seamless integration.
Olivia Blackwood
@olivia1992
@relaxui @relaxui is not messing around with its component library game.
Esme Rothschild
@EmeRothArt
@relaxui @relaxui is slick. That globe graphic though. Making me feel like I'm building websites for a sci-fi movie.
Kai Nakamura
@KaiNakWaves
@relaxui Just made my first website with @relaxui. Its flexibility is speaking my language. No drama, just seamless integration.
Olivia Blackwood
@olivia1992
@relaxui @relaxui is not messing around with its component library game.
Esme Rothschild
@EmeRothArt
@relaxui @relaxui is slick. That globe graphic though. Making me feel like I'm building websites for a sci-fi movie.
Kai Nakamura
@KaiNakWaves
@relaxui Just made my first website with @relaxui. Its flexibility is speaking my language. No drama, just seamless integration.
Olivia Blackwood
@olivia1992
@relaxui @relaxui is not messing around with its component library game.
Esme Rothschild
@EmeRothArt
@relaxui @relaxui is slick. That globe graphic though. Making me feel like I'm building websites for a sci-fi movie.
Kai Nakamura
@KaiNakWaves
@relaxui Just made my first website with @relaxui. Its flexibility is speaking my language. No drama, just seamless integration.
“I love that I don't need to think about the design because Relax Theme perfectly solves it for me. If you value flexibility over written-in-stone components, I can highly recommend it.”
“What stands out about Relax Theme is its flexibility. We've built everything from dashboards to marketing sites using these components, and they adapt beautifully to every context.”
“As a designer who codes, I appreciate how Relax Theme strikes the perfect balance between aesthetics and functionality. The components are a joy to customize and extend.”