))}
@@ -88,7 +70,7 @@ export function FeatureList({ items }: FeatureListProps) {
{items.map((item, index) => (
-
+
{index < lastItemIndex &&
}
))}
diff --git a/docs/app/(home)/components/TweetWall/TweetWall.tsx b/docs/app/(home)/components/TweetWall/TweetWall.tsx
index 5e5ba4a0b..6f359c6e0 100644
--- a/docs/app/(home)/components/TweetWall/TweetWall.tsx
+++ b/docs/app/(home)/components/TweetWall/TweetWall.tsx
@@ -72,9 +72,8 @@ export function TweetWall() {
const columns = splitIntoColumns(HOME_TWEETS, columnCount);
useEffect(() => {
- if (window.twttr?.widgets?.createTweet) {
- setScriptReady(true);
- }
+ if (!window.twttr?.widgets?.createTweet) return;
+ queueMicrotask(() => setScriptReady(true));
}, []);
useEffect(() => {
@@ -91,11 +90,11 @@ export function TweetWall() {
);
if (!shouldRehydrate) {
- setIsWallReady(true);
+ queueMicrotask(() => setIsWallReady(true));
return;
}
- setIsWallReady(false);
+ queueMicrotask(() => setIsWallReady(false));
async function hydrateEmbeds() {
await Promise.allSettled(
diff --git a/docs/app/(home)/page.module.css b/docs/app/(home)/page.module.css
index 7535425e6..e7d6e4886 100644
--- a/docs/app/(home)/page.module.css
+++ b/docs/app/(home)/page.module.css
@@ -24,10 +24,18 @@
background: var(--openui-background);
}
+.contentShellTight {
+ gap: 4rem;
+}
+
@media (min-width: 768px) {
.contentShell {
gap: 15rem;
}
+
+ .contentShellTight {
+ gap: 6rem;
+ }
}
@media (min-width: 1024px) {
diff --git a/docs/app/(home)/sections/FeaturesSection/FeaturesSection.module.css b/docs/app/(home)/sections/FeaturesSection/FeaturesSection.module.css
index d424dc0e7..548b639ee 100644
--- a/docs/app/(home)/sections/FeaturesSection/FeaturesSection.module.css
+++ b/docs/app/(home)/sections/FeaturesSection/FeaturesSection.module.css
@@ -1,6 +1,6 @@
.section {
width: 100%;
- padding-inline: 1.25rem;
+ padding: 2rem 1.25rem;
}
.container {
@@ -57,7 +57,7 @@
@media (min-width: 1024px) {
.section {
- padding-inline: 2rem;
+ padding: 3rem 2rem;
}
.ctaWrap {
diff --git a/docs/app/(home)/sections/FeaturesSection/FeaturesSection.tsx b/docs/app/(home)/sections/FeaturesSection/FeaturesSection.tsx
index d3c7b9724..906bf1d30 100644
--- a/docs/app/(home)/sections/FeaturesSection/FeaturesSection.tsx
+++ b/docs/app/(home)/sections/FeaturesSection/FeaturesSection.tsx
@@ -1,74 +1,139 @@
"use client";
+import {
+ Browsers,
+ Eye,
+ MagicWand,
+ PushPin,
+ SlidersHorizontal,
+ SquaresFour,
+} from "@phosphor-icons/react";
import svgPaths from "@/imports/svg-urruvoh2be";
import { PillLink } from "../../components/Button/Button";
import { FeatureList, type FeatureListItem } from "../../components/FeatureList/FeatureList";
import styles from "./FeaturesSection.module.css";
-// ---------------------------------------------------------------------------
-// Data
-// ---------------------------------------------------------------------------
+const PHOSPHOR_ICON_SIZE = 18;
-const FEATURES: FeatureListItem[] = [
+function SvgPathIcon({ path, index }: { path: string; index: number }) {
+ const clipId = `clip_feat_${index}`;
+ return (
+
+ );
+}
+
+const DEFAULT_FEATURES: FeatureListItem[] = [
{
title: "Performance Optimized",
description: "3x faster rendering than json-render",
- iconPath: svgPaths.p7658f00,
+ icon:
,
},
{
title: "Token efficient",
description: "Up to 67.1% lesser tokens than json-render",
- iconPath: svgPaths.p2a8ddd80,
+ icon:
,
},
{
title: "Live data",
description: "Query your tools and MCP servers at runtime",
- iconPath: svgPaths.p10e86100,
+ icon:
,
},
{
title: "Works across platforms",
description: "React, React Native, Vue, etc",
- iconPath: svgPaths.p2cbb5d00,
+ icon:
,
},
{
title: "Native Streaming",
description: "UI renders in real time",
- iconPath: svgPaths.p33780400,
+ icon:
,
},
{
title: "Interactive",
description: "Reactive state, inputs, and tool-connected actions",
- iconPath: svgPaths.p17c7f700,
+ icon:
,
},
{
title: "Safe by Default",
description: "No arbitrary code execution",
- iconPath: svgPaths.p16eec200,
+ icon:
,
},
];
-// ---------------------------------------------------------------------------
-// Main component
-// ---------------------------------------------------------------------------
+export const OPENCLAW_FEATURES: FeatureListItem[] = [
+ {
+ title: "Generative UI",
+ description: "Build apps, dashboards, and artifacts on demand",
+ icon:
,
+ },
+ {
+ title: "Persistent apps",
+ description: "Apps stay in place and refresh with live data automatically",
+ icon:
,
+ },
+ {
+ title: "Structured workspace",
+ description: "Agents, sessions, artifacts, and apps in one organized space",
+ icon:
,
+ },
+ {
+ title: "Full visibility",
+ description: "Inspect tool calls, context, and agent actions in real time",
+ icon:
,
+ },
+ {
+ title: "Direct control",
+ description: "Permissions, schedules, and execution from one interface",
+ icon:
,
+ },
+ {
+ title: "Elegant interface",
+ description: "Built for clarity with responsive layouts and themes",
+ icon:
,
+ },
+];
-export function FeaturesSection() {
+export function FeaturesSection({
+ features = DEFAULT_FEATURES,
+ showCta = true,
+}: {
+ features?: FeatureListItem[];
+ showCta?: boolean;
+} = {}) {
return (
-
+
- {/* CTA button */}
-
-
-
- Detailed comparison
- View Comparison
-
-
-
+ {showCta && (
+
+
+
+ Detailed comparison
+ View Comparison
+
+
+
+ )}
);
diff --git a/docs/app/(home)/sections/HeroSection/HeroSection.module.css b/docs/app/(home)/sections/HeroSection/HeroSection.module.css
index e0fc7d729..a7b91d2ef 100644
--- a/docs/app/(home)/sections/HeroSection/HeroSection.module.css
+++ b/docs/app/(home)/sections/HeroSection/HeroSection.module.css
@@ -18,12 +18,26 @@
letter-spacing: -3px;
}
+.desktopTitleCompact {
+ font-size: 6rem;
+ letter-spacing: -2px;
+}
+
+.titleAccent {
+ color: #9ca3af;
+}
+
.mobileTitle {
text-align: center;
font-size: clamp(96px, 25vw, 120px);
letter-spacing: -2px;
}
+.mobileTitleCompact {
+ font-size: clamp(40px, 10vw, 52px);
+ letter-spacing: -1px;
+}
+
.desktopSubtitle,
.mobileSubtitle,
.tagline {
@@ -55,6 +69,11 @@
line-height: 1.4;
}
+.taglineCompact {
+ font-size: 16px;
+ color: var(--openui-text-neutral-primary);
+}
+
.taglineBreak {
display: none;
}
@@ -99,6 +118,41 @@
/* ── NPM button ── */
+.npmButtonWrapper {
+ position: relative;
+ z-index: 5;
+ display: inline-block;
+ width: max-content;
+ max-width: 100%;
+}
+
+.copyToast {
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ z-index: 50;
+ margin-top: 0.375rem;
+ padding: 0.3125rem 0.75rem;
+ border-radius: var(--openui-radius-full);
+ background: rgba(0, 0, 0, 0.06);
+ color: var(--openui-text-neutral-secondary);
+ font-family: "Inter", sans-serif;
+ font-size: 0.75rem;
+ line-height: 1;
+ white-space: nowrap;
+ pointer-events: none;
+ opacity: 0;
+ transform: translate(-50%, -6px);
+ transition:
+ opacity 0.2s ease,
+ transform 0.2s ease;
+}
+
+.copyToastVisible {
+ opacity: 1;
+ transform: translate(-50%, 0);
+}
+
.npmButton {
display: flex;
height: 3rem;
@@ -342,6 +396,42 @@
margin-top: 1rem;
}
+.desktopCtaStackShadowRoom {
+ padding-bottom: 0.75rem;
+}
+
+.subtitleLogo {
+ display: block;
+ margin: 0.75rem auto 0;
+ width: 64px;
+ height: 64px;
+}
+
+.subtitleLogoTile {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 1.3em;
+ height: 1.3em;
+ margin: 0 0.3em 0 0.15em;
+ padding: 0.2em;
+ border-radius: 0.35em;
+ background: #ffffff;
+ border: 1px solid rgba(15, 23, 42, 0.08);
+ box-shadow:
+ 0 1px 2px rgba(15, 23, 42, 0.06),
+ 0 4px 8px rgba(15, 23, 42, 0.05);
+ vertical-align: middle;
+ position: relative;
+ top: -0.15em;
+}
+
+.subtitleLogoTile img {
+ width: 100%;
+ height: 100%;
+ display: block;
+}
+
/* ── Mobile hero layout ── */
.mobileHero {
@@ -379,7 +469,7 @@
align-items: center;
margin-top: 40px;
gap: 1rem;
- padding: 0.5rem 2.5rem 4rem;
+ padding: 0.5rem 2.5rem 1rem;
}
.mobileCtaButtonWidth {
@@ -408,6 +498,10 @@
max-width: 75rem;
}
+.previewFrameWide {
+ max-width: 130rem;
+}
+
.mobileIllustrationImage,
.previewImage {
display: block;
@@ -415,6 +509,12 @@
height: auto;
}
+.previewFrameWide .previewImage {
+ width: 118%;
+ margin-inline: -9%;
+ max-width: none;
+}
+
.previewSection {
width: 100%;
overflow: hidden;
@@ -422,6 +522,10 @@
padding-inline: 1rem;
}
+.previewSectionTight {
+ margin-top: 0.5rem;
+}
+
.previewDesktopOnly {
display: none;
width: 100%;
@@ -475,7 +579,6 @@
display: block;
position: relative;
width: 100%;
- overflow: hidden;
padding: 8rem 2rem 0;
}
@@ -499,7 +602,7 @@
.previewSection {
margin-top: 2.5rem;
- padding-inline: 2rem;
+ padding-inline: 1rem;
}
.previewDesktopOnly {
@@ -515,6 +618,10 @@
font-size: 28px;
}
+ .taglineCompact {
+ font-size: 18px;
+ }
+
.taglineBreak {
display: inline;
}
diff --git a/docs/app/(home)/sections/HeroSection/HeroSection.tsx b/docs/app/(home)/sections/HeroSection/HeroSection.tsx
index 4acac1b62..7bfd87232 100644
--- a/docs/app/(home)/sections/HeroSection/HeroSection.tsx
+++ b/docs/app/(home)/sections/HeroSection/HeroSection.tsx
@@ -3,9 +3,12 @@
import { GitHubIcon } from "@/components/brand-logo";
import { ArrowRight } from "lucide-react";
import Link from "next/link";
+import { useEffect, useRef, useState, type ReactNode } from "react";
import { ClipboardCommandButton, PillLink } from "../../components/Button/Button";
import styles from "./HeroSection.module.css";
+export const heroStyles = styles;
+
// CTAs
const primaryCTA = "npx @openuidev/cli@latest create";
const secondaryCTA = "Try Playground";
@@ -34,24 +37,58 @@ function TrailingArrow() {
);
}
-function NpmButton({ className = "" }: { className?: string }) {
+const COPY_TOAST_MS = 1800;
+
+export function NpmButton({ className = "", command }: { className?: string; command: string }) {
+ const [showToast, setShowToast] = useState(false);
+ const toastTimeoutRef = useRef
| null>(null);
+
+ useEffect(() => {
+ return () => {
+ if (toastTimeoutRef.current) {
+ clearTimeout(toastTimeoutRef.current);
+ }
+ };
+ }, []);
+
+ const handleCopyChange = (copied: boolean) => {
+ if (!copied) return;
+ setShowToast(true);
+ if (toastTimeoutRef.current) {
+ clearTimeout(toastTimeoutRef.current);
+ }
+ toastTimeoutRef.current = setTimeout(() => {
+ setShowToast(false);
+ }, COPY_TOAST_MS);
+ };
+
return (
-
- {primaryCTA}
-
-
- {primaryCTA}
-
- {primaryCTA}
+
+
+ {command}
+
+
+ {command}
+
+ {command}
+
-
-
+
+
+ Copied. Paste in your terminal to install.
+
+
-
-
OpenUI
-
The Open Standard for Generative UI
+ {showBanner &&
}
+
+ {title}
+
+
{subtitle}
-
-
-
+
+
+ {showPlaygroundButton && }
@@ -159,39 +218,82 @@ function DesktopHero() {
// Mobile hero
// ---------------------------------------------------------------------------
-function MobileHero({ theme }: { theme: HeroTheme }) {
- const mobileHeroImage = theme === "dark" ? MOBILE_HERO_IMAGE.dark : MOBILE_HERO_IMAGE.light;
+function MobileHero({
+ theme,
+ title,
+ subtitle,
+ command,
+ compact,
+ showBanner,
+ showPlaygroundButton,
+ showGitHubBanner,
+ mobileImageOverride,
+ mobileImageAlt,
+ mobileImageWidth,
+ mobileImageHeight,
+ mobileImageCropTopPercent = 0,
+}: {
+ theme: HeroTheme;
+ title: ReactNode;
+ subtitle: ReactNode;
+ command: string;
+ compact: boolean;
+ showBanner: boolean;
+ showPlaygroundButton: boolean;
+ showGitHubBanner: boolean;
+ mobileImageOverride?: string;
+ mobileImageAlt?: string;
+ mobileImageWidth?: number;
+ mobileImageHeight?: number;
+ mobileImageCropTopPercent?: number;
+}) {
+ const mobileHeroImage =
+ mobileImageOverride ?? (theme === "dark" ? MOBILE_HERO_IMAGE.dark : MOBILE_HERO_IMAGE.light);
+
+ const naturalWidth = mobileImageWidth ?? MOBILE_HERO_IMAGE.width;
+ const naturalHeight = mobileImageHeight ?? MOBILE_HERO_IMAGE.height;
+ const cropTop = Math.max(0, Math.min(100, mobileImageCropTopPercent));
+ const cropped = cropTop > 0;
+ const viewportStyle = cropped
+ ? { aspectRatio: `${naturalWidth} / ${naturalHeight * (1 - cropTop / 100)}` }
+ : undefined;
+ const imageStyle = cropped
+ ? ({ height: "100%", objectFit: "cover", objectPosition: "bottom" } as const)
+ : undefined;
return (
-
+ {showBanner &&
}
{/* Subtitle */}
-
The Open Standard for Generative UI
+
{subtitle}
{/* CTA buttons */}
-
-
-
+
+ {showPlaygroundButton && }
+ {showGitHubBanner && }
{/* Mobile hero image */}
-
+
+
-
+
-
- An open source toolkit to make your
- AI apps respond with your UI.
+
+ {children ?? (
+ <>
+ An open source toolkit to make your
+ AI apps respond with your UI.
+
+ )}
@@ -249,15 +375,85 @@ function Tagline() {
// Main export
// ---------------------------------------------------------------------------
-export function HeroSection() {
+export function HeroSection({
+ title = "OpenUI",
+ subtitle = "The Open Standard for Generative UI",
+ command = primaryCTA,
+ compact = false,
+ showBanner = true,
+ showPlaygroundButton = true,
+ desktopPreviewImage,
+ desktopPreviewImageAlt,
+ desktopPreviewImageWidth,
+ desktopPreviewImageHeight,
+ widePreview = false,
+ showTagline = true,
+ tagline,
+ taglineCompact = false,
+ showGitHubBanner = true,
+ mobilePreviewImage,
+ mobilePreviewImageAlt,
+ mobilePreviewImageWidth,
+ mobilePreviewImageHeight,
+ mobilePreviewImageCropTopPercent,
+}: {
+ title?: ReactNode;
+ subtitle?: ReactNode;
+ command?: string;
+ compact?: boolean;
+ showBanner?: boolean;
+ showPlaygroundButton?: boolean;
+ desktopPreviewImage?: string;
+ desktopPreviewImageAlt?: string;
+ desktopPreviewImageWidth?: number;
+ desktopPreviewImageHeight?: number;
+ widePreview?: boolean;
+ showTagline?: boolean;
+ tagline?: ReactNode;
+ taglineCompact?: boolean;
+ showGitHubBanner?: boolean;
+ mobilePreviewImage?: string;
+ mobilePreviewImageAlt?: string;
+ mobilePreviewImageWidth?: number;
+ mobilePreviewImageHeight?: number;
+ mobilePreviewImageCropTopPercent?: number;
+} = {}) {
const theme: HeroTheme = "light";
return (
-
-
-
-
+
+
+
+ {showTagline && {tagline}}
);
}
diff --git a/docs/app/(home)/sections/Navbar/Navbar.module.css b/docs/app/(home)/sections/Navbar/Navbar.module.css
index 7e0b2894d..948305efd 100644
--- a/docs/app/(home)/sections/Navbar/Navbar.module.css
+++ b/docs/app/(home)/sections/Navbar/Navbar.module.css
@@ -7,6 +7,47 @@
--site-primary-nav-hover-bg: var(--home-color-surface-soft);
}
+.navBanner {
+ display: flex;
+ min-height: 2.5rem;
+ align-items: center;
+ justify-content: center;
+ gap: 0.75rem;
+ padding: 0.5rem 1rem;
+ background: #000;
+ color: #f8fafc;
+ text-decoration: none;
+ font-family: "Inter", sans-serif;
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+}
+
+.navBannerText {
+ display: inline-flex;
+ align-items: center;
+}
+
+.navBannerButton {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.35rem;
+ padding: 0.2rem 0.65rem;
+ border-radius: 999px;
+ border: 1px solid rgb(255 255 255 / 25%);
+ background: rgb(255 255 255 / 10%);
+ font-size: 0.8125rem;
+ font-weight: 500;
+ transition: background-color 0.2s ease;
+}
+
+.navBannerStar {
+ color: rgb(234 197 79);
+}
+
+.navBanner:hover .navBannerButton {
+ background: rgb(255 255 255 / 18%);
+}
+
.desktopActions {
display: none;
}
@@ -139,6 +180,11 @@
}
@media (min-width: 1024px) {
+ .navBanner {
+ min-height: 2.75rem;
+ gap: 0.875rem;
+ }
+
.desktopActions {
display: flex;
}
diff --git a/docs/app/(home)/sections/Navbar/Navbar.tsx b/docs/app/(home)/sections/Navbar/Navbar.tsx
index ec2367df1..44013d44e 100644
--- a/docs/app/(home)/sections/Navbar/Navbar.tsx
+++ b/docs/app/(home)/sections/Navbar/Navbar.tsx
@@ -1,7 +1,34 @@
"use client";
import { SiteMarketingHeader } from "@/components/site-marketing-header";
+import { Star } from "lucide-react";
+import { usePathname } from "next/navigation";
+import styles from "./Navbar.module.css";
export function Navbar() {
- return
;
+ const pathname = usePathname();
+ const normalizedPath = pathname?.toLowerCase();
+ const showNavBanner = normalizedPath === "/" || normalizedPath === "/openclaw-os";
+
+ return (
+ <>
+ {showNavBanner && (
+
+
+ Thesys is going open source!
+
+
+
+ Star us on GitHub
+
+
+ )}
+
+
+ );
}
diff --git a/docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.module.css b/docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.module.css
index 49c722470..c0f545da1 100644
--- a/docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.module.css
+++ b/docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.module.css
@@ -10,7 +10,9 @@
.header {
display: flex;
- justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.75rem;
width: 100%;
margin-bottom: 2rem;
}
@@ -25,6 +27,16 @@
color: var(--openui-text-neutral-primary);
}
+.subtitle {
+ margin: 0;
+ max-width: 42rem;
+ text-align: center;
+ font-family: "Inter", sans-serif;
+ font-size: 16px;
+ line-height: 1.5;
+ color: var(--openui-text-neutral-secondary);
+}
+
.cardsContainer {
max-width: 80rem;
margin-inline: auto;
@@ -60,13 +72,6 @@
color: inherit;
text-decoration: none;
cursor: pointer;
- transition:
- transform 160ms ease,
- box-shadow 160ms ease;
-}
-
-.cardLink:hover {
- transform: translateY(-2px);
}
.cardLink:focus-visible {
@@ -74,10 +79,8 @@
outline-offset: 4px;
}
-.cardLink:hover .cardOverlay,
.cardLink:focus-visible .cardOverlay {
border-color: var(--openui-border-accent);
- box-shadow: var(--openui-shadow-l);
}
.cardInner {
@@ -99,6 +102,10 @@
mask-image: linear-gradient(to bottom, #000 0%, #000 82%, transparent 100%);
}
+.cardImagePlaceholder {
+ background: var(--openui-highlight-strong);
+}
+
.cardBody {
width: 100%;
padding: 1rem;
@@ -112,6 +119,12 @@
color: var(--openui-text-neutral-primary);
}
+.cardTitlePrefix {
+ display: block;
+ font-weight: 400;
+ color: var(--openui-text-neutral-secondary);
+}
+
.cardOverlay {
position: absolute;
inset: 0;
@@ -155,4 +168,19 @@
font-family: "Inter Display", sans-serif;
font-size: 18px;
}
+
+ .cardLink {
+ transition:
+ transform 160ms ease,
+ box-shadow 160ms ease;
+ }
+
+ .cardLink:hover {
+ transform: translateY(-2px);
+ }
+
+ .cardLink:hover .cardOverlay {
+ border-color: var(--openui-border-accent);
+ box-shadow: var(--openui-shadow-l);
+ }
}
diff --git a/docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.tsx b/docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.tsx
index 53b7e2254..50cf63e55 100644
--- a/docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.tsx
+++ b/docs/app/(home)/sections/PossibilitiesSection/PossibilitiesSection.tsx
@@ -1,6 +1,6 @@
"use client";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, type ReactNode } from "react";
import styles from "./PossibilitiesSection.module.css";
const bottomTraysLightImg = "/homepage/tray-light.png";
@@ -45,29 +45,34 @@ const CARDS: readonly CardImageSet[] = [
},
];
-const MOBILE_CAROUSEL_CARDS = Array.from({ length: MOBILE_CAROUSEL_COPIES }, (_, copyIndex) =>
- CARDS.map((card) => ({
- ...card,
- key: `${card.title}-${copyIndex}`,
- })),
-).flat();
-
// ---------------------------------------------------------------------------
// Sub-components
// ---------------------------------------------------------------------------
-function Card({ title, image, href }: { title: string; image: string; href?: string }) {
+type CardProps = { title: string; titlePrefix?: string; image?: string; href?: string };
+
+function Card({ title, titlePrefix, image, href }: CardProps) {
const content = (
<>
-
+ {image ? (
+
+ ) : (
+
+ )}
-
{title}
+
+ {titlePrefix && {titlePrefix}}
+ {title}
+
@@ -95,9 +100,30 @@ function Card({ title, image, href }: { title: string; image: string; href?: str
// Main component
// ---------------------------------------------------------------------------
-export function PossibilitiesSection() {
+const DEFAULT_CARDS: CardProps[] = CARDS.map((card) => ({
+ title: card.title,
+ image: card.lightImage,
+ href: card.href,
+}));
+
+export function PossibilitiesSection({
+ title = "Endless possibilities. Built in realtime.",
+ tagline,
+ cards = DEFAULT_CARDS,
+}: {
+ title?: ReactNode;
+ tagline?: ReactNode;
+ cards?: CardProps[];
+} = {}) {
const mobileTrackRef = useRef
(null);
+ const mobileCards = Array.from({ length: MOBILE_CAROUSEL_COPIES }, (_, copyIndex) =>
+ cards.map((card, cardIndex) => ({
+ ...card,
+ key: `${card.title}-${cardIndex}-${copyIndex}`,
+ })),
+ ).flat();
+
useEffect(() => {
const track = mobileTrackRef.current;
if (!track) return;
@@ -148,22 +174,35 @@ export function PossibilitiesSection() {
-
Endless possibilities. Built in realtime.
+
{title}
+ {tagline &&
{tagline}
}
- {MOBILE_CAROUSEL_CARDS.map((card) => (
-
+ {mobileCards.map((card) => (
+
))}
- {CARDS.map((card) => (
-
+ {cards.map((card, index) => (
+
))}
diff --git a/docs/app/(home)/sections/StuckInChatSection/StuckInChatSection.module.css b/docs/app/(home)/sections/StuckInChatSection/StuckInChatSection.module.css
new file mode 100644
index 000000000..214c78b33
--- /dev/null
+++ b/docs/app/(home)/sections/StuckInChatSection/StuckInChatSection.module.css
@@ -0,0 +1,158 @@
+.section {
+ width: 100%;
+ padding-inline: 1.25rem;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ max-width: 75rem;
+ margin-inline: auto;
+}
+
+.heading {
+ margin: 0 0 0.75rem;
+ text-align: center;
+ font-family: "Inter Display", sans-serif;
+ font-size: 2rem;
+ font-weight: 600;
+ line-height: 1.2;
+ letter-spacing: -1px;
+ color: var(--openui-text-neutral-primary);
+ text-wrap: balance;
+}
+
+.description {
+ margin: 0 0 2.5rem;
+ max-width: 42rem;
+ text-align: center;
+ font-family: "Inter", sans-serif;
+ font-size: 0.9375rem;
+ line-height: 1.5;
+ color: var(--openui-text-neutral-secondary);
+ text-wrap: balance;
+}
+
+.cards {
+ display: grid;
+ width: 100%;
+ grid-template-columns: 1fr;
+ gap: 0.75rem;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.card {
+ display: flex;
+ flex-direction: column;
+ gap: 0.625rem;
+ padding: 1.25rem;
+ border: 1px solid var(--openui-border-default);
+ border-radius: 0.875rem;
+ background: var(--openui-foreground);
+ box-shadow: var(--openui-shadow-m);
+}
+
+.cardIcon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 2rem;
+ border-radius: var(--openui-radius-full);
+ background: var(--openui-text-neutral-primary);
+ color: var(--openui-foreground);
+}
+
+.cardTitle {
+ margin: 0;
+ font-family: "Inter Display", sans-serif;
+ font-size: 1rem;
+ font-weight: 600;
+ line-height: 1.2;
+ color: var(--openui-text-neutral-primary);
+}
+
+.cardDescription {
+ margin: 0;
+ font-family: "Inter", sans-serif;
+ font-size: 0.875rem;
+ line-height: 1.45;
+ color: var(--openui-text-neutral-secondary);
+ text-wrap: balance;
+}
+
+.cta {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
+ margin-top: 2.5rem;
+}
+
+.installButton {
+ width: 100%;
+ max-width: 320px;
+ justify-content: space-between;
+}
+
+.ctaSub {
+ margin: 0;
+ text-align: center;
+ font-family: "Inter Display", sans-serif;
+ font-size: 1.125rem;
+ font-weight: 500;
+ color: var(--openui-text-neutral-primary);
+}
+
+
+@media (min-width: 1024px) {
+ .section {
+ padding-inline: 2rem;
+ }
+
+ .heading {
+ font-size: 2.5rem;
+ letter-spacing: -2px;
+ margin-bottom: 1rem;
+ }
+
+ .description {
+ font-size: 1.125rem;
+ margin-bottom: 4rem;
+ }
+
+ .cards {
+ grid-template-columns: repeat(3, 1fr);
+ gap: 1.25rem;
+ }
+
+ .card {
+ padding: 1.5rem;
+ gap: 0.75rem;
+ }
+
+ .cardTitle {
+ font-size: 1.0625rem;
+ }
+
+ .cardDescription {
+ font-size: 0.9375rem;
+ }
+
+ .cta {
+ margin-top: 4rem;
+ }
+
+ .ctaSub {
+ font-size: 1.25rem;
+ }
+
+ .installButton {
+ width: auto;
+ max-width: none;
+ justify-content: center;
+ }
+}
diff --git a/docs/app/(home)/sections/StuckInChatSection/StuckInChatSection.tsx b/docs/app/(home)/sections/StuckInChatSection/StuckInChatSection.tsx
new file mode 100644
index 000000000..e04ee9224
--- /dev/null
+++ b/docs/app/(home)/sections/StuckInChatSection/StuckInChatSection.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { EyeSlash, LockSimple, Scroll } from "@phosphor-icons/react";
+import { NpmButton } from "../HeroSection/HeroSection";
+import styles from "./StuckInChatSection.module.css";
+
+const ICON_SIZE = 18;
+
+const NEGATIVES = [
+ {
+ title: "No visibility",
+ description: "Agent actions and context are buried in chat. You can't see what it's doing.",
+ icon: ,
+ },
+ {
+ title: "No structure",
+ description: "Everything becomes one long scroll. Work gets scattered and hard to revisit.",
+ icon: ,
+ },
+ {
+ title: "No control",
+ description: "You can't manage tasks, permissions, or execution. Only send messages.",
+ icon: ,
+ },
+];
+
+export function StuckInChatSection({ installCommand }: { installCommand: string }) {
+ return (
+
+
+
Is your agent still stuck in Telegram?
+
+ OpenClaw is powerful, but you're limiting it by keeping it inside a chat thread.
+
+
+
+ {NEGATIVES.map((item) => (
+ -
+
{item.icon}
+ {item.title}
+ {item.description}
+
+ ))}
+
+
+
+
Setup OpenClaw OS in under a minute
+
+
+
-
-
- );
- }
-
- return (
-
-
- Conversation
-
-
-
-
- {messages.map((msg, i) => (
-
- {msg.role === "user" ? (
-
{msg.content}
- ) : (
-
- {/* Text response */}
- {msg.text && (
-
-
-
- )}
-
- {/* Dashboard updated badge */}
- {msg.hasCode &&
✓ dashboard updated}
-
- {/* Empty response */}
- {!msg.text && !msg.hasCode &&
(empty response)
}
-
- )}
-
- ))}
-
- {/* Streaming indicator */}
- {isStreaming && (
-
-
- {/* Streaming text or thinking indicator */}
- {streamingText ? (
-
-
-
- ) : (
-
- {elapsed
- ? `${(elapsed / 1000).toFixed(1)}s — ${responseHasCode ? "writing openui-lang..." : "thinking..."}`
- : "thinking..."}
-
- )}
-
- {/* Dashboard updating indicator */}
- {responseHasCode && (
-
⟳ updating dashboard...
- )}
-
-
- )}
-
-
-
-
- {/* Input */}
-
-
- setInput(e.target.value)}
- onKeyDown={(e) => {
- if (e.key === "Enter" && canSend) handleSend();
- }}
- placeholder={hasDashboard ? "Edit or ask..." : "Describe a dashboard..."}
- disabled={isStreaming}
- />
- {isStreaming ? (
- }
- variant="tertiary"
- size="medium"
- onClick={onStop}
- aria-label="Stop generation"
- />
- ) : (
- }
- variant="primary"
- size="medium"
- onClick={handleSend}
- disabled={!canSend}
- aria-label="Send message"
- />
- )}
-
-
-
- ) : (
-
- );
- }
-
- if (option.icon) {
- return (
-
-
-
- );
- }
-
- return null;
-}
-
-type OptionListProps = {
- ariaLabel: string;
- options: PickerOption[];
- value: string | null;
- onChange: (value: string) => void;
- className?: string;
-};
-
-function OptionList({ ariaLabel, options, value, onChange, className = "" }: OptionListProps) {
- return (
-
- {options.map((option) => {
- const isSelected = option.value === value;
- const leading = renderOptionLeading(option);
-
- return (
-
- );
- })}
-
- );
-}
-
-export function GitHubConnect({ onConnectAndPrompt }: GitHubConnectProps) {
- const [username, setUsername] = useState("");
- const [selectedDeveloperUsername, setSelectedDeveloperUsername] = useState(null);
- const [avatarUrl, setAvatarUrl] = useState(null);
- const [error, setError] = useState("");
- const [selectedGithubPrompt, setSelectedGithubPrompt] = useState(null);
- const [validating, setValidating] = useState(false);
- const inputRef = useRef(null);
- const debounceRef = useRef>(undefined);
-
- useEffect(() => {
- inputRef.current?.focus();
- }, []);
-
- useEffect(() => {
- if (debounceRef.current) clearTimeout(debounceRef.current);
- if (selectedDeveloperUsername) return;
- if (!username.trim() || username.trim().length < 2) return;
-
- debounceRef.current = setTimeout(() => {
- const url = `https://github.com/${username.trim()}.png?size=64`;
- const img = new window.Image();
- img.onload = () => setAvatarUrl(url);
- img.onerror = () => setAvatarUrl(null);
- img.src = url;
- }, 250);
-
- return () => {
- if (debounceRef.current) clearTimeout(debounceRef.current);
- };
- }, [selectedDeveloperUsername, username]);
-
- const focusInput = useCallback(() => {
- window.requestAnimationFrame(() => inputRef.current?.focus());
- }, []);
-
- const handleReset = useCallback(() => {
- setUsername("");
- setSelectedDeveloperUsername(null);
- setAvatarUrl(null);
- setError("");
- setSelectedGithubPrompt(null);
- focusInput();
- }, [focusInput]);
-
- const validate = useCallback((name: string): boolean => {
- const trimmed = name.trim();
- if (!trimmed) {
- setError("Enter a GitHub username");
- return false;
- }
- if (!/^[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/.test(trimmed)) {
- setError("Invalid username format");
- return false;
- }
- if (trimmed.length > 39) {
- setError("Username too long");
- return false;
- }
- setError("");
- return true;
- }, []);
-
- const handlePopularDeveloperSelect = useCallback((nextUsername: string) => {
- setSelectedDeveloperUsername(nextUsername);
- setUsername("");
- setAvatarUrl(null);
- setError("");
- }, []);
-
- const handleClearIdentity = useCallback(() => handleReset(), [handleReset]);
- const handleClearSelectedFocus = useCallback(() => {
- setSelectedGithubPrompt(null);
- setError("");
- }, []);
- const handleClearTypedUsername = useCallback(() => {
- setUsername("");
- setAvatarUrl(null);
- setError("");
- focusInput();
- }, [focusInput]);
-
- const trimmedUsername = username.trim();
- const effectiveUsername = trimmedUsername || selectedDeveloperUsername || "";
- const selectedDeveloperOption =
- DEVELOPER_OPTIONS.find((o) => o.value === selectedDeveloperUsername) ?? null;
- const selectedFocusOption =
- FOCUS_AREA_OPTIONS.find((o) => o.value === selectedGithubPrompt) ?? null;
- const selectedDeveloperLeading = selectedDeveloperOption
- ? renderOptionLeading(selectedDeveloperOption)
- : null;
- const selectedFocusLeading = selectedFocusOption
- ? renderOptionLeading(selectedFocusOption)
- : null;
- const hasValidUsername =
- effectiveUsername.length > 0 &&
- effectiveUsername.length <= 39 &&
- /^[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/.test(effectiveUsername);
- const hasIdentitySelection = Boolean(effectiveUsername);
- const isTypedIdentityLocked = Boolean(
- trimmedUsername && selectedGithubPrompt && hasValidUsername,
- );
- const showDeveloperPicker = !selectedDeveloperOption && !trimmedUsername;
- const canStart = Boolean(selectedGithubPrompt) && hasValidUsername;
- const canReset = Boolean(
- trimmedUsername || selectedDeveloperUsername || error || selectedGithubPrompt,
- );
-
- const handleStartGenerating = async () => {
- if (!selectedGithubPrompt) return;
- if (!validate(effectiveUsername)) return;
- setValidating(true);
- try {
- const res = await fetch(`https://api.github.com/users/${effectiveUsername}`);
- if (!res.ok) {
- setError("GitHub user not found");
- setValidating(false);
- return;
- }
- } catch {
- setError("Could not verify username");
- setValidating(false);
- return;
- }
- setValidating(false);
- onConnectAndPrompt(effectiveUsername, selectedGithubPrompt);
- };
-
- const handleSubmit = (event: FormEvent) => {
- event.preventDefault();
- void handleStartGenerating();
- };
-
- const renderIdentityControl = () => {
- if (selectedDeveloperOption) {
- return (
-
- {selectedDeveloperLeading && (
- {selectedDeveloperLeading}
- )}
- {selectedDeveloperOption.label}
-
-
- );
- }
- if (isTypedIdentityLocked) {
- return (
-
-
- {avatarUrl ? (
- 
- ) : (
- @
- )}
-
- @{effectiveUsername}
-
-
- );
- }
- return (
-
- {avatarUrl && }
- @
-
- {username || "username"}
- {
- setSelectedDeveloperUsername(null);
- setUsername(e.target.value);
- setAvatarUrl(null);
- setError("");
- }}
- placeholder="username"
- autoComplete="off"
- spellCheck={false}
- />
-
- {trimmedUsername && (
-
- )}
-
- );
- };
-
- return (
-
- );
-}
diff --git a/docs/app/demo/github/components/Header/Header.css b/docs/app/demo/github/components/Header/Header.css
deleted file mode 100644
index 0e0497a13..000000000
--- a/docs/app/demo/github/components/Header/Header.css
+++ /dev/null
@@ -1,54 +0,0 @@
-.openui-icon-button.header-btn,
-.header-btn {
- display: flex;
- align-items: center;
- gap: 6px;
- padding: 6px 10px;
- background: transparent;
- border: none;
- border-radius: 6px;
- color: var(--openui-text-neutral-secondary);
- font-family: var(--openui-font-body);
- font-size: 13px;
- cursor: pointer;
- text-decoration: none;
- transition:
- background 0.15s,
- color 0.15s;
- white-space: nowrap;
-}
-
-.openui-icon-button.header-btn:hover:not(:disabled),
-.header-btn:hover {
- background: var(--openui-highlight);
- color: var(--openui-text-neutral-primary);
-}
-
-.header-btn svg {
- flex-shrink: 0;
-}
-
-.openui-icon-button.header-icon-btn,
-.header-icon-btn {
- padding: 6px;
- border-radius: 6px;
-}
-
-@media (max-width: 1023px) {
- .header-btn {
- padding: 6px 8px;
- font-size: 12px;
- }
-}
-
-@media (max-width: 767px) {
- .header-btn {
- gap: 0;
- min-width: 32px;
- padding: 6px;
- }
-
- .header-btn span {
- display: none;
- }
-}
diff --git a/docs/app/demo/github/components/Header/Header.tsx b/docs/app/demo/github/components/Header/Header.tsx
deleted file mode 100644
index e189b20da..000000000
--- a/docs/app/demo/github/components/Header/Header.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { SiteMarketingHeader } from "@/components/site-marketing-header";
-import type { Theme } from "../../constants";
-import "./Header.css";
-
-type HeaderProps = {
- theme: Theme;
- onThemeToggle: () => void;
- borderMode?: "always" | "scroll";
-};
-
-export function Header({ theme, onThemeToggle, borderMode = "always" }: HeaderProps) {
- const themeLabel = { system: "System", light: "Light", dark: "Dark" }[theme];
-
- return (
-
- );
-}
diff --git a/docs/app/demo/github/components/Modal/Modal.css b/docs/app/demo/github/components/Modal/Modal.css
deleted file mode 100644
index 89026479b..000000000
--- a/docs/app/demo/github/components/Modal/Modal.css
+++ /dev/null
@@ -1,84 +0,0 @@
-.modal-overlay {
- position: fixed;
- inset: 0;
- z-index: 200;
- background: var(--openui-overlay);
- backdrop-filter: blur(4px);
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 24px;
- animation: modal-overlay-in 0.15s ease;
-}
-
-@keyframes modal-overlay-in {
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-}
-
-.modal-container {
- background: var(--openui-foreground);
- border: 1px solid var(--openui-border-interactive);
- border-radius: 16px;
- box-shadow: var(--openui-shadow-2xl);
- width: min(1400px, 95vw);
- height: 95vh;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- animation: modal-container-in 0.2s ease;
-}
-
-@keyframes modal-container-in {
- from {
- opacity: 0;
- transform: translateY(12px) scale(0.98);
- }
- to {
- opacity: 1;
- transform: translateY(0) scale(1);
- }
-}
-
-.modal-container-header {
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 10px 16px;
- background: var(--openui-highlight-subtle);
- border-bottom: 1px solid var(--openui-border-default);
- flex-shrink: 0;
-}
-
-.modal-container-body {
- flex: 1;
- overflow: auto;
-}
-
-/* ─── Mobile ─────────────────────────────────────────────────────────────────── */
-@media (max-width: 768px) {
- .modal-overlay {
- padding: 0;
- align-items: flex-end;
- }
-
- .modal-container {
- width: 100vw;
- height: 95dvh;
- border-radius: 16px 16px 0 0;
- animation: modal-container-mobile-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
- }
-}
-
-@keyframes modal-container-mobile-in {
- from {
- transform: translateY(100%);
- }
- to {
- transform: translateY(0);
- }
-}
diff --git a/docs/app/demo/github/components/Modal/Modal.tsx b/docs/app/demo/github/components/Modal/Modal.tsx
deleted file mode 100644
index 47b5d784d..000000000
--- a/docs/app/demo/github/components/Modal/Modal.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { IconButton } from "@openuidev/react-ui";
-import { X } from "lucide-react";
-import type { ReactNode } from "react";
-import { useCallback, useEffect } from "react";
-import "./Modal.css";
-
-type ModalProps = {
- title: string;
- titleAdornment?: ReactNode;
- onClose?: () => void;
- children: ReactNode;
- className?: string;
-};
-
-export function Modal({ title, titleAdornment, onClose, children, className }: ModalProps) {
- const handleKey = useCallback(
- (e: KeyboardEvent) => {
- if (e.key === "Escape") onClose?.();
- },
- [onClose],
- );
-
- useEffect(() => {
- if (!onClose) return;
- document.addEventListener("keydown", handleKey);
- return () => document.removeEventListener("keydown", handleKey);
- }, [onClose, handleKey]);
-
- return (
-
-
e.stopPropagation()}
- >
-
-
- {title}
- {titleAdornment}
-
- {onClose && (
-
}
- variant="tertiary"
- size="extra-small"
- onClick={onClose}
- title="Close"
- aria-label="Close modal"
- />
- )}
-
-
{children}
-
-
-
-
-
-
- ) : (
-
-
-
-
-
Rendered UI will appear here
-
-
-
- Preview
- {isStreaming && }
-
-
- }
- variant="tertiary"
- size="extra-small"
- onClick={() => setIsModalOpen(true)}
- title="Open fullscreen preview"
- aria-label="Open fullscreen preview"
- />
-
-
-
{previewContent}
-
-
-
-
- {/* Phase 1: Connect Screen */}
- {isHomeState && (
-
-
-
- )}
-
- {/* Phase 2: Artifact Layout */}
- {(isGitHub || hasDashboard || conversation.length > 0) && (
-
- {/* Left: Dashboard */}
-
- {/* GitHub starters (before first generation) */}
- {isGitHub && !hasDashboard && conversation.length === 0 && (
-
-
-
- 
-
- Connected as
@{githubUsername}. What do you want to build?
-
-
- {GITHUB_STARTERS.map((s) => (
-
- ))}
-
-
- )}
-
- {/* Meta + source toggle + token comparison */}
- {hasDashboard && !isStreaming && (
-
- {GITHUB_DEMO_MODEL_LABEL}
- {elapsed && (
- {(elapsed / 1000).toFixed(1)}s
- )}
- {tokenSavingPct !== null && (
-
-
- {tokenSavingPct}% fewer tokens
-
- )}
-
-
- )}
-
- {/* Source code view with tabs */}
- {hasDashboard &&
- showSource &&
- (() => {
- const activeSource =
- sourceTab === "raw"
- ? (dashboardCode ?? "")
- : (parsedJson ?? "Waiting for parse...");
- const handleCopy = async () => {
- await navigator.clipboard.writeText(activeSource);
- setCodeCopied(true);
- setTimeout(() => setCodeCopied(false), 2000);
- };
- return (
-
-
-
-
-
-
-
-
-
-
- {({ className, style, tokens, getLineProps, getTokenProps }) => (
-
-
- {tokens.map((line, i) => (
-
- {line.map((token, j) => (
-
- ))}
-
- ))}
-
-
- )}
-
-
-
- );
- })()}
-
- {/* Connected user bar */}
- {isGitHub && (hasDashboard || conversation.length > 0) && (
-
-
-
@{githubUsername}
-
-
- )}
-
- {/* Live data indicator */}
- {hasDashboard && toolCalls.length > 0 && (
-
t.status === "pending") ? "dashboard-data-strip-loading" : ""}`}
- >
-
- {toolCalls.some((t) => t.status === "pending")
- ? "Fetching live data..."
- : "Live data from GitHub"}
-
-
- {toolCalls.map((tc, i) => (
-
- {tc.status === "done" ? "✓" : tc.status === "error" ? "✗" : "⏳"}{" "}
- {tc.tool.replace("get_", "")}
-
- ))}
-
-
- )}
-
- {/* Dashboard renderer */}
- {hasDashboard && (
-
-
setParsedJson(r ? JSON.stringify(r, null, 2) : null)}
- mode={resolvedMode}
- toolProvider={toolProvider}
- onAction={(event) => {
- if (event.type === "continue_conversation") {
- const text =
- (typeof event.params?.context === "string" ? event.params.context : "") ||
- event.humanFriendlyMessage ||
- "";
- if (text) send(text);
- } else if (event.type === "open_url") {
- const url = event.params?.["url"] as string | undefined;
- if (url) window.open(url, "_blank");
- }
- }}
- />
-
- )}
-
- {/* Streaming placeholder */}
- {isStreaming && !hasDashboard && (
-
-
Generating dashboard...
- {elapsed && (
-
{(elapsed / 1000).toFixed(1)}s
- )}
-
- )}
-
-
- {/* Right: Conversation Panel */}
- {showConversation && (
-
- )}
-
- )}
-
-
- {/* Error banner */}
- {status === "error" && errorMsg &&
{errorMsg}
}
-
- {PRIMARY_SITE_NAV_ITEMS.map((item, index) => (
-
- {index > 0 &&
}
-
- {item.title}
-
-
- ))}
+ {PRIMARY_SITE_NAV_ITEMS.map((item, index) => {
+ const badge = "badge" in item ? item.badge : undefined;
+ return (
+
+ {index > 0 &&
}
+
+ {item.title}
+ {badge &&
{badge}}
+
+
+ );
+ })}
@@ -127,7 +131,7 @@ export function SiteMarketingHeader({
useEffect(() => {
if (borderMode === "always") {
- setIsScrolled(true);
+ queueMicrotask(() => setIsScrolled(true));
return;
}
diff --git a/docs/components/site-primary-nav.module.css b/docs/components/site-primary-nav.module.css
index fe7e02ad8..81b4eb7b7 100644
--- a/docs/components/site-primary-nav.module.css
+++ b/docs/components/site-primary-nav.module.css
@@ -29,6 +29,19 @@
background: var(--openui-highlight-strong);
}
+.badge {
+ margin-left: 0.375rem;
+ padding: 0.125rem 0.375rem;
+ border-radius: 4px;
+ background: rgba(124, 58, 237, 0.12);
+ color: #7c3aed;
+ font-size: 10px;
+ font-weight: 600;
+ line-height: 1;
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+}
+
@media (min-width: 1024px) {
.nav {
display: flex;
diff --git a/docs/components/site-primary-nav.tsx b/docs/components/site-primary-nav.tsx
index 0d95a6ebc..bda8515a5 100644
--- a/docs/components/site-primary-nav.tsx
+++ b/docs/components/site-primary-nav.tsx
@@ -9,6 +9,7 @@ export const PRIMARY_SITE_NAV_ITEMS = [
{ title: "Playground", href: "/playground", newTab: false },
{ title: "Demo", href: "/demo/github", newTab: true },
{ title: "Blogs", href: "/blog", newTab: false },
+ { title: "OpenClaw OS", href: "/openclaw-os", newTab: false, badge: "New" },
] as const;
export function SitePrimaryNav() {
@@ -18,6 +19,7 @@ export function SitePrimaryNav() {
+