ObservabilityCard() — ui Function Reference

Architecture documentation for the ObservabilityCard() function in vercel.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ ObservabilityCard() — ui Function Reference

Dependency Diagram

graph TD
  14ba3301_1746_b540_70fd_01c910e50ce1["ObservabilityCard()"]
  57afcab1_fc30_7f69_ecf5_50ea8da6ba44["vercel.tsx"]
  14ba3301_1746_b540_70fd_01c910e50ce1 -->|defined in| 57afcab1_fc30_7f69_ecf5_50ea8da6ba44
  style 14ba3301_1746_b540_70fd_01c910e50ce1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/vercel.tsx lines 662–700

function ObservabilityCard() {
  return (
    <Example title="Observability" className="items-center justify-center">
      <Card className="relative w-full max-w-md overflow-hidden pt-0">
        <div className="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color" />
        <img
          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Photo by mymind on Unsplash"
          title="Photo by mymind on Unsplash"
          className="relative z-20 aspect-video w-full object-cover brightness-60 grayscale"
        />
        <CardHeader>
          <CardTitle>Observability Plus is replacing Monitoring</CardTitle>
          <CardDescription>
            Switch to the improved way to explore your data, with natural
            language. Monitoring will no longer be available on the Pro plan in
            November, 2025
          </CardDescription>
        </CardHeader>
        <CardFooter>
          <Button>
            Create Query{" "}
            <IconPlaceholder
              lucide="PlusIcon"
              tabler="IconPlus"
              hugeicons="PlusSignIcon"
              phosphor="PlusIcon"
              remixicon="RiAddLine"
              data-icon="inline-end"
            />
          </Button>
          <Badge variant="secondary" className="ml-auto">
            Warning
          </Badge>
        </CardFooter>
      </Card>
    </Example>
  )
}