Code result block

Block

Code beside what it makes. Each tab is one small change; switching marks the changed lines and fades the result to its new state. Real text with a copy button.

Installs components/ui/code-result-block.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/code-result-block.json

For developers

One prop, one visible change

Caliper UI components are plain React with the states built in. Change a line and see what it does.

reminders.tsx

1<Card>
2  <Switch label="Invoice reminders" />
3  <Button>
4    Save schedule
5  </Button>
6</Card>

Invoice reminders

Email customers 3 days before an invoice is due.

When to use #

Use it for

Developer landing pages and docs overviews.
Showing that a prop or a line of config does one visible thing.

Skip it when

Long programs; link to the docs.
Typing animations; readers should not wait for code.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/code-result-block.json

Adds its 6 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from changedLines and CodeResultBlock.

example.tsx

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { CodeResultBlock } from "@/components/ui/code-result-block"
import { Switch } from "@/components/ui/switch"

function ResultCard({ variant, loading, size }: { variant?: "default" | "secondary" | "destructive"; loading?: boolean; size?: "sm" | "md" | "lg" }) {
  const [on, setOn] = useState(true);
  return (
    <div className="mx-auto grid w-full max-w-xs gap-3 rounded-surface border border-border bg-surface p-4 text-sm">
      <div className="flex items-center justify-between"><span className="font-medium">Invoice reminders</span><Switch aria-label="Invoice reminders" checked={on} onChange={(event) => setOn(event.target.checked)} /></div>
      <p className="text-muted-foreground">Email customers 3 days before an invoice is due.</p>
      <Button variant={variant} loading={loading} size={size}>{variant === "destructive" ? "Delete schedule" : "Save schedule"}</Button>
    </div>
  );
}

export function CodeResultBlockDemo() {
  return (
    <CodeResultBlock
      eyebrow="For developers"
      title="One prop, one visible change"
      lead="Caliper UI components are plain React with the states built in. Change a line and see what it does."
      examples={[
        { id: "base", label: "Default", file: "reminders.tsx", code: `<Card>\n  <Switch label="Invoice reminders" />\n  <Button>\n    Save schedule\n  </Button>\n</Card>`, result: <ResultCard /> },
        { id: "loading", label: "Loading", file: "reminders.tsx", code: `<Card>\n  <Switch label="Invoice reminders" />\n  <Button loading={saving}>\n    Save schedule\n  </Button>\n</Card>`, result: <ResultCard loading /> },
        { id: "large", label: "Large", file: "reminders.tsx", code: `<Card>\n  <Switch label="Invoice reminders" />\n  <Button size="lg">\n    Save schedule\n  </Button>\n</Card>`, result: <ResultCard size="lg" /> },
        { id: "danger", label: "Destructive", file: "reminders.tsx", code: `<Card>\n  <Switch label="Invoice reminders" />\n  <Button variant="destructive">\n    Delete schedule\n  </Button>\n</Card>`, result: <ResultCard variant="destructive" /> },
      ]}
    />
  );
}

API reference #

changedLines

component

No props of its own; it accepts the native props of its root element.