Theme your coss ui app, live.
Tune colors, type and radius on real components, then take the theme with you.
- No account
- In your browser
- Export to Tailwind
How to use
Wherever your theme lives
One editor, three places to use it. Cossplay only overrides the variables you change; everything else keeps following your CSS.
In the browser
Open the editor and theme a gallery of real coss ui components: cards, dashboard, mail, marketing and app pages. Nothing to install.
On any coss ui site
The Chrome extension docks in the side panel and edits the theme of the page you're on, localhost or production, and remembers it per site.
In your own app, from the editor
Add one script tag in development and the editor's Custom tab themes your running app live, next to the controls.
<script src="https://cossplay.vercel.app/bridge.js">Features
Everything a theme needs
Built on coss ui's own token set, including the info, success, warning and code colors that shadcn themes don't have.
42 presets, coss-aware
Every tweakcn preset plus coss ui's default, mapped onto coss tokens like info, success, warning and code. Search, step through or shuffle them.
Inspect to edit
Point at any element to see which tokens color it, then click to jump straight to that control.
Precise color editing
HEX, OKLCH, HSL or RGB with channel sliders, opacity and the Tailwind palette. Values are written back in the site's own format.
Type and shape
Google Fonts search and loading, letter spacing, radius, spacing and shadows, shared across light and dark.
Contrast checks
WCAG ratios for 15 coss color pairs, with an issues-only view while you edit.
Undo everything
Every edit is in history with ⌘Z and ⌘⇧Z. Reset to the preset, or back to the site's original theme.
Ship it
From preset to your codebase in one command
Every preset is a shadcn registry item. Install it with the CLI, connect shadcn's MCP server to your editor, or copy the CSS in the format your project uses.
Edited a theme? Copy or download it from Export instead.
FAQ
Questions
The short version: free, local, and independent.
- Is it free?
- Yes. No account, no sign-up, no paid tier.
- Where are my themes stored?
- In your browser only. The editor uses local storage and the extension uses Chrome's extension storage. Nothing is sent to a server.
- Does it only work with coss ui?
- It's built around coss ui's token set, and also works on sites that use shadcn-style CSS variables.
- Is this an official coss project?
- No. Cossplay is an independent project. Presets come from tweakcn (Apache-2.0).
Let your coss ui app play dress-up.
Pick a preset and see it on real components in seconds.