Development · Web app
tweakcn
Visual theme editor and code generator for shadcn/ui and Tailwind CSS
tweakcn is an open-source, browser-based theme builder tailored for shadcn/ui and Tailwind CSS. It lets developers visually modify color palettes, typography, spacing, border radiuses, and shadows against an interactive component dashboard preview. Once styled, it exports production-ready CSS variables in OKLCH or HSL formats with support for Tailwind CSS v4 and v3.
What it's for
- Style a shadcn/ui application visually without manually editing CSS variables
- Preview theme changes across real dashboard components in real time
- Generate custom themes from text prompts or reference images using AI
- Export compatible OKLCH or HSL theme variables for Tailwind CSS v3 and v4
Features
- Extensive preset library including Modern Minimal, Neo Brutalism, Cyberpunk, and Solar Dusk
- Live dashboard component preview showing real-time UI updates
- Full controls for typography, font families, letter-spacing, and spacing scales
- Border radius and shadow fine-tuning controls
- Built-in contrast ratio accessibility checker
- Support for OKLCH and HSL color formats across Tailwind CSS v3 and v4
- One-click code export to index.css or direct CLI install via shadcn CLI
- AI-powered theme generation from prompts or uploaded images
Pricing
Freemium. Free and open source for core theme editing; paid Pro tier available for AI theme generation features.
Details
- Type
- Web app
- Category
- Development
- Topic
- UI Components
- Open source
- Yes
- Platforms
- Web
- For
- Frontend developers, React engineers, and UI designers building with shadcn/ui and Tailwind CSS
- Alternative to
- shadcn/ui default themes
- Tags
- shadcn, tailwind css, theme generator, css, design system, front end, react
Why it was saved
- @iamsahaj_xyz: Replaces hand-editing shadcn CSS variables: pick from 25 themes, customise typography and layout sliders, see a real dashboard preview restyle live, and copy index.css with oklch variables or install via `pnpm dlx shadcn@latest add`. This update adds the Dune-inspired 'Solar Dusk' theme, customisable letter-spacing and spacing, and Geist, Geist Mono and Oxanium fonts.
Related
Copy-paste React UI components built with Tailwind CSS and Radix primitives.
Pre-built, responsive shadcn/ui blocks and layouts for React applications
Open-source animation library for React, Vue, and vanilla JavaScript
Open-source animated and interactive React UI components and backgrounds
Curated directory of crafted React, Tailwind, and shadcn UI components.
Open-source animated React icons built with Lucide and Motion
Updated