Examples

import { H1, Stack, Text } from "cursor/canvas";

export default function Hello() {
  return (
    <Stack gap={12}>
      <H1>Hello, Canvas</H1>
      <Text tone="secondary">
        Live preview rendered in the browser from cursor/canvas.
      </Text>
    </Stack>
  );
}

import { Callout, Grid, H2, Row, Stack, Stat, Text } from "cursor/canvas";

export default function Metrics() {
  return (
    <Stack gap={16}>
      <H2>Release health</H2>
      <Row gap={16} wrap>
        <Stat value="99.2%" label="Uptime" tone="success" />
        <Stat value="142 ms" label="p95 latency" tone="info" />
        <Stat value="3" label="Open incidents" tone="warning" />
      </Row>
      <Grid columns={2} gap={12}>
        <Callout tone="success" title="Deployed">
          canvas-host 1.4.2 is live in all regions.
        </Callout>
        <Callout tone="warning" title="Budget">
          Error budget burn is 18% for the current window.
        </Callout>
      </Grid>
      <Text size="small" tone="tertiary">
        Sample data · not connected to production
      </Text>
    </Stack>
  );
}

import { BarChart, H2, PieChart, Stack, Text } from "cursor/canvas";

export default function Charts() {
  return (
    <Stack gap={16}>
      <H2>Traffic mix</H2>
      <BarChart
        categories={["Mon", "Tue", "Wed", "Thu", "Fri"]}
        series={[
          { name: "Accepted", data: [42, 55, 48, 61, 58], tone: "success" },
          { name: "Rejected", data: [8, 6, 11, 7, 9], tone: "danger" },
        ]}
        stacked
        height={200}
      />
      <PieChart
        data={[
          { label: "IDE", value: 128, tone: "info" },
          { label: "CLI", value: 34, tone: "success" },
          { label: "Cloud", value: 51, tone: "warning" },
        ]}
        donut
        size={180}
      />
      <Text size="small" tone="tertiary">
        Sample telemetry · stacked series and donut share
      </Text>
    </Stack>
  );
}

import {
  Card,
  CardBody,
  CardHeader,
  H2,
  Pill,
  Stack,
  Table,
  TodoList,
} from "cursor/canvas";

export default function Review() {
  return (
    <Stack gap={16}>
      <H2>Review board</H2>
      <Table
        headers={["Service", "Owner", "Status"]}
        striped
        rows={[
          ["canvas-host", "platform", "Healthy"],
          ["workers", "data", "Watch"],
          ["api-gateway", "edge", "Healthy"],
        ]}
      />
      <Card>
        <CardHeader trailing={<Pill size="sm" active>In progress</Pill>}>
          Sprint tasks
        </CardHeader>
        <CardBody>
          <TodoList
            todos={[
              { id: "1", content: "Paste a .canvas.tsx file", status: "completed" },
              { id: "2", content: "Confirm the live preview", status: "in_progress" },
              { id: "3", content: "Publish a short link", status: "pending" },
            ]}
          />
        </CardBody>
      </Card>
    </Stack>
  );
}