UsageCard() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ UsageCard() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/vercel.tsx lines 152–188

function UsageCard() {
  return (
    <Example title="Usage" className="items-center">
      <Card className="w-full max-w-sm gap-4">
        <CardHeader>
          <CardTitle className="px-1 text-sm">
            5 days remaining in cycle
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ItemGroup className="gap-0">
            {items.map((item) => (
              <Item
                key={item.name}
                size="xs"
                className="px-0 group-hover/item-group:bg-transparent"
                render={<a href="#" />}
              >
                <ItemMedia variant="icon" className="text-primary">
                  <CircularGauge percentage={item.percentage} />
                </ItemMedia>
                <ItemContent className="inline-block truncate">
                  <ItemTitle className="inline">{item.name}</ItemTitle>
                </ItemContent>
                <ItemActions>
                  <span className="text-muted-foreground font-mono text-xs font-medium tabular-nums">
                    {item.value}
                  </span>
                </ItemActions>
              </Item>
            ))}
          </ItemGroup>
        </CardContent>
      </Card>
    </Example>
  )
}