UsageCard() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ UsageCard() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/vercel.tsx lines 152–190

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"
                asChild
                className="px-0 group-hover/item-group:bg-transparent"
              >
                <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>
                </a>
              </Item>
            ))}
          </ItemGroup>
        </CardContent>
      </Card>
    </Example>
  )
}