# tweakcn

> Guides for theming shadcn/ui apps with the tweakcn visual theme editor.

- Documentation: https://tweakcn.thally.app
- GitHub: https://github.com/tonyedgal/tweakcn-docs
- Full docs for LLMs: https://tweakcn.thally.app/llms-full.txt
- Agent discovery (ai.txt): https://tweakcn.thally.app/ai.txt
- Structured docs index (JSON): https://tweakcn.thally.app/api/docs-index
- OpenAPI spec: https://tweakcn.thally.app/openapi.yaml

## For AI agents

Every page supports content negotiation on its human URL:
- JSON API: append `?format=json` or send `Accept: application/json`
- JSON-LD: append `?format=ldjson` or send `Accept: application/ld+json`
- Markdown: append `?format=md` or send `Accept: text/markdown`
- Per-page API: https://tweakcn.thally.app/api/docs/{page-id}
- Search API: https://tweakcn.thally.app/api/search?q={query}
- Capability manifest (skill): https://tweakcn.thally.app/skill.md
- Agent guidance (editing these docs): https://tweakcn.thally.app/AGENTS.md
- MCP server (attach docs as native tools): https://tweakcn.thally.app/api/mcp
- Agent readiness: https://tweakcn.thally.app/api/agent-readiness

### Recommended workflow

1. Use this index, the search API, or `search_sections` / `search_docs` before choosing a page.
2. Read the smallest set of relevant pages and follow their prerequisite links.
3. Treat the published docs as the source of truth. Label inferences and say when evidence is missing.
4. Cite the canonical human page URLs, not only API endpoints.
5. Use `/AGENTS.md` before editing a repository. The public MCP server is read-only.

## Docs

### Get started

- [Introduction](https://tweakcn.thally.app/): Design a shadcn/ui theme in the browser, then install it in your app with one command.
- [Quickstart](https://tweakcn.thally.app/quickstart): Install a tweakcn preset in a new Next.js app and check light and dark mode. You do not need an account.

### Use the CLI

- [Start a project with a theme](https://tweakcn.thally.app/cli/shadcn-create): Use shadcn create with a tweakcn registry URL to make a new themed project in one command.
- [Install themes with the CLI](https://tweakcn.thally.app/cli/install-themes): Add a tweakcn theme to an existing shadcn/ui project with shadcn add.

### Themes

- [Use a preset](https://tweakcn.thally.app/themes/presets): Load one of the 42 built-in tweakcn themes, compare presets, and link to a preset.
- [Modify a theme](https://tweakcn.thally.app/themes/modify-a-theme): Change the colors, fonts, radius, spacing, and shadows of a tweakcn theme for light and dark mode.
- [Create your own theme](https://tweakcn.thally.app/themes/create-a-theme): Build a theme from your brand colors in tweakcn, for light and dark mode.
- [Import your CSS](https://tweakcn.thally.app/themes/import-css): Load existing shadcn/ui CSS variables into the tweakcn editor.

### AI

- [Generate a theme with AI](https://tweakcn.thally.app/ai/generate): Create a complete tweakcn theme from a text prompt or an image.
- [Enhance a theme with AI](https://tweakcn.thally.app/ai/enhance): Use Remix, Tweak, and Enhance prompt to change an existing theme with AI.

### Save and share

- [Save and share a theme](https://tweakcn.thally.app/sharing/save-and-share): Save a tweakcn theme to your account, open it again, and send a link to other people.
- [Manage saved themes](https://tweakcn.thally.app/sharing/manage-themes): Find, apply, edit, publish, and delete your saved tweakcn themes on the Your Themes page.
- [Publish to the community](https://tweakcn.thally.app/sharing/publish): List a saved tweakcn theme on the community page so other people can find and install it.

## Guides

### Overview

- [Guides](https://tweakcn.thally.app/guides/overview): Step-by-step guides for common tweakcn tasks, from a first edit to a Figma export.

### Work with themes

- [Edit a theme](https://tweakcn.thally.app/guides/edit-a-theme): Change the Modern Minimal preset to violet brand colors, check contrast, save it, and install it.
- [Generate a theme from a screenshot](https://tweakcn.thally.app/guides/theme-from-screenshot): Turn a screenshot of a product you like into a shadcn/ui theme with the tweakcn AI.
- [Load the theme fonts](https://tweakcn.thally.app/guides/load-theme-fonts): Load the fonts that a tweakcn theme names, in Next.js and Vite.
- [Preview a theme on your site](https://tweakcn.thally.app/guides/preview-on-your-site): Show the theme from the tweakcn editor on your own running app, before you install it.

### Import and export

- [Import a theme](https://tweakcn.thally.app/guides/import-a-theme): Move the theme of an existing shadcn/ui app into tweakcn, edit it, and put it back.
- [Export a theme](https://tweakcn.thally.app/guides/export-a-theme): Copy the CSS of a tweakcn theme into your app for Tailwind CSS v4 or v3.
- [Export to Figma](https://tweakcn.thally.app/guides/export-to-figma): Apply a tweakcn theme to the shadcncraft Figma UI kit so designs match your code.

### Help

- [Troubleshooting](https://tweakcn.thally.app/troubleshooting): Fix common problems when you install and edit tweakcn themes.