_       _                               _  __ 
  (_) ___ | |__   __ _ _ ____      ___   _| |/ _|
  | |/ _ \| '_ \ / _` | '_ \ \ /\ / / | | | | |_ 
  | | (_) | | | | (_| | | | \ V  V /| |_| | |  _|
 _/ |\___/|_| |_|\__,_|_| |_|\_/\_/  \__,_|_|_|  
|__/

Building shadecn - A shadcn theme-aware SVG tool

2025-06-11 · 2 min read
#react #shadcn #svg #tools #typescript

I love using unDraw illustrations in my projects, but I’m way too lazy to manually change their colors to match my shadcn themes.

So I built shadecn to fix exactly this problem (awesome name, right?).

The Problem

When you export SVGs from Figma or other design tools, you get something like this:

<svg fill="#8b5cf6" stroke="#3b82f6">
  <path d="..." />
</svg>

Those hex colors are baked in. They don’t respond to theme changes, and they probably don’t match your design system anyway.

The Solution

shadecn lets you import your shadcn theme CSS and map those hard-coded colors to your theme variables. Instead of fill="#8b5cf6", you get fill="hsl(var(--primary))".

Here’s how it works:

  1. Paste your SVG
  2. Import your shadcn theme config (the CSS with all those OKLCH colors)
  3. Map which SVG colors should use which theme colors
  4. Export a React component that adapts to your theme

Tech Stack

Built with React, TypeScript, and of course shadcn/ui components. Using Tailwind CSS for styling and Vite for the build process. The color conversion magic happens with culori.

It’s live at wulf.gg/shadecn and the code is on GitHub.

Why I Built This

Honestly, I just got tired of manually editing SVG colors every time I wanted to use an illustration in a project. Now I can paste an SVG, map it to my theme, and get a component that just works everywhere.