Definitions on the left, real usage on the right. Update the type, the call site updates with you — no runtime guessing.
// Component type definitionsexport type ButtonVariant =| "default"| "outline"| "ghost"| "destructive";.export interface ButtonProps {variant?: ButtonVariant;size?: "sm" | "md" | "lg";loading?: boolean;onClick?: () => void;}
// Use the typed Button anywhereimport type { ButtonProps } from "./types";import { Button } from "./button";.const cta: ButtonProps = {variant: "outline",size: "md",loading: false,};.// Catches typos at compile timeconst danger: ButtonProps = {variant: "destructive",};
Browser-chrome card pairing two minimal code panes — TypeScript type definitions on the left, real call-site usage on the right. Monochrome syntax with muted comments. Every label is editable; no media props required.