An e-commerce orders screen with stat tiles, status tabs that filter an orders table, payment and fulfillment chips and a timeline panel for the selected order.
Fernhill Goods · updated 2 minutes ago
38
12.4%15
6.1%126
8.7%5
14.2%| Order | Customer | Items | Total | Payment | Fulfillment | Date |
|---|---|---|---|---|---|---|
| #10482 | Maya Johnson | 2 | $58.50 | Paid | Unfulfilled | Nov 1 |
| #10481 | Tomas Reyes | 3 | $83.00 | Paid | Unfulfilled | Oct 31 |
| #10480 | Aisha Rahman | 1 | $44.50 | Pending | Unfulfilled | Oct 31 |
| #10479 | Lars Eriksson | 4 | $73.00 | Paid | Shipped | Oct 30 |
| #10478 | Hannah Cho | 4 | $62.00 | Paid | Shipped | Oct 30 |
| #10477 | Diego Alvarez | 2 | $68.00 | Paid | Delivered | Oct 28 |
| #10476 | Priya Menon | 5 | $96.00 | Refunded | Returned | Oct 27 |
| #10475 | Oliver Grant | 1 | $37.50 | Paid | Delivered | Oct 27 |
| #10474 | Sofia Marino | 3 | $46.50 | Failed | Unfulfilled | Oct 26 |
| #10473 | Kenji Watanabe | 4 | $94.00 | Paid | Delivered | Oct 25 |
| #10472 | Grace Lindqvist | 2 | $64.00 | Refunded | Returned | Oct 24 |
| #10471 | Marcus Bell | 2 | $54.50 | Paid | Delivered | Oct 24 |
npx shadcn@latest add https://hyperblur.dev/r/orders-dashboard.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/orders-dashboard.tsx.
import { OrdersDashboard } from "@/components/hyperblur/orders-dashboard"
<OrdersDashboard store="Fernhill Goods" defaultTab="all" />| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#2f7bff" | Accent color for the selected row, tabs, timeline, active nav item and focus rings. |
| brand | string | "Parcel" | Product name shown at the top of the sidebar. |
| store | string | "Fernhill Goods" | Store name shown in the breadcrumb, subtitle and sidebar. |
| user | string | "Nora Whitfield" | Name used for the avatar initials in the top bar. |
| orders | Order[] | Orders to list. Each has id, customer, email, city, items (name, qty, price), payment, fulfillment, day and time. Defaults to 12 sample orders. | |
| tab | "all" | "unfulfilled" | "shipped" | "returns" | Controlled tab. Pair with onTabChange. | |
| defaultTab | "all" | "unfulfilled" | "shipped" | "returns" | "all" | Initial tab when uncontrolled. |
| onTabChange | (tab: OrdersTab) => void | Called when the active tab changes. | |
| onOrderSelect | (order: Order) => void | Called when a row is selected. |