Order Status

#BES-20481· 3 items
Shipped· Arrives Fri
About this piece

Order Status

Package icon paired with an order ID, item count, a colored status dot, and an optional ETA.

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

#BES-20481· 3 items
Shipped· Arrives Fri
Usage
import { Card9 } from "@/components/beste/component/card9";

<Card9
  orderId="BES-20481"
  items={3}
  status="shipped"
  eta="Arrives Fri"
/>

Usage

The import and the props worth knowing about, in one place.

import { Card9 } from "@/components/beste/piece/card9";

<Card9
  orderId="BES-20481"
  items={3}
  status="shipped"
  eta="Arrives Fri"
/>

More Card pieces

View all Card
Monthly revenue
$12,459+24%

Metric Card

KPI label, a bold value, and a signed percentage trend badge.

Growth · AnnualRenews on May 1, 2026
$480/ year
160 GB of 250 GB used

Current Plan

Subscription status card showing plan name, amount, renewal date, a usage bar, and manage or upgrade buttons.

12
12 unread

Notification Bell

Bell icon with a rose count badge and an optional label. Counts over 99 clamp to 99+.

Growth
$48/ mo
For teams growing past launch.
Unlimited editors
250 GB storage
Realtime analytics

Featured Tier

Highlighted plan with a gradient border, Most popular badge on top, and a filled gradient CTA button.

Andrea Kim
Andrea KimStaff engineerPlatform · Beste

Team Member

Directory row with an avatar carrying a presence dot, name, title, department, and a message button.

Review Q2 roadmap with design team
HighDue Tomorrow

Task Card

Checkable todo row with priority chip and due caption. Done tasks strike through.