For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
30
Sponsor

Order Confirm

PreviousNext

Order confirmation with product image, delivery info, and confirm action.

Air Force 1 '07

Air Force 1 '07

Qty: 1

$299.00

Free shipping

Jan 20, 2024

Installation

$ pnpm dlx shadcn@latest add @mcpcn/order-confirm

Usage

import {
  OrderConfirm,
  OrderConfirmContent,
  OrderConfirmFooter,
  OrderConfirmProduct,
} from "@/components/ui/order-confirm";
<OrderConfirm>
  <OrderConfirmContent>
    <OrderConfirmProduct />
    <div className="border-t" />
    <OrderConfirmFooter />
  </OrderConfirmContent>
</OrderConfirm>

Composition

Use the following composition to build an OrderConfirm:

OrderConfirm
├── OrderConfirmAction
├── OrderConfirmContent
├── OrderConfirmDelivery
├── OrderConfirmFooter
└── OrderConfirmProduct

OpenUI Integration

Install the OpenUI React packages.

pnpm add @openuidev/react-lang zod

Add OrderConfirm to a component library and map it to the installed component.

import { createLibrary, defineComponent } from "@openuidev/react-lang";
import { z } from "zod/v4";
 
import {
  OrderConfirm,
  OrderConfirmContent,
  OrderConfirmFooter,
  OrderConfirmProduct,
} from "@/components/ui/order-confirm";
 
const OpenUIOrderConfirm = defineComponent({
  name: "OrderConfirm",
  description:
    "Order confirmation with product image, delivery info, and confirm action.",
  props: z.object({}),
  component: () => (
    <OrderConfirm>
      <OrderConfirmContent>
        <OrderConfirmProduct />
        <div className="border-t" />
        <OrderConfirmFooter />
      </OrderConfirmContent>
    </OrderConfirm>
  ),
});
 
export const order_confirmLibrary = createLibrary({
  root: "OrderConfirm",
  components: [OpenUIOrderConfirm],
});

For richer generated compositions, define the child primitives separately and connect them with .ref fields. See Defining Components in the OpenUI documentation.

json-render Integration

Install the json-render React packages.

pnpm add @json-render/core @json-render/react zod

Add OrderConfirm to a component catalog and map it to the installed component.

import { defineCatalog } from "@json-render/core";
import { defineRegistry } from "@json-render/react";
import { schema } from "@json-render/react/schema";
import { z } from "zod";
 
import {
  OrderConfirm,
  OrderConfirmContent,
  OrderConfirmFooter,
  OrderConfirmProduct,
} from "@/components/ui/order-confirm";
 
export const catalog = defineCatalog(schema, {
  components: {
    OrderConfirm: {
      props: z.object({}),
      description:
        "Order confirmation with product image, delivery info, and confirm action.",
    },
  },
});
 
export const { registry } = defineRegistry(catalog, {
  components: {
    OrderConfirm: () => (
      <OrderConfirm>
        <OrderConfirmContent>
          <OrderConfirmProduct />
          <div className="border-t" />
          <OrderConfirmFooter />
        </OrderConfirmContent>
      </OrderConfirm>
    ),
  },
});

Use catalog.prompt() to constrain model output, then render the generated spec with the json-render React Renderer. See the json-render Quick Start for the provider and streaming setup.

API Reference

See the Base UI documentation for more information.