tweakcn

Visually customize shadcn/ui themes and compare styles in component previews.

  • Interface
Visit tweakcn official site

What it is

tweakcn is a visual theme editor for Tailwind CSS and shadcn/ui. Start with a theme preset, adjust its styles, and see how they look on components.

Why it is selected

A palette alone tells you little about how an interface will look. Component previews make it easier to compare visual directions before choosing the theme settings for a project.

Who it suits

Frontend developers using shadcn/ui and designers working with them to choose an interface style.

Useful for

  • Choosing a theme preset as a starting point for a project
  • Adjusting a theme and comparing how components look

Onlook

An open-source visual editor that puts existing React components on a canvas and writes changes back to code.

  • visual-editor
  • react
  • tailwindcss

Figma

A collaborative canvas for product interface design, prototypes, and shared design work.

  • design
  • collaboration
  • prototyping

Framer

A visual web-design environment for moving from an editable page concept to a published site.

  • web-design
  • publishing
  • prototyping