Show HN: Shadcn/UI theme editor – Design and share Shadcn themes

136•miketromba•3mo ago

Hey, I built https://ShadcnThemer.com - a web app for creating and sharing themes for shadcn/ui, made with my some of my favorites, Next.js 15, Tailwind CSS 4, Drizzle ORM, and Supabase.

The goal was to make it easy to visually design shadcn color themes, preview them live across various example UIs, and export them straight into your projects (as CSS or via the shadcn CLI registry command).

I had a bit of experience going into this because I built the Theme Studio for VS Code in the past, but it was fun using a modern stack and leveraging Cursor to help me along the way this time.

GitHub: https://github.com/miketromba/shadcn-themer

Comments

imcritic•3mo ago

What is shadcn?

QuantumNomad_•3mo ago

A set of components to build web UIs out of

https://ui.shadcn.com/

icemelt8•3mo ago

default UI of the internet

deaux•3mo ago

I'm being very pedantic here in true HN fashion, but at most it's the default UI of VC-funded B2B SaaS startups. 95% of the internet-using world never comes across shadcn UIs.

ivape•3mo ago

It’s also looks like some shit you can make in a weekend. There must have been a boot camp behind pushing it.

icemelt8•3mo ago

not at all, Shadcn has been a game changer for all young, bootstrapped and individual developers. Who now have a professional looking UI available for free and easy to use.

There are echo chambers and availability biases, it takes a bigger person to know that they live in one.

ramon156•3mo ago

A customizable component library built on radix.

Not sure why this upsets people, is it because it's popular and therefore bad?

rafram•3mo ago

The Bootstrap of the 2020s. Just the default components people copy-paste into Tailwind-based SaaS apps.

stravant•3mo ago

The key piece of the stack it gives you is sensible cross-platform component behaviors to put your styling / branding on to of.

slig•3mo ago

Thanks for sharing! What's the difference between your app and tweakcn?

edit: would also love to be able to open preview on new tabs with middle-click.

miketromba•3mo ago

