Subscription status card showing plan name, amount, renewal date, a usage bar, and manage or upgrade buttons.
Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Card18 } from "@/components/beste/component/card18";
<Card18
plan="Growth · Annual"
amount="$480"
period="/ year"
renews="Renews on May 1, 2026"
usage={64}
usageLabel="160 GB of 250 GB used"
/>The import and the props worth knowing about, in one place.
import { Card18 } from "@/components/beste/piece/card18";
<Card18
plan="Growth · Annual"
amount="$480"
period="/ year"
renews="Renews on May 1, 2026"
usage={64}
usageLabel="160 GB of 250 GB used"
/>Consumption plan card with a per-unit rate, a bubble of included volume, and an overage note below.
Package icon paired with an order ID, item count, a colored status dot, and an optional ETA.
Pricing tier with a headline amount, period, and a stack of check-marked features. Featured tier flips to primary.