From 19b4037911ab3830fed57c10e06f1e4d3ff3279c Mon Sep 17 00:00:00 2001 From: Rabi Shanker Guha Date: Thu, 5 Mar 2026 12:29:21 +0530 Subject: [PATCH 1/5] CSS Cleanups --- .../(home)/components/BuildChatSection.tsx | 9 +- docs/app/docs/chat/page.tsx | 115 ++---- docs/app/docs/openui-lang/page.tsx | 90 +--- docs/app/global.css | 21 + docs/app/og/docs/[...slug]/route.tsx | 4 +- docs/components/button.tsx | 2 +- docs/components/docs-navbar.tsx | 76 ++-- docs/components/docs-route-layout.tsx | 1 + .../overview-components/code-block.tsx | 6 +- .../overview-components/feature-card.tsx | 85 ++++ docs/components/overview-components/index.ts | 1 + .../overview-components/inline-button.tsx | 4 +- .../overview-components/overview-page.tsx | 140 ++----- .../overview-components/separator.tsx | 2 +- .../overview-components/simple-card.tsx | 2 +- docs/components/overview-components/tabs.tsx | 4 +- docs/components/theme-toggle.tsx | 45 ++ docs/lib/layout.shared.tsx | 1 - docs/package.json | 1 + .../design-system/styles/variables/colors.css | 8 +- packages/react-ui/src/cssUtils.scss | 385 ------------------ pnpm-lock.yaml | 3 + 22 files changed, 323 insertions(+), 682 deletions(-) create mode 100644 docs/components/overview-components/feature-card.tsx create mode 100644 docs/components/theme-toggle.tsx delete mode 100644 packages/react-ui/src/cssUtils.scss diff --git a/docs/app/(home)/components/BuildChatSection.tsx b/docs/app/(home)/components/BuildChatSection.tsx index ebdb185e6..cb23a6987 100644 --- a/docs/app/(home)/components/BuildChatSection.tsx +++ b/docs/app/(home)/components/BuildChatSection.tsx @@ -1,8 +1,8 @@ "use client"; import { useEffect, useRef, useState } from "react"; - -const dashboardImg = "/images/home/d67b5e94653944c1d0d4998c6b169c37f98060ad.png"; +import Image from "next/image"; +import dashboardImg from "/public/images/home/d67b5e94653944c1d0d4998c6b169c37f98060ad.png"; import { CopyIcon } from "./shared"; // --------------------------------------------------------------------------- @@ -94,10 +94,11 @@ function CtaButton() { function DashboardIllustration() { return ( - AI chat dashboard illustration ); } diff --git a/docs/app/docs/chat/page.tsx b/docs/app/docs/chat/page.tsx index 99d972f66..85f08d501 100644 --- a/docs/app/docs/chat/page.tsx +++ b/docs/app/docs/chat/page.tsx @@ -1,6 +1,7 @@ import { Button } from "@/components/button"; import { HeroBadge } from "@/components/hero-badge"; -import { Card, Cards } from "fumadocs-ui/components/card"; +import { FeatureCard, FeatureCards } from "@/components/overview-components"; +import { CodeBlock } from "@/components/overview-components"; import { Code2, Database, @@ -20,6 +21,26 @@ export const metadata = { "Production-ready chat UI for AI agents. Drop-in layouts, streaming, and state management.", }; +const headlessCode = `import { useChat } from '@openuidev/react'; + +function CustomChat() { + const { messages, append, isLoading } = useChat(); + + return ( +
+ {messages.map(m => ( +
+ {m.content} +
+ ))} + + append(e.target.value)} + /> +
+ ); +}`; + export default function ChatOverviewPage() { return (
@@ -47,32 +68,15 @@ export default function ChatOverviewPage() { {/* --- Layouts Showcase --- */}
- -

- Batteries-Included Layouts -

+ +

Batteries-Included Layouts

- - } - title="Copilot" - description="A sidebar assistant that lives alongside your main application content." - href="/docs/chat/copilot" - /> - } - title="Full Screen" - description="A standalone, immersive chat page similar to ChatGPT or Claude." - href="/docs/chat/fullscreen" - /> - } - title="Bottom Tray" - description="A floating support-style widget that expands from the bottom corner." - href="/docs/chat/bottom-tray" - /> - + + } title="Copilot" description="A sidebar assistant that lives alongside your main application content." href="/docs/chat/copilot" /> + } title="Full Screen" description="A standalone, immersive chat page similar to ChatGPT or Claude." href="/docs/chat/fullscreen" /> + } title="Bottom Tray" description="A floating support-style widget that expands from the bottom corner." href="/docs/chat/bottom-tray" /> +
{/* --- Headless / Features Split --- */} @@ -80,34 +84,22 @@ export default function ChatOverviewPage() { {/* Left: Core Features */}
- -

Core Capabilities

+ +

Core Capabilities

- - } - title="Streaming Native" - description="Handles text deltas, optimistic updates, and loading states automatically." - /> - } - title="Thread Persistence" - description="Built-in support for saving and loading conversation history via simple API contracts." - /> - } - title="Theming" - description="Customize every color, radius, and font using CSS variables or Tailwind." - /> - + + } title="Streaming Native" description="Handles text deltas, optimistic updates, and loading states automatically." /> + } title="Thread Persistence" description="Built-in support for saving and loading conversation history via simple API contracts." /> + } title="Theming" description="Customize every color, radius, and font using CSS variables or Tailwind." /> +
{/* Right: Headless Code Snippet */}
- -

Go Headless

+ +

Go Headless

@@ -115,36 +107,7 @@ export default function ChatOverviewPage() { state.

-
-
-
-
-
-
-
- 
-                {`import { useChat } from '@openuidev/react';
-
-function CustomChat() {
-  const { messages, append, isLoading } = useChat();
-
-  return (
-    

-      {messages.map(m => (
-        

-          {m.content}
-        

-      ))}
-
-       append(e.target.value)}
-      />
-    

-  );
-}`}
-
-
-
+
{/* Introduction */}
-
-
- +
+
+

@@ -122,36 +124,11 @@ export default function OpenUILangOverview() { Key Features

-
- - -

Streaming Native

-

- Line-oriented syntax means the UI renders line-by-line. No waiting - for valid JSON closing braces. -

- - - - -

Token Efficient

-

- Uses ~40% fewer tokens than equivalent JSON structures, - significantly reducing inference cost and latency. -

- - - - -

- Hallucination Resistant -

-

- Strictly typed against your Zod schemas. If the generated code - does not match your definition, it does not render. -

- -
+ + } title="Streaming Native" description="Line-oriented syntax means the UI renders line-by-line. No waiting for valid JSON closing braces." /> + } title="Token Efficient" description="Uses ~40% fewer tokens than equivalent JSON structures, significantly reducing inference cost and latency." /> + } title="Hallucination Resistant" description="Strictly typed against your Zod schemas. If the generated code does not match your definition, it does not render." /> +
@@ -258,8 +235,8 @@ export default function OpenUILangOverview() {
-
- +
+ {activeStep + 1}
@@ -307,44 +284,11 @@ export default function OpenUILangOverview() { Real-world applications where OpenUI Lang excels

-
- -
- -
-

- Analytics Dashboards -

-

- Generate complex data visualizations and metric cards from natural - language queries. -

- - - -
- -
-

- AI Chat Interfaces -

-

- Stream UI components in real-time as the LLM generates responses. -

- - - -
- -
-

- Dynamic Forms -

-

- Build adaptive forms that change based on user input or context. -

- -
+ + } title="Analytics Dashboards" description="Generate complex data visualizations and metric cards from natural language queries." /> + } title="AI Chat Interfaces" description="Stream UI components in real-time as the LLM generates responses." /> + } title="Dynamic Forms" description="Build adaptive forms that change based on user input or context." /> +
); diff --git a/docs/app/global.css b/docs/app/global.css index 23b9056c7..e64011f09 100644 --- a/docs/app/global.css +++ b/docs/app/global.css @@ -13,6 +13,27 @@ .light { --color-fd-background: hsl(0, 0%, 100%); + --color-doc-surface: #f8f8fa; + --color-doc-surface-raised: #ffffff; + --color-doc-surface-sunken: #f0f0f4; + --color-doc-border: rgba(0, 0, 0, 0.08); + --color-doc-code-bg: #f4f4f8; +} + +.dark { + --color-fd-background: #0b0b0f; + --color-fd-foreground: #e2e1e6; + --color-fd-muted: #141418; + --color-fd-popover: #131317; + --color-fd-card: #111115; + --color-fd-secondary: #141418; + + /* Doc component surface tokens */ + --color-doc-surface: #111115; + --color-doc-surface-raised: #16161b; + --color-doc-surface-sunken: #0e0e12; + --color-doc-border: rgba(255, 255, 255, 0.08); + --color-doc-code-bg: #0d0d11; } #nd-docs-layout { diff --git a/docs/app/og/docs/[...slug]/route.tsx b/docs/app/og/docs/[...slug]/route.tsx index 173dc144b..1d314da29 100644 --- a/docs/app/og/docs/[...slug]/route.tsx +++ b/docs/app/og/docs/[...slug]/route.tsx @@ -11,11 +11,11 @@ export async function GET(_req: Request, { params }: RouteContext<'/og/docs/[... if (!page) notFound(); return new ImageResponse( - , + , { width: 1200, height: 630, - format: 'webp', + format: "webp", }, ); } diff --git a/docs/components/button.tsx b/docs/components/button.tsx index ab73bc301..d614acb82 100644 --- a/docs/components/button.tsx +++ b/docs/components/button.tsx @@ -14,7 +14,7 @@ export function Button({ href, text, size = "lg", variant = "primary" }: ButtonP const variantClasses = variant === "primary" ? "text-white bg-slate-900 rounded-lg hover:bg-slate-800 transition-colors dark:bg-white dark:text-slate-900 dark:hover:bg-slate-100" - : "text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors dark:bg-slate-900 dark:text-slate-300 dark:border-slate-800 dark:hover:bg-slate-800"; + : "text-slate-700 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors dark:bg-[var(--color-doc-surface)] dark:text-slate-300 dark:border-[var(--color-doc-border)] dark:hover:bg-[var(--color-doc-surface-raised)]"; return ( { - setIsMac(navigator.platform.toUpperCase().includes('MAC')); - }, []); + const [isMac, setIsMac] = useState( + () => typeof navigator !== "undefined" && /mac/i.test(navigator.userAgent), + ); useEffect(() => { const handler = (e: KeyboardEvent) => { - if ((e.metaKey || e.ctrlKey) && e.key === 'k') { + if ((e.metaKey || e.ctrlKey) && e.key === "k") { e.preventDefault(); setOpenSearch(true); } }; - window.addEventListener('keydown', handler); - return () => window.removeEventListener('keydown', handler); + window.addEventListener("keydown", handler); + return () => window.removeEventListener("keydown", handler); }, [setOpenSearch]); return ( @@ -41,13 +40,24 @@ function SearchBar() { aria-label="Search documentation" className="flex items-center gap-2.5 h-9 pl-3.5 pr-2.5 rounded-lg border border-fd-border bg-fd-background text-fd-muted-foreground cursor-pointer w-64 hover:border-fd-ring transition-colors" > - + Search... - {isMac ? '⌘' : 'Ctrl'}K + {isMac ? "⌘" : "Ctrl"} + K ); @@ -55,6 +65,7 @@ function SearchBar() { export function DocsNavbar({ showSidebarToggle = false }: { showSidebarToggle?: boolean }) { const pathname = usePathname(); + const [isThesysHovered, setIsThesysHovered] = useState(false); return (
@@ -62,7 +73,16 @@ export function DocsNavbar({ showSidebarToggle = false }: { showSidebarToggle?:
{showSidebarToggle && ( - + @@ -72,6 +92,8 @@ export function DocsNavbar({ showSidebarToggle = false }: { showSidebarToggle?: {/* Brand */}
+ + |
@@ -103,12 +125,14 @@ export function DocsNavbar({ showSidebarToggle = false }: { showSidebarToggle?: + {/* Theme toggle */} +
{/* Bottom row: tabs */} -
+