Token workbench

It lets you tweak styling controls like spacing, corners, and elevation while viewing instant updates on connected components. Highly useful for developing custom themes and scalable component libraries.

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

"use client";

import * as React from "react";
import TokenWorkbench from "../components/ui/token-workbench";

export default function TokenWorkbenchDemo() {
  return <div className="flex min-h-[460px] w-full flex-col items-center justify-center bg-background p-4 text-foreground sm:p-8"><TokenWorkbench /></div>;
}