# 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.

Website: https://tweakcn.com/

## What it is 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](https://xiry.app/topics/development.md)
- Topic: [UI Components](https://xiry.app/topics/development/ui-components.md)
- 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, 12 April 2025](https://x.com/iamsahaj_xyz/status/1911134916470784353): 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

- [shadcn/ui](https://xiry.app/resources/shadcn-ui-1902): Copy-paste React UI components built with Tailwind CSS and Radix primitives. (Website, Open source)
- [Efferd](https://xiry.app/resources/efferd): Pre-built, responsive shadcn/ui blocks and layouts for React applications (Web app, Freemium)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [React Bits](https://xiry.app/resources/react-bits): Open-source animated and interactive React UI components and backgrounds (Website, Freemium)
- [21st.dev](https://xiry.app/resources/21st-dev): Curated directory of crafted React, Tailwind, and shadcn UI components. (Website, Freemium)
- [lucide-animated](https://xiry.app/resources/lucide-animated): Open-source animated React icons built with Lucide and Motion (Web app, Open source)

Updated 10 October 2026. Page: https://xiry.app/resources/tweakcn

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.