MDTechLabs · mijinummi · Jan 23, 2026 · Jan 23, 2026 · Jan 23, 2026 · Jan 23, 2026
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
@@ -1,26 +1,19 @@
+/**
+ * Import Tailwind CSS
+ */
 @import "tailwindcss";
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
+/**
+ * Import BridgeWise UI Components theme variables
+ */
+@import "@bridgewise/ui-components/styles/globals.css";
 
+/**
+ * Application-specific styles
+ * Use BridgeWise theme variables for consistency
+ */
 body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  background: var(--bw-colors-background-primary);
+  color: var(--bw-colors-foreground-primary);
+  font-family: var(--bw-typography-font-family-sans);
 }
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
+import { ThemeProvider, ThemeScript, TransactionProvider } from "@bridgewise/ui-components";
 import "./globals.css";
 
 const geistSans = Geist({
@@ -24,10 +25,17 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
+      <head>
+        <ThemeScript />
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <ThemeProvider defaultMode="system">
+          <TransactionProvider>
+            {children}
+          </TransactionProvider>
+        </ThemeProvider>
       </body>
     </html>
   );

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -2,7 +2,7 @@
 'use client';
 
 import { useEffect } from 'react';
-import { TransactionHeartbeat, TransactionProvider, useTransaction } from '../components/ui-lib';
+import { TransactionHeartbeat, useTransaction } from '@bridgewise/ui-components';
 
 function TransactionDemo() {
   const { state, updateState, startTransaction, clearState } = useTransaction();
@@ -64,9 +64,5 @@ function TransactionDemo() {
 }
 
 export default function Home() {
-  return (
-    <TransactionProvider>
-      <TransactionDemo />
-    </TransactionProvider>
-  );
+  return <TransactionDemo />;
 }
diff --git a/examples/custom-theme.example.tsx b/examples/custom-theme.example.tsx
@@ -0,0 +1,80 @@
+/**
+ * Custom Theme Configuration Example
+ * Shows how external developers can customize the BridgeWise theme
+ */
+
+import { ThemeProvider } from '@bridgewise/ui-components/theme';
+import type { Theme, DeepPartial } from '@bridgewise/ui-components';
+
+/**
+ * Example: Custom brand colors
+ */
+const customTheme: DeepPartial<Theme> = {
+  colors: {
+    background: {
+      primary: '#fafafa',
+      secondary: '#f4f4f5',
+    },
+    foreground: {
+      primary: '#18181b',
+      link: '#3b82f6',
+    },
+    transaction: {
+      background: '#ffffff',
+      border: '#e4e4e7',
+      progressBar: {
+        success: '#22c55e',
+        error: '#ef4444',
+        pending: '#3b82f6',
+      },
+    },
+  },
+  spacing: {
+    xs: '0.5rem',
+    sm: '0.75rem',
+    md: '1.25rem',
+  },
+  typography: {
+    fontFamily: {
+      sans: 'Inter, system-ui, sans-serif',
+    },
+  },
+};
+
+/**
+ * Example: Dark-first theme
+ */
+const darkFirstTheme: DeepPartial<Theme> = {
+  colors: {
+    background: {
+      primary: '#0a0a0a',
+      secondary: '#171717',
+    },
+    foreground: {
+      primary: '#ffffff',
+      secondary: '#a3a3a3',
+    },
+  },
+};
+
+/**
+ * Usage in your app
+ */
+export function App() {
+  return (
+    <ThemeProvider theme={customTheme} defaultMode="system">
+      {/* Your application components */}
+    </ThemeProvider>
+  );
+}
+
+/**
+ * Force dark mode
+ */
+export function DarkApp() {
+  return (
+    <ThemeProvider theme={darkFirstTheme} defaultMode="dark">
+      {/* Your application components */}
+    </ThemeProvider>
+  );
+}
diff --git a/examples/headless-component.example.tsx b/examples/headless-component.example.tsx
@@ -0,0 +1,110 @@
+/**
+ * Headless Component Example
+ * Shows how to use the headless TransactionHeartbeat with custom styling
+ */
+
+import { TransactionHeartbeatHeadless } from '@bridgewise/ui-components/headless';
+import { TransactionProvider } from '@bridgewise/ui-components';
+
+/**
+ * Example 1: Minimal custom notification
+ */
+export function MinimalHeartbeat() {
+  return (
+    <TransactionHeartbeatHeadless>
+      {({ state, clearState, isSuccess, isFailed, isPending }) => (
+        <div className="fixed top-4 right-4 p-4 bg-white shadow-lg rounded-lg">
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <h3 className="font-semibold">
+                {isSuccess ? '✅ Done!' : isFailed ? '❌ Failed' : '⏳ Processing...'}
+              </h3>
+              <p className="text-sm text-gray-600">{state.step}</p>
+            </div>
+            <button onClick={clearState} className="text-gray-400 hover:text-gray-600">
+              ✕
+            </button>
+          </div>
+          <progress value={state.progress} max={100} className="w-full mt-2" />
+        </div>
+      )}
+    </TransactionHeartbeatHeadless>
+  );
+}
+
+/**
+ * Example 2: Toast-style notification
+ */
+export function ToastHeartbeat() {
+  return (
+    <TransactionHeartbeatHeadless>
+      {({ state, clearState, isSuccess, isFailed }) => {
+        const bgColor = isSuccess ? 'bg-green-50' : isFailed ? 'bg-red-50' : 'bg-blue-50';
+        const textColor = isSuccess ? 'text-green-900' : isFailed ? 'text-red-900' : 'text-blue-900';
+
+        return (
+          <div className={`fixed bottom-4 left-4 p-4 ${bgColor} ${textColor} rounded-lg shadow-lg max-w-sm`}>
+            <div className="flex items-start gap-3">
+              <span className="text-2xl">
+                {isSuccess ? '🎉' : isFailed ? '💔' : '🔄'}
+              </span>
+              <div className="flex-1">
+                <p className="font-medium">{state.step}</p>
+                <div className="mt-2 bg-white/50 rounded-full h-2">
+                  <div
+                    className="h-full bg-current rounded-full transition-all"
+                    style={{ width: `${state.progress}%` }}
+                  />
+                </div>
+              </div>
+              <button onClick={clearState} className="hover:opacity-70">
+                ✕
+              </button>
+            </div>
+          </div>
+        );
+      }}
+    </TransactionHeartbeatHeadless>
+  );
+}
+
+/**
+ * Example 3: Compact progress bar
+ */
+export function CompactHeartbeat() {
+  return (
+    <TransactionHeartbeatHeadless>
+      {({ state, isSuccess, isFailed }) => {
+        const color = isSuccess ? '#22c55e' : isFailed ? '#ef4444' : '#3b82f6';
+
+        return (
+          <div
+            className="fixed top-0 left-0 right-0 h-1 transition-all"
+            style={{
+              backgroundColor: color,
+              width: `${state.progress}%`,
+              opacity: state.progress === 100 ? 0 : 1,
+            }}
+          />
+        );
+      }}
+    </TransactionHeartbeatHeadless>
+  );
+}
+
+/**
+ * Complete app example
+ */
+export function App() {
+  return (
+    <TransactionProvider>
+      <div>
+        <h1>My Application</h1>
+        {/* Choose your style */}
+        <MinimalHeartbeat />
+        {/* or <ToastHeartbeat /> */}
+        {/* or <CompactHeartbeat /> */}
+      </div>
+    </TransactionProvider>
+  );
+}