PlanUsage

PlanUsage wraps UsageMeter in a card sized for billing/usage panels.

#Default usage

<PlanUsage
  description="Pro plan"
  meterProps={{ label: "API calls", limit: 10000, value: 7500 }}
  resetNote="Resets on May 31"
  title="API usage"
  upgradeAction={<Button size="sm">Upgrade</Button>}
/>

#Import

import { PlanUsage } from "@froggdesign/enter-ui-react";

#Accessibility

Inherits UsageMeter semantics (role="meter"). Provide a clear meterProps.label so the meter has an accessible name.

#API

• title, description: heading.
• meterProps: forwarded to the inner UsageMeter.
• resetNote: muted footer (e.g., "Resets on May 31").
• upgradeAction: trailing CTA slot.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.