Darnly
Free tools

shadcn/ui theme generator

Pick a brand color, a gray and a corner size, and watch a real shadcn app change as you go, in light and dark. Then copy the globals.css, or hand the whole theme to your AI coding agent.

Free from Darnly. Spot a bug in the app you're building? Darnly hands it to Claude Code, Codex or Cursor in one key.Add to Chrome

Brand color
Gray
Corners

Dashboard

⌕ Search…Export+ New project
Revenue$45,231+20.1%
Subscribers2,350+180
Churn1.8%+0.4%
VisitorsLast 6 months
  • Chrome
  • Safari
  • Firefox
  • Edge
  • Other
Create projectDeploy in one click.
Namemy-new-appFrameworkNext.js ⌄✓Send me updatesPublic project
CancelDeploy
Team3 people
SDSofia Davissofia@example.comOwner
JLJackson Leejackson@example.comAdmin
INIsabella Nguyenisa@example.comViewer
PrimarySecondaryOutlineGhostLink

    Change anything above. The preview updates as you go.

    More free tools
    See all 89 tools
    How it works
    1. Pick your brand color, or paste its hex code. Then choose a gray (neutral, zinc, slate, stone, gray, or one tinted with your color) and how round the corners should be.
    2. The preview is a real-looking app made of shadcn components: buttons, cards, inputs, tabs, badges, a dialog and a chart. It changes the moment you change anything. Switch it to dark mode to see the other half of the theme.
    3. Copy the globals.css for Tailwind v4 (OKLCH), the older v3 HSL version, or a prompt that tells your AI coding agent to apply the theme for you.
    Questions
    Where does this go in my project?
    Into the CSS file that npx shadcn init made, usually app/globals.css or src/index.css. Replace the :root and .dark blocks with the ones you copy here. If you’d rather not touch the file yourself, copy the prompt and paste it into Claude Code, Codex or Cursor.
    Tailwind v4 or v3: which do I have?
    If your CSS file starts with @import "tailwindcss"; and colors look like oklch(0.97 0 0), you’re on v4. If you have a tailwind.config file and colors look like 0 0% 100%, you’re on v3. Projects made with shadcn since early 2025 are on v4.
    Why does my button text turn dark sometimes?
    We pick white or near-black text, whichever is easier to read on your color. Bright colors like yellow, lime or light blue read better with dark text. The check under the preview shows the contrast for the button text and the gray text.
    Why is my color different in dark mode?
    A deep color that looks great on white can disappear on a near-black background. In dark mode we raise its lightness just enough to stand out, and keep the same hue. Very dark brand colors flip to near-white, which is what shadcn’s own default theme does.
    What does “Randomize (tasteful)” do?
    It picks a calm, usable brand color, a gray that suits it (warm colors get warm grays), a corner size and chart colors. It mostly avoids the indigo-to-purple that so many AI-made apps share.
    How do I make my app look less AI-made?
    The stock shadcn look, black buttons on zinc grays with the default corners, is the first thing people notice. A real brand color, a gray tinted to match it and a deliberate corner size already go a long way. The AI slop checker shows what else gives it away.
    Is anything uploaded?
    No. Everything runs in your browser.