Recipe: React component writer from spec

Prerequisites

• Meridian CLI installed and authenticated
• A component spec written in Meridian Spec Language (MSL)
• Target project initialized with Tailwind CSS

Step 1 — Write the spec

Define your component's props, states, and variants in a .msl file. The spec declares the interface, default values, and accessibility requirements.

component Button {
  variant: "primary" | "secondary" | "ghost"
  size: "sm" | "md" | "lg"
  disabled: boolean = false
  label: string
  onClick: () => void
}

Step 2 — Generate

Run the Meridian CLI to produce the component file. The generator resolves variants into Tailwind class maps and emits a single-file TSX output.

meridian generate --spec Button.msl --out ./components/Button.tsx

Step 3 — Integrate

Import the generated component into your page. All props are fully typed. The output includes default ARIA attributes and keyboard handlers derived from the spec.

import { Button } from "@/components/Button";

export default function Page() {
  return <Button variant="primary" size="md" label="Save" onClick={handleSave} />;
}