Hero Sections
9 battle-tested hero layouts — dark, light, split, cinematic, editorial, neon, pastel. Every one is live. Click Copy HTML to grab the code.
Use the filter chips to show All, Dark, Light, Split, Centered, or Animated heroes. Each card has a Copy HTML button for the full Tailwind markup.
Now in Public Beta
Build faster
ship smarter
The UI component library that gets out of your way. Copy, paste, ship — no installs, no drama.
200+
Components
15K
Developers
100%
Free
Introducing v2.0
Design that speaks for itself.
Refined components, built with precision. Every pixel intentional, every interaction considered.
02
Performance
Optimised for speed and production-grade output.
✦ ISSUE 2025✦ COMPONENTS✦ OPEN SOURCE✦ TAILWIND CSS✦ FREE FOREVER
Volume 01 / 2025
NO
INSTALLS.
JUST CODE.
Copy the component. Paste it. Customize. That's the whole workflow. No npm. No config files. No boilerplate.
01
200+Components ready
15Theme presets
∞Combinations
The future of UI is here
Create without limits
The component library that adapts to you. Start building in seconds — no setup required.
No credit card. No install. Works everywhere.
Cinematic Theme
Where great
stories begin.
A component library crafted for teams who care deeply about every detail — from the first pixel to the last interaction.
Scroll to explore
UI
01/09Hero Sections
BeautifulComponentsfor everyone.
Copy-paste components built with Tailwind CSS. Open source, always free.
View source
$ outletui init
Code greener.
Ship faster.
A component toolkit built for developers who think in systems. Open source. Zero vendor lock-in.
✨Trusted by 15,000+ teams
Your ideas deserve
better UI.
Beautiful, warm, and accessible components that make your product feel human.
Built for scale
The toolkit your team actually ships with.
Components that work together. Designed for real products, not demos.
✓
Zero install, works instantly✓
Tailwind CSS — fully customizable✓
200+ components & growing✓
Dark, light & custom themesPerformance98/100
AccessibilityAA+
Bundle size0 KB
1. Electric Dark (SaaS)
HTML
<!-- Grid + glow + badge + stats -->
<section class="relative min-h-screen flex flex-col items-center justify-center text-center px-6 bg-[#080810] overflow-hidden">
<div class="absolute inset-0 pointer-events-none"
style="background-image:linear-gradient(rgba(255,255,255,.025)1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025)1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black,transparent)">
</div>
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] pointer-events-none"
style="background:radial-gradient(ellipse,rgba(232,255,71,.1),transparent 70%)"></div>
<div class="relative flex items-center gap-2 bg-yellow-400/[0.08] border border-yellow-400/20 rounded-full px-4 py-1.5 text-xs text-yellow-400 mb-7">
<span class="w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse"></span>
Now in Public Beta
</div>
<h1 class="relative font-black text-white leading-none tracking-tight mb-5" style="font-size:clamp(44px,8vw,80px);letter-spacing:-0.03em">
Build faster<br>ship <span class="text-yellow-400">smarter</span>
</h1>
<p class="relative text-white/45 text-lg max-w-md leading-relaxed mb-9">The UI component library that gets out of your way.</p>
<div class="relative flex gap-3">
<button class="bg-yellow-400 text-black font-bold text-sm px-7 py-3.5 rounded-lg">Get Started →</button>
<button class="bg-white/[0.06] text-white font-semibold text-sm px-7 py-3.5 rounded-lg border border-white/10">View Demo</button>
</div>
<div class="relative flex gap-10 mt-14">
<div class="text-center"><div class="font-black text-white text-2xl">200+</div><div class="text-[11px] text-white/35 uppercase">Components</div></div>
<div class="text-center"><div class="font-black text-white text-2xl">15K</div><div class="text-[11px] text-white/35 uppercase">Developers</div></div>
<div class="text-center"><div class="font-black text-white text-2xl">100%</div><div class="text-[11px] text-white/35 uppercase">Free</div></div>
</div>
</section>4. Gradient Mesh + Email CTA
HTML
<!-- Mesh background + gradient headline + email input -->
<section class="relative min-h-screen flex flex-col items-center justify-center text-center px-6 bg-[#06060f] overflow-hidden">
<div class="absolute inset-0 pointer-events-none" style="background:
radial-gradient(ellipse 60% 50% at 20% 20%,rgba(71,255,178,.12),transparent 60%),
radial-gradient(ellipse 50% 40% at 80% 80%,rgba(255,107,71,.1),transparent 60%),
radial-gradient(ellipse 40% 60% at 60% 10%,rgba(232,255,71,.08),transparent 60%)">
</div>
<h1 class="relative font-black text-white leading-none" style="font-size:clamp(40px,7vw,88px);letter-spacing:-0.03em">
Create without
<span style="background:linear-gradient(135deg,#e8ff47,#47ffb2,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">limits</span>
</h1>
<div class="relative flex w-full max-w-md bg-white/[0.05] border border-white/10 rounded-xl overflow-hidden mt-5">
<input type="email" placeholder="Enter your email..." class="flex-1 bg-transparent border-none outline-none px-5 py-3.5 text-sm text-white placeholder:text-white/25">
<button class="bg-yellow-400 text-black font-bold text-sm px-6 py-3.5 whitespace-nowrap">Start free →</button>
</div>
</section>9. Feature List + Dashboard
HTML
<!-- Two-column: features + metric cards -->
<section class="bg-[#0c0c14] min-h-screen grid grid-cols-2 items-center">
<div class="px-16 py-20">
<div class="flex items-center gap-2 mb-5">
<div class="w-1.5 h-1.5 rounded-full bg-yellow-400"></div>
<span class="text-xs font-bold tracking-widest uppercase text-yellow-400">Built for scale</span>
</div>
<h1 class="font-black text-white leading-tight mb-5" style="font-size:clamp(32px,4vw,52px);letter-spacing:-0.025em">
The toolkit your team actually ships with.
</h1>
<div class="flex flex-col gap-3 mb-9">
<div class="flex items-center gap-2.5 text-sm text-white/60">
<div class="w-4.5 h-4.5 rounded-md bg-yellow-400/10 border border-yellow-400/20 flex items-center justify-center text-[10px] text-yellow-400">✓</div>
Zero install, works instantly
</div>
<!-- ... more features ... -->
</div>
<button class="bg-yellow-400 text-black font-bold text-sm px-6 py-3 rounded-lg">Get started →</button>
</div>
<div class="flex flex-col gap-3 px-10 py-20">
<div class="bg-[#141420] border border-white/[0.07] rounded-xl p-4">
<div class="flex items-center gap-2.5 mb-3">
<div class="w-8 h-8 rounded-lg bg-yellow-400/10 flex items-center justify-center text-sm">⚡</div>
<span class="font-bold text-white text-sm">Performance</span>
<span class="text-xs text-white/35 ml-auto">98/100</span>
</div>
<div class="h-1 bg-white/[0.06] rounded-full overflow-hidden">
<div class="h-full w-[98%] bg-yellow-400 rounded-full"></div>
</div>
</div>
<!-- ... more metric cards ... -->
</div>
</section>All Hero Variants
| # | Name | Theme | Best For | Tags |
|---|---|---|---|---|
| 1 | Electric Dark | Dark | SaaS, Product | Grid BG, Stats |
| 2 | Split Layout | Light | Agency, Editorial | Text + Visual, Serif |
| 3 | Brutalist Magazine | Light | Editorial, Art | Strip, Bold |
| 4 | Gradient Mesh + CTA | Dark | SaaS, Startup | Email input, Mesh BG |
| 5 | Cinematic Full-bleed | Dark | Film, Media | Bottom-anchored |
| 6 | Typographic Spotlight | Light | Portfolio, Minimal | Outline text |
| 7 | Neon Terminal | Dark | Dev tools, API | Glow, Terminal |
| 8 | Warm Pastel Startup | Light | Startup, SaaS | Blob BG, Social proof |
| 9 | Feature List + Dashboard | Dark | SaaS, Dashboard | Two-column, Metrics |