Playground

Try check_ui on a real design system.

Edit the code or pick a draft. It is checked against the demo design system by the same rules the MCP server and the CLI run, on a server that parses the code and never runs it.

The settings card from the demo above: one problem per rule.

danger-zone.tsx8 errors · 3 warnings

1import { Trash2 } from "lucide-react"23import { Badge } from "@/components/ui/badge"4import { Button } from "@/components/ui/button"5import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"67export function DangerZone({ onDelete }: { onDelete: () => void }) {8  return (9    <Card className="border-[#ef4444] p-[13px]">10      <CardHeader>11        <CardTitle>Delete workspace</CardTitle>12        <Card.Description>This cannot be undone.</Card.Description>13      </CardHeader>14      <CardContent className="flex items-center gap-3">15        <Badge tone="warning">Irreversible</Badge>16        <Button variant="danger" onClick={onDelete}>17          Delete workspace18        </Button>19        <Button variant="ghost" size="icon">20          <Trash2 />21        </Button>22        <button className="rounded-[7px] bg-gray-100 px-3 text-sm">23          Cancel24        </button>25        <p style={{ color: "#737373", marginTop: 6 }}>Owners only.</p>26      </CardContent>27    </Card>28  )29}30

import { Trash2 } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

export function DangerZone({ onDelete }: { onDelete: () => void }) {
  return (
    <Card className="border-[#ef4444] p-[13px]">
      <CardHeader>
        <CardTitle>Delete workspace</CardTitle>
        <Card.Description>This cannot be undone.</Card.Description>
      </CardHeader>
      <CardContent className="flex items-center gap-3">
        <Badge tone="warning">Irreversible</Badge>
        <Button variant="danger" onClick={onDelete}>
          Delete workspace
        </Button>
        <Button variant="ghost" size="icon">
          <Trash2 />
        </Button>
        <button className="rounded-[7px] bg-gray-100 px-3 text-sm">
          Cancel
        </button>
        <p style={{ color: "#737373", marginTop: 6 }}>Owners only.</p>
      </CardContent>
    </Card>
  )
}

Checks as you type, or now with ⌘/Ctrl + Enter. Parsed, never run.1.0 KB / 20.0 KB

Findings8 errors · 3 warnings

errorno-hardcoded-color
Hardcoded color border-[#ef4444]. Nearest token destructive (ΔE 0.071) → border-destructive.
warningno-hardcoded-spacing
Hardcoded spacing p-[13px] (13px) is off the scale. Nearest: p-3 (12px).
errorno-unknown-component
<Card.Description> does not exist: Card is composed from flat parts. Use <CardDescription> (import { CardDescription } from "@/components/ui/card").
errorno-unknown-prop
<Badge> has no prop "tone". Did you mean "variant" ("default" | "secondary" | "destructive" | "success" | "outline")?
Suggests variant; the change needs a decision, so there is no automatic fix.
errorno-unknown-variant
"danger" is not a valid variant for <Button>. Allowed: default, destructive, outline, secondary, ghost, link. Did you mean "destructive"?
erroricon-button-accessible-name
Icon-only <Button> has no accessible name. Add aria-label="Delete" describing the action, or visually hidden text.
errorprefer-design-system-component
Native <button> where the design system has <Button>. Use <Button> (import { Button } from "@/components/ui/button"); its variants replace the custom classes.
warningno-hardcoded-radius
Hardcoded radius rounded-[7px] (7px) is off the scale. Nearest: rounded-sm (6px).
errorno-hardcoded-color
bg-gray-100 is Tailwind's default palette, not a design-system color. Matches token muted (ΔE 0.004, same value as secondary, accent) → bg-muted.
errorno-hardcoded-color
Hardcoded color #737373 in style.color. Matches token muted-foreground (exact match) → text-muted-foreground or var(--muted-foreground).
warningno-hardcoded-spacing
Hardcoded spacing marginTop: 6 in style. Use mt-1.5 (6px) in className instead of an inline style.
Suggests mt-1.5; the change needs a decision, so there is no automatic fix.

What the demo design system has

Five shadcn/ui-style components built with cva and Radix, and Tailwind v4 tokens: 20 colors and 8 radius steps on Tailwind's spacing scale. Anything else is unknown to the checker, as it would be in your project.

Import from @/components/ui/…, or leave imports out: names resolve either way.

<Badge> renders <span>
A small status label: counts, states ("Active", "Overdue") or categories. Not interactive by default; pass asChild to render a link.
variant: default · secondary · destructive · success · outline
<Button> renders <button>
Triggers an action or event, such as submitting a form, opening a dialog or deleting a record. Use variant="destructive" for irreversible actions and variant="link" for navigation that should look like a button.
variant: default · destructive · outline · secondary · ghost · link
size: default · sm · lg · icon
<Card> renders <div>
A bordered surface that groups related content and actions.
parts: CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent
<Dialog>
A modal window that interrupts the user to confirm a decision or collect input. Use it to confirm destructive actions before they happen.
parts: DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger
<Input> renders <input>
A single-line text field. Always pair it with a visible <label htmlFor> or an aria-label; set aria-invalid to show the error state.