tweakcn README

The project's README from github.com/jnsahaj/tweakcn. As one markdown file: README.md.

tweakcn.com

Vercel OSS Program

Discord GitHub Repo stars X (formerly Twitter) URL

tweakcn is a powerful Visual Theme Editor for tailwind CSS & shadcn/ui components. It comes with Beautiful theme presets to get started, while aiming to offer advanced customisation for each aspect of your UI

tweakcn.com

Motivation

Websites made with shadcn/ui famously look the same. tweakcn is a tool that helps you customize shadcn/ui components visually, to make your components stand-out. The goal is to build a platform where a user can discover endless customization options and then have the ability to put their own twist on it.

Current Features

You can find the full feature list here: https://tweakcn.com/#features

Run Locally

IMPORTANT: For contributions, please see CONTRIBUTING.md.

Prerequisites

Installation

  1. Clone the repository:
git clone https://github.com/jnsahaj/tweakcn.git
cd tweakcn
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open http://localhost:3000 in your browser.

Contributors

Made with contrib.rocks.

Interested in Contributing?

Contributions are welcome! Please feel free to submit a Pull Request.

Star History

GitHub Star History for jnsahaj/tweakcn

tweakcn (jnsahaj/tweakcn)

Searching Database…

10.5K ·GitHub
这是干什么的?tweakcn 是一个可视化的无代码主题编辑器,面向 Tailwind CSS 和 shadcn/ui 组件——你不用手写主题代码,而是通过图形界面来调整界面样式,还可以从现成的预设入手。
它是浏览器里直接用的网站,还是要安装的库?它是一个网页应用:在线版在 tweakcn.com,你也可以自己在本地把它跑起来。最终带进你自己项目的是它生成的主题,而不是这个编辑器本身。
我在本地怎么运行它?你需要 Node.js 18+,以及 npm、yarn 或 pnpm。克隆仓库、安装依赖、启动开发服务器,然后在浏览器里打开——它是一个 Next.js 应用,所以启动命令就是 npm run dev。
如果我的项目没有用 shadcn/ui,它是不是就没用了?基本上是的——它就是专门为用 Tailwind CSS 设置样式的 shadcn/ui 组件做主题的,默认你的项目用的就是这套技术栈。换成别的技术栈,它就没有可以编辑的东西了。
作者为什么要做这个?因为用 shadcn/ui 做出来的网站长得千篇一律,这一点出了名。作者想做的,是一个让你能发现无穷定制可能、再加以自己风格的平台。
它自带现成的主题,还是所有东西都得我自己设计?它内置了一些漂亮的主题预设,拿来就能上手,同时也希望对界面的每个方面都提供高级的自定义能力。
它背后有 AI 相关的功能吗?依赖列表里有 Google 的 AI SDK(@ai-sdk/google 和 @google/generative-ai),说明这个应用接入了 Google AI——不过 README 本身并没有说明这些 AI 功能具体是做什么的。
Creator
jnsahaj
Size
89.4 MB
Stars
10.5K
Updated
CommitSep 03
Age
1y
Commits · 90 Days