Uai Blocks Order Status

Component

About

A compound fulfillment timeline with card, plain, and compact variants.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Uai Blocks Order Status to your project and fits it to your theme.

Code

How Uai Blocks Order Status is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"use client";

import {
  OrderStatus,
  OrderStatusAction,
  OrderStatusActions,
  OrderStatusBadge,
  OrderStatusDescription,
  OrderStatusDetail,
  OrderStatusDetails,
  OrderStatusHeader,
  OrderStatusProgress,
  OrderStatusStep,
  OrderStatusStepDescription,
  OrderStatusStepTitle,
  OrderStatusTitle,
  type OrderStatusVariant,
} from "@/components/ui/uai-order-status";

export function OrderStatusPreview({ variant = "card" }: { variant?: OrderStatusVariant }) {
  return (
    <div className={variant === "compact" ? "w-full max-w-[320px]" : "w-full max-w-[380px]"}>
      <OrderStatus variant={variant}>
        <OrderStatusHeader>
          <div className="min-w-0">
            <OrderStatusTitle>Arriving Friday</OrderStatusTitle>
            <OrderStatusDescription>Order #UAI-2048 · 2 items</OrderStatusDescription>
          </div>
          <OrderStatusBadge tone="progress">In transit</OrderStatusBadge>
        </OrderStatusHeader>
        <OrderStatusProgress>
          <OrderStatusStep status="complete">
            <OrderStatusStepTitle>Order confirmed</OrderStatusStepTitle>
            <OrderStatusStepDescription>Aug 15 · 9:42 AM</OrderStatusStepDescription>
          </OrderStatusStep>
          <OrderStatusStep status="complete">
            <OrderStatusStepTitle>Shipped</OrderStatusStepTitle>
            <OrderStatusStepDescription>Aug 17 · Northstar Parcel</OrderStatusStepDescription>
          </OrderStatusStep>
          <OrderStatusStep status="current">
            <OrderStatusStepTitle>In transit</OrderStatusStepTitle>
            <OrderStatusStepDescription>
              Departed the regional facility in Austin, TX
            </OrderStatusStepDescription>
          </OrderStatusStep>
          <OrderStatusStep status="upcoming">
            <OrderStatusStepTitle>Delivered</OrderStatusStepTitle>
            <OrderStatusStepDescription>Expected Aug 21 by 8:00 PM</OrderStatusStepDescription>
          </OrderStatusStep>
        </OrderStatusProgress>
        <OrderStatusDetails>
          <OrderStatusDetail label="Carrier">Northstar Parcel</OrderStatusDetail>
          <OrderStatusDetail label="Tracking">NSP-2048-1182</OrderStatusDetail>
        </OrderStatusDetails>
        <OrderStatusActions>
          <OrderStatusAction href="https://example.com/track" emphasis="primary">
            Track package
          </OrderStatusAction>
          <OrderStatusAction href="https://example.com/help">Get help</OrderStatusAction>
        </OrderStatusActions>
      </OrderStatus>
    </div>
  );
}

function SourceSpecimen(){return <OrderStatusPreview/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}