update

apps/playground-web/src/app/connect/ui/page.tsx

@@ -0,0 +1,64 @@
+import { APIHeader } from "@/components/blocks/APIHeader";
+import {
+  AccountAddressBasic,
+  AccountAddressFormat,
+  AccountBalanceBasic,
+  AccountBalanceCustomToken,
+  AccountBalanceFormat,
+  AccountBalanceUSD,
+  AccountBalanceUSDFormatted,
+} from "@/components/headless-ui/account-examples";
+import ThirdwebProvider from "@/components/thirdweb-provider";
+import { metadataBase } from "@/lib/constants";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  metadataBase,
+  title: "Integrate Fiat & Cross-Chain Crypto Payments | thirdweb Pay",
+  description:
+    "The easiest way for users to transact in your app. Onramp users in clicks and generate revenue for each user transaction. Integrate for free.",
+};
+
+export default function Page() {
+  return (
+    <ThirdwebProvider>
+      <main className="container px-0 pb-20">
+        <APIHeader
+          title="Lorem ipsum"
+          description={
+            <>
+              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+              Accusantium reprehenderit corrupti sapiente nobis impedit, beatae
+              sit unde nihil, facilis vitae sunt. Aperiam sed vero repudiandae
+              nisi maiores repellat molestiae illum.
+            </>
+          }
+          docsLink="https://portal.thirdweb.com/react/v5/connecting-wallets/ui-components"
+          heroLink="/pay.png"
+        />
+
+        <section className="space-y-8">
+          <AccountAddressBasic />
+        </section>
+        <section className="space-y-8">
+          <AccountAddressFormat />
+        </section>
+        <section className="space-y-8">
+          <AccountBalanceBasic />
+        </section>
+        <section className="space-y-8">
+          <AccountBalanceCustomToken />
+        </section>
+        <section className="space-y-8">
+          <AccountBalanceFormat />
+        </section>
+        <section className="space-y-8">
+          <AccountBalanceUSD />
+        </section>
+        <section className="space-y-8">
+          <AccountBalanceUSDFormatted />
+        </section>
+      </main>
+    </ThirdwebProvider>
+  );
+}

apps/playground-web/src/app/navLinks.ts

@@ -85,4 +85,26 @@ export const navLinks: SidebarLink[] = [
     name: "Blockchain API",
     href: "/connect/blockchain-api",
   },
+  {
+    name: "Headless UI",
+    expanded: true,
+    links: [
+      {
+        name: "Account",
+        href: "/connect/ui",
+      },
+      {
+        name: "NFT",
+        href: "/connect/ui/nft",
+      },
+      {
+        name: "Token",
+        href: "/connect/ui/Token",
+      },
+      {
+        name: "Transaction",
+        href: "/connect/ui/transaction",
+      },
+    ],
+  },
 ];

apps/playground-web/src/app/page.tsx

@@ -60,6 +60,12 @@ function WalletsSection() {
           description="Performant, and reliable blockchain API"
           icon={CodeIcon}
         />
+        <ArticleCardIndex
+          href="/connect/ui"
+          title="Headless UI"
+          description="Modular & composable set of UIs for your web3 applications"
+          icon={CodeIcon}
+        />
       </div>
     </section>
   );