Get started

No code? Start here

You don't need to install anything to use Wallflower.

• Customize: make a theme from your brand color, then press Download style guide for a one-page reference, or Copy share link to send it to someone.
• Blocks: pressDownload HTML on any page design. It opens in a browser with your theme built in, ready to hand to whoever builds the site.
• In the customizer's Export tab, Dev brief is a plain-English summary of your theme to paste into an email, a ticket or an AI assistant.

1. Install

Install from GitHub. The generated CSS and JSON are committed, so it works without a build step. Pin a tag or commit to lock a version.

npm i github:silicondaydream/wallflowerUI
# or pin it:  npm i github:silicondaydream/wallflowerUI#v2.0.0

2a. Next.js (App Router, Tailwind v4, shadcn/ui)

@import "tailwindcss";
@import "wallflower-ui/css";           /* tokens, every preset, base, atoms, backgrounds */
@import "wallflower-ui/tailwind.css";  /* bg-primary, font-display, rounded-pill, bg-bloom-500, xs: … */

/* shadcn/ui already reads --background, --primary, --radius…
   so its components follow the Wallflower preset. Remove the
   :root/.dark color blocks shadcn init added, or keep them to override. */

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-preset="midnight" className="dark" suppressHydrationWarning>
      <body>{children}</body>
    </html>
  );
}

const nextConfig = { transpilePackages: ["wallflower-ui"] };
export default nextConfig;

// then:
import { Button } from "wallflower-ui/react/button";
import { Background } from "wallflower-ui/react/background";

2b. Astro

---
import "wallflower-ui/css";
import Background from "wallflower-ui/astro/Background.astro";
import Button from "wallflower-ui/astro/Button.astro";
---
<html lang="en" data-preset="moss">
  <body>
    <Background id="warm-paper" fixed />
    <Button href="/start">Get started</Button>
    <slot />
  </body>
</html>

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

export default defineConfig({
  integrations: [react()],
  vite: { ssr: { noExternal: ["wallflower-ui"] } },
});

2c. Plain HTML, or no install

Link the hosted stylesheet. Use the classes directly.

<link rel="stylesheet" href="https://<your-wallflower-site>/css/wallflower.css" />

<html data-preset="sunset">
  <button class="wf-btn">Hello</button>
  <div class="wf-bg-pastel-mesh wf-bg-fixed"></div>
</html>

Hosted files: /css/wallflower.css,/css/core.css,/css/preset-<id>.css,/css/backgrounds.css,/css/tailwind.css.

shadcn registry

Every preset is a shadcn theme and every React atom is a registry item, so the shadcn CLI can write them into any project.

# Theme your existing shadcn components with a preset
npx shadcn@latest add https://raw.githubusercontent.com/silicondaydream/wallflowerUI/main/public/r/theme-sunset.json

# Copy a Wallflower atom into components/wallflower/ (pulls in styles/wallflower.css)
npx shadcn@latest add https://raw.githubusercontent.com/silicondaydream/wallflowerUI/main/public/r/wf-button.json

After adding atoms, import styles/wallflower.css in your global CSS once. Item list: registry.json.

What's in the package

Tokens in JavaScript

For charts, canvas, emails or native apps that can't read CSS variables.

import presets from "wallflower-ui/tokens/presets.json";
import palettes from "wallflower-ui/tokens/palettes.json";

const sunset = presets.find(p => p.id === "sunset");
sunset.colors.dark.primary;          // "#ff735f"
palettes.lagoon.ramp[600];           // "#007879"
sunset.googleFontsUrl;               // ready for a <link>

Working with Claude Design

Wallflower is the code side of your Claude Design systems.

• Claude Design → Wallflower: turn any Claude Design system (like GeekyMango) into a preset with npm run preset:import. See Presets → Add a preset.
• Wallflower → Claude Design: every preset downloads as a Claude Design tokens.json, so decks and mockups made in Claude match your shipped apps.
• Ask Claude: this repo's CLAUDE.md tells Claude Code how to add presets, palettes, backgrounds and atoms, so "add my new design system as a preset" is a one-line request.

Extending Wallflower

Everything is generated from src/system. Edit there, then run npm run tokens.

npm run tokens also checks every preset for WCAG AA contrast and warns about failing pairs.