Theme Lab
Build and export shadcn/ui themes visually in OKLCH.
Tagline
Ship shadcn themes in minutes
The fastest way to build shadcn themes
OKLCH theme control without hex guesswork
Stop hand-editing shadcn theme tokens
The fastest way to generate a shadcn/ui theme from a brand color.
The page explicitly promises speed, and the workflow is narrowly optimized around shadcn/ui rather than being a generic theme editor.
The OKLCH theme builder for teams that are tired of guessing with hex codes.
OKLCH-native color control is the clearest technical differentiator shown, and the copy directly contrasts it with old-school manual color tweaking.
An alternative to hand-editing CSS variables, Tailwind config, and theme tokens.
The export options make this a practical replacement for the tedious setup work developers usually do inside index.css and config files.
Primary user
Frontend developer using shadcn/ui who needs to create a branded theme fast
ICP #1
Solo frontend developer at a seed-stage SaaS company using shadcn/ui
Pain
They need a polished branded UI quickly, but hand-tuning CSS variables, hex values, and dark mode shades is slow and error-prone.
Why this solves
Theme Lab gives them a visual OKLCH workflow plus instant export, so they can move from brand color to production-ready theme without hand-editing theme tokens.
ICP #2
Product designer embedded in a small startup shipping a shadcn/ui app
Pain
They can define the look and feel, but translating design intent into implementation usually turns into back-and-forth with engineering.
Why this solves
The live preview and slider-based controls let them iterate on tint, radius, and fonts in a way that maps directly to shadcn/ui output the developer can paste in immediately.
ICP #3
Agency founder or staff engineer building client dashboards on shadcn/ui
Pain
Every client wants a custom theme, and repeating theme setup across projects eats time with little differentiation.
Why this solves
Theme Lab standardizes the theme creation process with presets and exportable configs, so they can spin up branded variants faster and deliver cleaner handoffs.
Strengths
- +The value prop is immediately understandable: pick a color, tweak sliders, export CSS.
- +The page is tightly scoped to shadcn/ui, which makes the use case feel practical instead of abstract.
- +The feature list is concrete and credible, especially the live preview and one-click export.
Weaknesses
- −It is too generic about who it is for; "designers and developers" is broad and weak.
- −It does not show the actual builder UI on the landing page, so the product feels less tangible than it should.
- −It barely explains why OKLCH matters beyond a single line, so the technical differentiator is underutilized.
- −There is no proof of output quality: no before/after examples, theme gallery, or real shadcn screenshots.
- −The page lacks urgency or a strong use-case hook beyond general theme creation.
Fix these
- Add a hero screenshot or interactive embedded preview of the builder so visitors see the workflow instantly.
- Show before/after theme examples for light and dark modes using real shadcn/ui components.
- Rewrite messaging around a sharper persona, such as "for founders and frontend devs shipping shadcn apps."
- Explain OKLCH in one sentence with a concrete benefit, like more predictable lightness across hues and better dark mode scaling.
- Add a few named theme presets or branded examples to make the output feel more production-ready and less toy-like.
Drop-in replacement copy
Headline
Design shadcn themes in minutes
Pick a brand color in OKLCH, preview real UI, and export clean theme code.
Start from a brand color, not a blank file
Choose one color and let the theme take shape visually. You’ll get a much faster path from brand direction to something usable in a real shadcn/ui app.
See the theme on real components
Preview cards, buttons, charts, alerts, and forms as you tweak the theme. That means fewer surprises after export and fewer rounds of guess-and-refresh.
Export code your team can paste immediately
When the theme looks right, export to index.css, Tailwind config, or JSON. No rework, no screenshot-to-code conversion, no manual token hunting.
Use OKLCH instead of guessing with hex
OKLCH makes lightness and color shifts more predictable, especially across light and dark themes. That gives you a cleaner workflow and better-looking output.
FAQ
Who is Theme Lab for?
Frontend developers, solo founders, product designers, and agencies building on shadcn/ui. If you need a branded theme fast, it fits.
Why use OKLCH instead of hex?
OKLCH makes color relationships and lightness more predictable, which helps when you’re building themes that need to work in both light and dark mode.
What can I export?
You can export ready-to-paste index.css, Tailwind config, or JSON. The goal is to get from visual tuning to production code without extra translation.
Does it work for dark mode?
Yes. Theme Lab includes light and dark presets, and the preview lets you see how the theme behaves across both while you edit.
Do I still need to edit code?
Usually only for final integration into your app. Theme Lab handles the theme generation and export so you’re not hand-tuning variables from scratch.
I built Theme Lab for the annoying part of shadcn/ui: theme setup. Pick a brand color in OKLCH, tweak tint/radius/fonts, preview real components, then export ready-to-paste CSS or Tailwind config. Build themes in minutes, not evenings.
Theme Lab turns a brand color into a working shadcn/ui theme. No hex juggling. No CSS variable archaeology. Adjust tint, radius, and fonts visually, preview cards/buttons/forms, then export to index.css or JSON.
Every new shadcn app meant the same boring loop: brand color -> CSS variables -> dark mode tweaks -> broken previews -> more tweaking. So I built Theme Lab. Now I can get a usable theme from a starting color in minutes.
Hex codes are fine until you need a theme that actually feels consistent. Theme Lab uses OKLCH so lightness behaves more predictably across hues. That means less guessing, better dark mode scaling, and fewer theme edits that feel random.
If you're building on shadcn/ui, you know the pain: small brand change → tweak tokens → refresh → fix dark mode → repeat Theme Lab gives you a visual workflow and exports the code when it looks right.
Hex values are not a design system. They make theme work slow, inconsistent, and hard to hand off. Theme Lab lets you shape a shadcn theme visually in OKLCH, then export clean output your team can actually use.
Pick one brand color. Slide tint. Adjust radius. Change fonts. See buttons, cards, alerts, charts, and forms update live. When it feels right, export index.css, Tailwind config, or JSON for your shadcn app.
Most theme tools stop at the pretty preview. Theme Lab doesn't. You can actually export the theme you designed into shadcn-ready files, so the thing you tuned visually is the thing you ship.
The best feedback so far is simple: 'I stopped guessing.' That was the goal. For founders, frontend devs, and agencies shipping on shadcn/ui, Theme Lab cuts theme setup from a tedious task into a fast workflow.
Theme Lab isn't for people collecting design tools. It's for people who need a branded shadcn theme today, with output they can paste into a Next.js app and move on. Less fiddling. More shipping.
Angle: for founders and frontend devs shipping shadcn apps
I kept seeing the same problem in shadcn/ui projects: Everyone wants a branded UI fast. But theme setup turns into manual CSS variable edits, hex-code guessing, and dark-mode tweaks that eat a day. So I built Theme Lab. It’s a visual theme builder for shadcn/ui that starts with a brand color in OKLCH, lets you adjust tint, radius, and fonts, and previews the result across real components before you export. The point is simple: - less time hand-tuning tokens - fewer broken theme iterations - faster handoff from design intent to production code I built it for solo founders, frontend devs, and small teams shipping Next.js apps who don’t want to spend evenings fixing theme variables. If you’re building on shadcn/ui, I’d love feedback on the workflow and the export format.
Angle: why OKLCH matters for theme work
Most theme tools still make you think in hex. That works until you need a system that feels balanced across light mode, dark mode, and multiple brand colors. Theme Lab uses OKLCH because lightness is more predictable. That means you can move from a brand color to a usable theme without the usual trial-and-error loop. What that looks like in practice: - choose a base color - adjust tint and radius with sliders - preview cards, buttons, alerts, charts, and forms - export shadcn-ready code when it looks right I’ve found this is especially useful for founders and agency teams who need to ship multiple branded dashboards without rebuilding the same theme logic every time. If you’ve ever felt like theme setup was weirdly expensive for such a small part of the product, that’s exactly the problem I wanted to remove.
Angle: for designers collaborating with developers
Designers usually know what they want. Developers usually know what can be shipped. The frustrating part is translating between the two when theme work lives in CSS variables, config files, and code comments. Theme Lab is my attempt to make that handoff less painful for shadcn/ui teams. A designer can shape the feel of the system with tint, radius, and font controls. A developer can then export the result as index.css, Tailwind config, or JSON and paste it directly into the app. The live preview matters here more than I expected. When you can see the same theme across buttons, cards, forms, and alerts immediately, decisions get faster and the back-and-forth gets shorter. I’m especially interested in whether this feels useful for small teams working on SaaS products where the UI needs to look custom, but the team doesn’t have time for a full design-system project.
No visuals for this kit yet.
Tagline
Visual shadcn themes in OKLCH
Description
Build a branded shadcn/ui theme from one color, tweak tint/radius/fonts visually, preview real components, and export ready-to-paste CSS, Tailwind config, or JSON.
Maker's first comment
I built Theme Lab because I was tired of the same theme setup loop every time I started a shadcn/ui project: pick a brand color, edit CSS variables, refresh, guess at dark mode, repeat. It’s one of those tasks that looks small on paper but quietly burns hours. I wanted a workflow that felt closer to design and less like debugging color math. OKLCH turned out to be the right base because it makes lightness behave more predictably across hues, which matters a lot when you’re trying to build something that works in both light and dark mode. Theme Lab is my attempt to make that whole process fast: pick a color, shape it with sliders, preview real UI components, then export the result into code you can paste into a shadcn app. I’m shipping this because I think a lot of founders, frontend devs, and agency teams are still wasting time on theme fiddling that should not be manual anymore. I’d love feedback on two things: whether the builder feels obvious on first use, and whether the export formats cover the way you actually work.
Pinned maker comment
Would love feedback on the first-time experience and whether the export formats feel production-ready for real shadcn projects.
Meta
Shadcn theme setup is wasting hours
Targeting frontend devs and solo founders building SaaS apps on Next.js + shadcn/ui. Hypothesis: if theme creation starts visually in OKLCH and exports clean code, people will finish branding faster than by hand-editing CSS variables. Pick a brand color, tweak sliders, export the theme.
Google Search
shadcn theme builder
For developers searching for a faster way to create a branded shadcn/ui theme. This tests whether intent-driven search converts better than generic design-tool traffic. Visual OKLCH controls, live preview, and one-click export to index.css, Tailwind config, or JSON.
Reddit Promoted
Still hand-editing shadcn colors?
Targeting r/SideProject and r/indiehackers readers who ship Next.js apps and keep redoing theme tokens. Hypothesis: a tool built specifically for shadcn/ui will resonate more than a generic palette app. Theme Lab lets you build a theme visually in OKLCH and export the code.
Subreddits
r/SideProject
Show the problem/solution loop: brand color to shadcn theme in minutes, with a short GIF or screenshot of the builder and export output.
Rules: No pure promo posts; share process, screenshots, and what you learned. Engage in comments first and keep the post useful.
r/indiehackers
Write about building a tool for the boring part of shipping SaaS UIs: turning a brand color into a usable theme.
Rules: Focus on the maker story and lessons. Avoid link-dropping as the main point; provide context and ask for feedback.
r/microsaas
Target solo founders who need a polished dashboard fast and do not have time for a design system project.
Rules: Share how it helps small SaaS teams specifically. Keep the post practical and be ready to answer technical questions.
r/EntrepreneurRideAlong
Post the build story and show how Theme Lab reduces one annoying bottleneck for founders shipping on shadcn/ui.
Rules: Community prefers journey and transparency. Don’t lead with sales language; lead with the problem you were solving.
r/webdev
Demo the OKLCH workflow and export formats for frontend developers who work in Next.js and Tailwind.
Rules: This sub is sensitive to self-promo. Frame it as a dev tool with implementation details, not a marketing post.
Communities
Post the build story, then follow up with specific lessons from theme tooling, color workflows, and what converts curious builders into signups.
Share it as a useful tool in the relevant help or showcase channel, and ask for feedback on the export output instead of pushing for installs.
Participate in theme and UI discussion channels, answer questions, and only mention Theme Lab when someone asks about branding or theming.
Cold outreach template
Hey {firstName} - saw you’re shipping on shadcn/ui and thought of you. Theme Lab helps turn a brand color into a ready-to-paste theme in OKLCH, so you can skip the CSS variable grind. If {context} is something you’re dealing with, I’d love to send you a quick demo.
Product Hunt timing
Launch on Tuesday at 8:00 AM Pacific Time. That gives you strong overlap with West Coast makers starting their day, East Coast users already online, and a full weekday for comments, iteration, and social sharing.
Indie Hackers post ideas
- 01I built a shadcn/ui theme builder because I was tired of hand-editing CSS variables
- 02Why I chose OKLCH for a theme tool instead of hex colors
- 03What I learned shipping a visual theme exporter for Next.js apps
Competitor alternatives
Current tone of voice
Clean, developer-friendly, and slightly hypey in a startup-minimalist way; for example, "Design a shadcn theme in seconds, not hours."
Your kit is ready. Sign up free to unlock, takes 10 seconds.
7 more X posts · 2 LinkedIn · Product Hunt copy · ad hooks · 100-user playbook · landing critique