Wallflower UI

A new way to design for the new way we work.
The design system for modern development.

Start here

No code needed. Three steps from idea to something you can hand to a developer.

Step 1
Pick a look
Browse 10 presets, from clean product UI to neo-brutal, retro terminal and luxury serif. Switch the whole site with the picker at the top.
Browse presets
Step 2
Make it yours
Drop in your brand color, choose fonts, corners and shadows, and watch a real app update as you go. Contrast is checked for you.
Open the customizer
Step 3
Take it with you
Download a ready-made page or a style guide, copy code for your developer, or send a link to your theme.
See full-page blocks

Build a theme from your brand color and export it for shadcn/ui, Tailwind, Wallflower or Claude Design.

Full pages (dashboard, login, landing, pricing, settings, blog) to copy or download as HTML.

10 complete looks: colors, fonts, radius, borders and shadows, light and dark. Add your own from Claude Design.

Semantic tokens that match shadcn/ui, plus 11 perceptually even 11-step palettes.

A fluid type scale and 37 curated Google Fonts, ready for next/font and Astro.

Spacing, radius, borders, shadows, breakpoints, containers, z-index and motion.

45 backgrounds: the originals plus meshes, grain, retro grids and preset-aware glows.

A curated Lucide set plus dividers, blobs, accent shapes and tileable patterns.

Atomic components as plain CSS classes, with React and Astro wrappers.

Use it in Next.js, Astro, shadcn/ui or plain HTML, from the package or a copy-paste.

Add it straight from GitHub. The built CSS and tokens are committed, so there's no build step on your side.

terminal

npm i github:silicondaydream/wallflowerUI

One import gives you every token, preset and atom. Switch presets with an attribute.

globals.css

@import "tailwindcss";
@import "wallflower-ui/css";
@import "wallflower-ui/tailwind.css";

/* <html data-preset="sunset" class="dark"> */