# jnsahaj/tweakcn

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jnsahaj-tweakcn).**

9,405 stars · 582 forks · TypeScript · apache-2.0

## Links

- GitHub: https://github.com/jnsahaj/tweakcn
- Homepage: https://tweakcn.com
- awesome-repositories: https://awesome-repositories.com/repository/jnsahaj-tweakcn.md

## Topics

`shadcn` `shadcn-theme` `shadcn-theme-editor` `shadcn-ui` `tailwindcss` `tailwindcss-v4`

## Description

tweakcn is a web UI styling tool and frontend design editor used for client-side theme customization. It functions as a style injector that applies dynamic theme overrides by inserting style rules into the document head at runtime.

The project provides a visual interface for adjusting user interface components and design settings through built-in presets and custom CSS values. It utilizes JSON-driven configuration and preset mapping to manage application appearance and brand identity without the need to manually edit stylesheet files.

The tool enables visual design management and rapid iteration of colors and layouts. It supports interface appearance management through CSS-variable-based theming, global state theme switching, and a CSS variable cascade.

## Tags

### User Interface & Experience

- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/theme-architecture-frameworks/theme-customization.md) — Provides a visual interface for adjusting the appearance of UI components using built-in presets or custom design settings. ([source](https://cdn.jsdelivr.net/gh/jnsahaj/tweakcn@main/README.md))
- [Visual Design Editors](https://awesome-repositories.com/f/user-interface-experience/ui-styling/visual-design-editors.md) — Provides a visual interface and design editor for managing application appearance and brand identity without manual stylesheet editing.
- [Document Style Overrides](https://awesome-repositories.com/f/user-interface-experience/css-styling/document-style-overrides.md) — Functions as a mechanism for applying dynamic theme overrides by inserting style rules into the document head at runtime.
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Manages visual themes by updating root-level CSS variables that propagate changes throughout the entire component tree.
- [Custom Theme Injectors](https://awesome-repositories.com/f/user-interface-experience/custom-theme-definitions/custom-theme-injectors.md) — Applies custom style overrides and CSS variables to a web application at runtime to change its appearance.
- [Interface Appearance Customizations](https://awesome-repositories.com/f/user-interface-experience/interface-appearance-customizations.md) — Adjusts how application components look and feel through a visual editor for a consistent brand identity.
- [Custom Web Styling](https://awesome-repositories.com/f/user-interface-experience/layout-components/custom-web-styling.md) — Modifies the appearance of web elements and layouts without manually editing stylesheet files.
- [Style Sheet Injection](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling/style-sheet-injection.md) — Implements mechanisms for programmatically inserting CSS rules into the document head at runtime to apply theme overrides.
- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/theme-customization.md) — Changes the visual style of a user interface using presets or custom design settings to improve aesthetics.
- [JSON-Based](https://awesome-repositories.com/f/user-interface-experience/theme-definitions/json-based.md) — Translates structured JSON configuration files into active style properties to apply pre-defined visual themes.
- [Interface Design Tools](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-authoring-software/interface-design-tools.md) — Provides a tool for rapidly iterating on user interface layouts and colors using JSON-driven configuration and design presets.
- [Style Reconciliation Systems](https://awesome-repositories.com/f/user-interface-experience/style-reconciliation-systems.md) — Matches user-defined design settings with target DOM elements to apply specific visual modifications at runtime.
- [CSS Variable Configuration Interfaces](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/css-variable-configuration-interfaces.md) — Provides a visual interface for adjusting user interface components and design settings through built-in presets and custom CSS values.
- [Theme State Managers](https://awesome-repositories.com/f/user-interface-experience/ui-state-management/theme-state-managers.md) — Toggles between visual presets by updating a central state object that triggers updates to the styling layer.
- [Visual Design Iteration Tools](https://awesome-repositories.com/f/user-interface-experience/visual-design-iteration-tools.md) — Enables rapid testing of different colors and layouts for a user interface to find the best visual configuration.
- [Visual Design Management Tools](https://awesome-repositories.com/f/user-interface-experience/visual-design-management-tools.md) — Adjusts user interface components and design settings through a visual editor to maintain a consistent brand identity.

### Software Engineering & Architecture

- [JSON Configuration Schemas](https://awesome-repositories.com/f/software-engineering-architecture/application-lifecycle-management/configuration-management/configuration-formats-and-schemas/json-configuration-schemas.md) — Stores design presets and user preferences in structured JSON files that are read to apply visual modifications.