Tweakcn is a great tool too. Main difference is I'm hoping ShadcnThemer will be more of a community-driven hub for sharing, starring, and forking themes - similar to how color palette websites have 1000's of user-made palettes. (I took this approach when building the Theme Studio for VS Code and it worked really well, 1000's of themes were designed and shared.)

Tweakcn also charges $ users to be able to share and save themes which I think is silly for a tool like this, should be 100% free and open source.

I also prefer the simple UX of ShadcnThemer better but I'm biased of course.

lyu07282•3mo ago

Link: https://tweakcn.com/editor/theme

programmarchy•3mo ago

I spent some time attempting to "derive" a theme given a primary and secondary color, but realized my color theory wasn't strong enough to build something reliable (I tried with both hsl and oklch). Curious if that's really possible.

QuantumNomad_•3mo ago

The infinite scroll makes it difficult to reach the links in the footer, at least on mobile.

Footer links:

GitHub repo https://github.com/miketromba/shadcn-themer

Three other links also in the footer but they only bring me to login screen:

Contact https://shadcnthemer.com/contact

lardissone•3mo ago

I still can't believe this is still an issue. When lazy-loading/infinite-scroll appeared main problem was that your footer shouldn't contain any actionable information. And people still makes fall into the same issue years after.

triyambakam•3mo ago

Really I don't see how you can have a footer at all on a page with infinite scroll

jzig•3mo ago

The only changes I see are colors but what if I want eg a different border radius on buttons or margin on labels or specific fonts on elements etc? I don’t find changing only the colors of components particularly valuable but would like to see more variance in the actual shapes and looks of things.

miketromba•3mo ago

Global border radius is editable, that setting is at the bottom of the sidebar. The challenge with global shadcn theming is that you're limited to adjusting the css variables they provide. I believe there is a global spacing variable, but it is not so specific that you can target e.g. just label spacing. That would be something you could modify directly within your shadcn input components via adjusting the tailwind class(es).

meindnoch•3mo ago

>Sign in or create an account with your email

Into the trash it goes.

slig•3mo ago

That's unfair. You can browse, preview and get the CSS variables without signing up.

LoganDark•3mo ago

Email magic links are dumb. On top of that, forms that don't let you specify whether to login or to create an account are extra dumb. With magic links, one can't log in with just their password manager, and with a stupid combo form, anyone who mis-types or mis-remembers their email address just accidentally created a new account (or a new link that creates an account).

devilsdata•3mo ago

Email magic links are inconvenient for the user, but they're not dumb. They're a pretty good option for a small project by a developer doesn't want to implement a whole auth flow, or pay for an OAuth provider.

It's a tradeoff. If you roll your own password flow, you need to add MFA to be secure. The complexity of what you need to build and maintain goes up.

A simple magic link flow for an app like this, where you are really only likely to log into it once per project you start.

Personally though, I also use a password manager. And I am annoyed enough by email magic links, that any of my personal projects will at least have a passkey implementation.

So I agree they're annoying. But they're definitely not "dumb". They're a tradeoff. This developer has chosen his own time over user convenience; which is a common tradeoff for small developers.

LoganDark•3mo ago

The problem with magic links is that the secret is sent with each login attempt. It's just like SMS verification codes - an attacker that controls the email address, or the phone number, can log right in. In this case, probably without even resetting a password. Plus, with no way to verify the account owner other than the email address, if the email address is lost or changed, the account's as good as gone.

Also yes they're super annoying for the user too. It's inconvenient and less secure.

Passkeys are awesome, yeah.

bobbiechen•3mo ago

As opposed to username/password, where... An attacker that controls the email address can log right in.

Unless you mean to say I should set up 2FA for my CSS theme variable helper website?

Passkeys and OAuth/social login are great, but everyone has an email. And I don't think any mainstream site supports only passkey as an auth method (and no other way).

tonyhart7•3mo ago

"Passkeys and OAuth/social login are great, but everyone has an email"

big tech is only allowing Social login from another big tech anyway, they use whitelist and banning everyone that dont use that because they cant guarantee untrusted "third party"

LoganDark•3mo ago

"Everyone has an email" is like "everyone has a phone number": wrong and bad. At least email addresses aren't difficult to get...

devilsdata•3mo ago

We are on the same page about magic links. Email is also not a super-reliable medium of communication. Email can arrive straight into the junk mail, late, or even never. I think magic links should be strongly discouraged for serious projects, businesses, and government. Passwords and application-based MFA (not SMS or Email MFA) or webauthn/passkeys are much better.

This whole discussion started when @meindnoch wrote ">Sign in or create an account with your email. Into the trash it goes.".

I think magic links are acceptable for a small solo developer project. Expecting a solo developer so shoulder the burden of rolling their own auth, paying for an auth service, or self-hosting an containerised auth-service and wiring their application to it is a bit much for a tiny project like this.

Anything more than a small solo project should graduate to a better solution- I hope we can all agree with that.

tonyhart7•3mo ago

"Email magic links are dumb."

True, every login must be standardized around social auth and oauth2

miketromba•3mo ago

I get this. Just shipped the ability to create and edit themes locally, no auth required. The local theme gets persisted to localstorage and you can optionally save/share it later. It also works seamlessly with the fork / import features, so those can be used without auth as well.

calmworm•3mo ago

WebAuthn has been a great alternative in my limited experience. Email for backup.

lavela•3mo ago

I tried to open different themes in tabs for comparison, but I would have to first open each one and then manually copy the URL into a new tab because you implemented your links as <button> (which prevents both middle-click and 'open in new tab' context menu option to work).

tacker2000•3mo ago

Yup, this is the incompetence that we see all over the place since these new frameworks have come and front end devs have no idea what HTML actually is or how it works.

Buttons are for submitting forms and nothing else.

In HTML a link is created using an <a> element.

React has a <Link> element for this purpose, it will be rendered as <a>.

Please OP, at least try to learn a little bit about the underlying technologies.

robertoandred•3mo ago

It has nothing to do with "new frameworks". ASP devs have been making buttons into links for decades.

Also, React does not have a Link element. Please at least try to learn a little bit about the underlying technologies.

h33t-l4x0r•3mo ago

The router does. We all know what they meant.

miketromba•3mo ago

Just shipped a fix, middle-click should work now. Thanks for the feedback

sreekanth850•3mo ago

Not related to this directly, but shadcn drawer is built on the top of vaul which is unmintained, so who ever use this in production, keep this in your mind.

rochak•3mo ago

Gotta love the JS ecosystem where devs move faster than users.

tonyhart7•3mo ago

and people complain about "why LLM produce outdated code" lol

this is why ecosystem that stable like Go is better for vibe coding

h33t-l4x0r•3mo ago

How are you vibe coding web dashboards in Go?

tonyhart7•3mo ago

its called htmx

h33t-l4x0r•3mo ago

Can you share a link to one? I don't think I've ever seen this.

Show HN: Look Ma, No Linux: Shell, App Installer, Vi, Cc on ESP32-S3 / BreezyBox

Show HN: I spent 4 years building a UI design tool with only the features I use

Show HN: If you lose your memory, how to regain access to your computer?

Show HN: ARM64 Android Dev Kit

Show HN: R3forth, a ColorForth-inspired language with a tiny VM

Show HN: Smooth CLI – Token-efficient browser for AI agents

Show HN: Slack CLI for Agents

Show HN: Fitspire – a simple 5-minute workout app for busy people (iOS)

Show HN: Gigacode – Use OpenCode's UI with Claude Code/Codex/Amp

Show HN: Artifact Keeper – Open-Source Artifactory/Nexus Alternative in Rust

Show HN: I built a RAG engine to search Singaporean laws

Show HN: Horizons – OSS agent execution engine

Show HN: Daily-updated database of malicious browser extensions

Show HN: FastLog: 1.4 GB/s text file analyzer with AVX2 SIMD

Show HN: Falcon's Eye (isometric NetHack) running in the browser via WebAssembly

Show HN: BioTradingArena – Benchmark for LLMs to predict biotech stock movements

Show HN: I built a directory of $1M+ in free credits for startups

Show HN: Micropolis/SimCity Clone in Emacs Lisp

Show HN: A Kubernetes Operator to Validate Jupyter Notebooks in MLOps

Show HN: A password system with no database, no sync, and nothing to breach

Show HN: Local task classifier and dispatcher on RTX 3080

Show HN: 33rpm – A vinyl screensaver for macOS that syncs to your music

Show HN: GitClaw – An AI assistant that runs in GitHub Actions

Show HN: Chiptune Tracker

Show HN: Craftplan – I built my wife a production management tool for her bakery

Show HN: An open-source system to fight wildfires with explosive-dispersed gel

Show HN: Agentism – Agentic Religion for Clawbots

Show HN: Disavow Generator – Open-source tool to defend against negative SEO

Show HN: Total Recall – write-gated memory for Claude Code

Show HN: BPU – Reliable ESP32 Serial Streaming with Cobs and CRC

Show HN: Look Ma, No Linux: Shell, App Installer, Vi, Cc on ESP32-S3 / BreezyBox

Show HN: I spent 4 years building a UI design tool with only the features I use

Show HN: If you lose your memory, how to regain access to your computer?

Show HN: ARM64 Android Dev Kit

Show HN: R3forth, a ColorForth-inspired language with a tiny VM

Show HN: Smooth CLI – Token-efficient browser for AI agents

Show HN: Slack CLI for Agents

Show HN: Fitspire – a simple 5-minute workout app for busy people (iOS)

Show HN: Gigacode – Use OpenCode's UI with Claude Code/Codex/Amp

Show HN: Artifact Keeper – Open-Source Artifactory/Nexus Alternative in Rust

Show HN: I built a RAG engine to search Singaporean laws

Show HN: Horizons – OSS agent execution engine

Show HN: Daily-updated database of malicious browser extensions

Show HN: FastLog: 1.4 GB/s text file analyzer with AVX2 SIMD

Show HN: Falcon's Eye (isometric NetHack) running in the browser via WebAssembly

Show HN: BioTradingArena – Benchmark for LLMs to predict biotech stock movements

Show HN: I built a directory of $1M+ in free credits for startups

Show HN: Micropolis/SimCity Clone in Emacs Lisp

Show HN: A Kubernetes Operator to Validate Jupyter Notebooks in MLOps

Show HN: A password system with no database, no sync, and nothing to breach

Show HN: Local task classifier and dispatcher on RTX 3080

Show HN: 33rpm – A vinyl screensaver for macOS that syncs to your music

Show HN: GitClaw – An AI assistant that runs in GitHub Actions

Show HN: Chiptune Tracker

Show HN: Craftplan – I built my wife a production management tool for her bakery

Show HN: An open-source system to fight wildfires with explosive-dispersed gel

Show HN: Agentism – Agentic Religion for Clawbots

Show HN: Disavow Generator – Open-source tool to defend against negative SEO

Show HN: Total Recall – write-gated memory for Claude Code

Show HN: BPU – Reliable ESP32 Serial Streaming with Cobs and CRC

Show HN: Shadcn/UI theme editor – Design and share Shadcn themes

Comments