Appearance Lab

Appearance settings: preview mode, accent swatches, density and a corner radius rotary dial. A live mini inbox window re-lays out with layout animations; accent clicks release a color bloom from the swatch. Outputs the generated CSS variables live; built-in light/dark toggle for the panel itself.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Appearance Lab to your project and fits it to your theme.

import * as React from "react"
import { AppearanceLab } from "@/components/ui/st-appearance-lab"

export default function AppearanceLabDemo() {
  return <AppearanceLab />
}