+ setQuery(e.target.value)}
+ placeholder="Search components…"
+ className="w-full max-w-md rounded-full border border-border-card bg-card px-5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground/50 outline-none focus:border-foreground/25 transition-colors duration-200"
+ />
+
+
+ {/* Search results */}
+ {isSearching && (
+
+ {filtered && filtered.length > 0 ? (
+
+ )}
+
+ {/* Category sections */}
+ {!isSearching && (
+
+ {filtered.map((item) => (
+
+ ) : (
+ + No components match "{query}" +
+ )} +
+ {categories.map((cat) => {
+ const items = getComponentsByCategory(cat.slug);
+ if (items.length === 0) return null;
+ return (
+
+ )}
+
+
+ );
+}
diff --git a/apps/docs/src/app/ui/foundations/colors/page.tsx b/apps/docs/src/app/ui/foundations/colors/page.tsx
new file mode 100644
index 0000000..ddaa335
--- /dev/null
+++ b/apps/docs/src/app/ui/foundations/colors/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useScrollReveal } from "ghost-ui";
+import { AnimatedPageHeader } from "@/components/docs/animated-page-header";
+import { ColorsDemos } from "@/components/docs/foundations/colors";
+import { SectionWrapper } from "@/components/docs/wrappers";
+
+export default function ColorsPage() {
+ const contentRef = useScrollReveal+ {name} +
+{description}
+
+ {items.map((item) => (
+
+
+
+
+ {[
+ "bg-foreground",
+ "bg-foreground/80",
+ "bg-foreground/60",
+ "bg-foreground/40",
+ "bg-foreground/20",
+ "bg-foreground/10",
+ ].map((bg, i) => (
+
+ ))}
+
+ );
+}
+
+function TypographyVisual() {
+ return (
+
+
+
+
+
+
+ );
+}
+
+const foundations: {
+ name: string;
+ href: string;
+ description: string;
+ visual: ReactNode;
+}[] = [
+ {
+ name: "Colors",
+ href: "/ui/foundations/colors",
+ description:
+ "A pure monochromatic scale with selective semantic color for status and utility.",
+ visual:
+ {foundations.map((item) => (
+
+
+ {item.visual}
+
+
+ {item.name}
+
+
+
+ + {item.description} +
+ + ))} +
+
+
+ {[
+ "bg-foreground",
+ "bg-foreground/80",
+ "bg-foreground/60",
+ "bg-foreground/40",
+ "bg-foreground/20",
+ "bg-foreground/10",
+ ].map((bg, i) => (
+
+ ))}
+
+ );
+}
+
+function TypographyVisual() {
+ return (
+
+
+
+
+
+
+ );
+}
+
+function ComponentsVisual() {
+ const count = getAllComponents().length;
+ return (
+
+ {Array.from({ length: 8 }).map((_, i) => (
+
+ ))}
+
+ {count} components
+
+
+ );
+}
+
+const sections: {
+ name: string;
+ href: string;
+ description: string;
+ visual: ReactNode;
+}[] = [
+ {
+ name: "Foundations",
+ href: "/ui/foundations",
+ description:
+ "Color, typography, and the design tokens that underpin every Ghost UI component.",
+ visual: (
+
+
+ ),
+ },
+ {
+ name: "Components",
+ href: "/ui/components",
+ description:
+ "Production-ready building blocks. Every component follows Ghost UI — pill-first, monochromatic, accessible.",
+ visual:
+
+
+
+
+ {sections.map((item) => (
+
+
+ {item.visual}
+
+
+ {item.name}
+
+
+
+ + {item.description} +
+ + ))} +
+
+
+
+ You are a research assistant that helps users find and summarize
+ academic papers. Use the provided tools to search databases and
+ retrieve relevant publications. Always cite your sources.
+
+
+
+
+
+
+
+
+
+ Review code for best practices, potential bugs, and performance
+ issues. Provide actionable feedback with specific line references.
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/artifact-demo.tsx b/apps/docs/src/components/docs/ai-elements/artifact-demo.tsx
new file mode 100644
index 0000000..ab5105a
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/artifact-demo.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import {
+ Artifact,
+ ArtifactAction,
+ ArtifactActions,
+ ArtifactClose,
+ ArtifactContent,
+ ArtifactDescription,
+ ArtifactHeader,
+ ArtifactTitle,
+} from "ghost-ui";
+import { CopyIcon, DownloadIcon, ShareIcon } from "lucide-react";
+
+export function ArtifactDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/attachments-demo.tsx b/apps/docs/src/components/docs/ai-elements/attachments-demo.tsx
new file mode 100644
index 0000000..a5caa72
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/attachments-demo.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import {
+ Attachment,
+ AttachmentEmpty,
+ AttachmentInfo,
+ AttachmentPreview,
+ AttachmentRemove,
+ Attachments,
+} from "ghost-ui";
+
+const mockAttachments = [
+ {
+ id: "1",
+ type: "file" as const,
+ mediaType: "image/png",
+ filename: "screenshot.png",
+ url: "https://picsum.photos/seed/attach1/200/200",
+ },
+ {
+ id: "2",
+ type: "file" as const,
+ mediaType: "application/pdf",
+ filename: "quarterly-report.pdf",
+ url: "",
+ },
+ {
+ id: "3",
+ type: "file" as const,
+ mediaType: "audio/mp3",
+ filename: "recording.mp3",
+ url: "",
+ },
+];
+
+export function AttachmentsDemo() {
+ return (
+
+ React Component
+
+ A reusable button component with variants
+
+
+
+ {`export function Button({ variant = "primary", children }) {
+ return (
+
+ );
+}`}
+
+
+ SVG Illustration
+
+ Generated logo design concept
+
+
+
+ AI
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/audio-player-demo.tsx b/apps/docs/src/components/docs/ai-elements/audio-player-demo.tsx
new file mode 100644
index 0000000..eb65a58
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/audio-player-demo.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import {
+ AudioPlayer,
+ AudioPlayerControlBar,
+ AudioPlayerDurationDisplay,
+ AudioPlayerElement,
+ AudioPlayerMuteButton,
+ AudioPlayerPlayButton,
+ AudioPlayerSeekBackwardButton,
+ AudioPlayerSeekForwardButton,
+ AudioPlayerTimeDisplay,
+ AudioPlayerTimeRange,
+ AudioPlayerVolumeRange,
+} from "ghost-ui";
+
+export function AudioPlayerDemo() {
+ return (
+
+
+ {mockAttachments.map((file) => (
+ {}}>
+
+ ))}
+
+
+
+ Grid variant
+
+
+ {mockAttachments.map((file) => (
+ {}}>
+
+ ))}
+
+
+
+ Inline variant
+
+
+ {mockAttachments.map((file) => (
+ {}}>
+
+ ))}
+
+
+
+ List variant
+
+
+ Empty state
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/canvas-demo.tsx b/apps/docs/src/components/docs/ai-elements/canvas-demo.tsx
new file mode 100644
index 0000000..27fc23c
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/canvas-demo.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { type NodeTypes, ReactFlowProvider } from "@xyflow/react";
+import {
+ Canvas,
+ Controls,
+ Node,
+ NodeContent,
+ NodeDescription,
+ NodeHeader,
+ NodeTitle,
+} from "ghost-ui";
+import { useMemo } from "react";
+
+const InputNode = () => (
+
+
+
+
+
+
+
+ Full audio player
+
+
+
+
+
+
+ + Minimal player (play, time, scrub) +
++ Accepts a natural language query from the user. +
++ Processes the input and generates a response. +
++ Displays the generated response to the user. +
+
+
+
+
+
+
+ Checkpoint 1 — Initial draft
+
+
+
+
+
+ Checkpoint 2 — After revisions
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/code-block-demo.tsx b/apps/docs/src/components/docs/ai-elements/code-block-demo.tsx
new file mode 100644
index 0000000..9fa3d01
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/code-block-demo.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import {
+ CodeBlock,
+ CodeBlockActions,
+ CodeBlockCopyButton,
+ CodeBlockFilename,
+ CodeBlockHeader,
+ CodeBlockTitle,
+} from "ghost-ui";
+
+const typescriptCode = `interface User {
+ id: string;
+ name: string;
+ email: string;
+ role: "admin" | "user" | "guest";
+}
+
+async function getUser(id: string): Promise
+ Some conversation content between checkpoints...
+
+
+
+
+
+
+ lib/api/users.ts
+
+
+
+
+
+
+
+
+
+ styles/layout.css
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/commit-demo.tsx b/apps/docs/src/components/docs/ai-elements/commit-demo.tsx
new file mode 100644
index 0000000..73cb521
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/commit-demo.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import {
+ Commit,
+ CommitActions,
+ CommitAuthor,
+ CommitAuthorAvatar,
+ CommitContent,
+ CommitCopyButton,
+ CommitFile,
+ CommitFileAdditions,
+ CommitFileChanges,
+ CommitFileDeletions,
+ CommitFileIcon,
+ CommitFileInfo,
+ CommitFilePath,
+ CommitFileStatus,
+ CommitFiles,
+ CommitHash,
+ CommitHeader,
+ CommitInfo,
+ CommitMessage,
+ CommitMetadata,
+ CommitSeparator,
+ CommitTimestamp,
+} from "ghost-ui";
+
+export function CommitDemo() {
+ return (
+
+
+
+
+
+
+
+ feat: add user authentication with OAuth2 support
+
+
+ a1b2c3d
+
+
+
+
+
+
+
+
+
+ src/lib/auth/oauth.ts
+
+
+
+
+
+
+ src/middleware.ts
+
+
+
+
+
+
+ src/lib/auth/legacy.ts
+
+
+
+
+
+
+ src/config/auth.config.ts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ fix: resolve race condition in data fetching
+
+
+ f8e9d0c
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/confirmation-demo.tsx b/apps/docs/src/components/docs/ai-elements/confirmation-demo.tsx
new file mode 100644
index 0000000..772fc14
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/confirmation-demo.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import {
+ Confirmation,
+ ConfirmationAccepted,
+ ConfirmationAction,
+ ConfirmationActions,
+ ConfirmationRejected,
+ ConfirmationRequest,
+ ConfirmationTitle,
+} from "ghost-ui";
+
+export function ConfirmationDemo() {
+ return (
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/connection-demo.tsx b/apps/docs/src/components/docs/ai-elements/connection-demo.tsx
new file mode 100644
index 0000000..629c0c5
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/connection-demo.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { type NodeTypes, ReactFlowProvider } from "@xyflow/react";
+import {
+ Canvas,
+ Connection,
+ Node,
+ NodeContent,
+ NodeHeader,
+ NodeTitle,
+} from "ghost-ui";
+import { useMemo } from "react";
+
+const SourceNode = () => (
+
+
+
+ The assistant wants to execute
+
+
+
+ Deny
+ Approve
+
+
+
+
+ Approval requested
+rm -rf ./build
+ + This action will delete the build directory. Do you want to + proceed? +
+
+
+
+ Executed
+
+
+
+
+
+ Accepted
+rm -rf ./build
+ + Action was approved and completed successfully. +
+
+
+
+ Blocked
+
+
+
+
+ Rejected
+rm -rf ./build
+ + Action was denied by the user. +
++ Drag from the handle to see the custom connection line. +
+Drop a connection here.
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/context-demo.tsx b/apps/docs/src/components/docs/ai-elements/context-demo.tsx
new file mode 100644
index 0000000..6b11729
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/context-demo.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import {
+ Context,
+ ContextContent,
+ ContextContentBody,
+ ContextContentFooter,
+ ContextContentHeader,
+ ContextInputUsage,
+ ContextOutputUsage,
+ ContextTrigger,
+} from "ghost-ui";
+
+export function ContextDemo() {
+ return (
+ + Drag from the source handle to see the animated bezier connection line + with a circular endpoint indicator. +
+
+
+
+
+
+ + Use the controls in the bottom-left to zoom, fit view, and lock + interactions. +
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/edge-demo.tsx b/apps/docs/src/components/docs/ai-elements/edge-demo.tsx
new file mode 100644
index 0000000..ec29297
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/edge-demo.tsx
@@ -0,0 +1,85 @@
+"use client";
+
+import {
+ type EdgeTypes,
+ type NodeTypes,
+ ReactFlowProvider,
+} from "@xyflow/react";
+import { Canvas, Edge, Node, NodeHeader, NodeTitle } from "ghost-ui";
+import { useMemo } from "react";
+
+const SimpleNode = ({ data }: { data: { label: string } }) => (
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/environment-variables-demo.tsx b/apps/docs/src/components/docs/ai-elements/environment-variables-demo.tsx
new file mode 100644
index 0000000..8c0d8ce
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/environment-variables-demo.tsx
@@ -0,0 +1,74 @@
+"use client";
+
+import {
+ EnvironmentVariable,
+ EnvironmentVariableCopyButton,
+ EnvironmentVariableGroup,
+ EnvironmentVariableName,
+ EnvironmentVariableRequired,
+ EnvironmentVariables,
+ EnvironmentVariablesContent,
+ EnvironmentVariablesHeader,
+ EnvironmentVariablesTitle,
+ EnvironmentVariablesToggle,
+ EnvironmentVariableValue,
+} from "ghost-ui";
+
+export function EnvironmentVariablesDemo() {
+ return (
+ + Two edge variants: Animated (top, with a traveling dot) + and Temporary (bottom, dashed line). +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/file-tree-demo.tsx b/apps/docs/src/components/docs/ai-elements/file-tree-demo.tsx
new file mode 100644
index 0000000..c2ce9e4
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/file-tree-demo.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { FileTree, FileTreeFile, FileTreeFolder } from "ghost-ui";
+
+export function FileTreeDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/image-demo.tsx b/apps/docs/src/components/docs/ai-elements/image-demo.tsx
new file mode 100644
index 0000000..6511c17
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/image-demo.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { Image } from "ghost-ui";
+
+// A tiny 1x1 transparent PNG placeholder
+const PLACEHOLDER_BASE64 =
+ "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==";
+
+export function ImageDemo() {
+ return (
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/index.tsx b/apps/docs/src/components/docs/ai-elements/index.tsx
new file mode 100644
index 0000000..46e71e0
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/index.tsx
@@ -0,0 +1,238 @@
+"use client";
+
+// Code
+import { AgentDemo } from "@/components/docs/ai-elements/agent-demo";
+import { ArtifactDemo } from "@/components/docs/ai-elements/artifact-demo";
+// Chatbot
+import { AttachmentsDemo } from "@/components/docs/ai-elements/attachments-demo";
+// Voice
+import { AudioPlayerDemo } from "@/components/docs/ai-elements/audio-player-demo";
+// Workflow
+import { CanvasDemo } from "@/components/docs/ai-elements/canvas-demo";
+import { ChainOfThoughtDemo } from "@/components/docs/ai-elements/chain-of-thought-demo";
+import { CheckpointDemo } from "@/components/docs/ai-elements/checkpoint-demo";
+import { CodeBlockDemo } from "@/components/docs/ai-elements/code-block-demo";
+import { CommitDemo } from "@/components/docs/ai-elements/commit-demo";
+import { ConfirmationDemo } from "@/components/docs/ai-elements/confirmation-demo";
+import { ConnectionDemo } from "@/components/docs/ai-elements/connection-demo";
+import { ContextDemo } from "@/components/docs/ai-elements/context-demo";
+import { ControlsDemo } from "@/components/docs/ai-elements/controls-demo";
+import { ConversationDemo } from "@/components/docs/ai-elements/conversation-demo";
+import { EdgeDemo } from "@/components/docs/ai-elements/edge-demo";
+import { EnvironmentVariablesDemo } from "@/components/docs/ai-elements/environment-variables-demo";
+import { FileTreeDemo } from "@/components/docs/ai-elements/file-tree-demo";
+// Utilities
+import { ImageDemo } from "@/components/docs/ai-elements/image-demo";
+import { InlineCitationDemo } from "@/components/docs/ai-elements/inline-citation-demo";
+import { JsxPreviewDemo } from "@/components/docs/ai-elements/jsx-preview-demo";
+import { MessageDemo } from "@/components/docs/ai-elements/message-demo";
+import { MicSelectorDemo } from "@/components/docs/ai-elements/mic-selector-demo";
+import { ModelSelectorDemo } from "@/components/docs/ai-elements/model-selector-demo";
+import { NodeDemo } from "@/components/docs/ai-elements/node-demo";
+import { OpenInChatDemo } from "@/components/docs/ai-elements/open-in-chat-demo";
+import { PackageInfoDemo } from "@/components/docs/ai-elements/package-info-demo";
+import { PanelDemo } from "@/components/docs/ai-elements/panel-demo";
+import { PersonaDemo } from "@/components/docs/ai-elements/persona-demo";
+import { PlanDemo } from "@/components/docs/ai-elements/plan-demo";
+import { PromptInputDemo } from "@/components/docs/ai-elements/prompt-input-demo";
+import { QueueDemo } from "@/components/docs/ai-elements/queue-demo";
+import { ReasoningDemo } from "@/components/docs/ai-elements/reasoning-demo";
+import { SandboxDemo } from "@/components/docs/ai-elements/sandbox-demo";
+import { SchemaDisplayDemo } from "@/components/docs/ai-elements/schema-display-demo";
+import { ShimmerDemo } from "@/components/docs/ai-elements/shimmer-demo";
+import { SnippetDemo } from "@/components/docs/ai-elements/snippet-demo";
+import { SourcesDemo } from "@/components/docs/ai-elements/sources-demo";
+import { SpeechInputDemo } from "@/components/docs/ai-elements/speech-input-demo";
+import { StackTraceDemo } from "@/components/docs/ai-elements/stack-trace-demo";
+import { SuggestionDemo } from "@/components/docs/ai-elements/suggestion-demo";
+import { TaskDemo } from "@/components/docs/ai-elements/task-demo";
+import { TerminalDemo } from "@/components/docs/ai-elements/terminal-demo";
+import { TestResultsDemo } from "@/components/docs/ai-elements/test-results-demo";
+import { ToolDemo } from "@/components/docs/ai-elements/tool-demo";
+import { ToolbarDemo } from "@/components/docs/ai-elements/toolbar-demo";
+import { TranscriptionDemo } from "@/components/docs/ai-elements/transcription-demo";
+import { VoiceSelectorDemo } from "@/components/docs/ai-elements/voice-selector-demo";
+import { WebPreviewDemo } from "@/components/docs/ai-elements/web-preview-demo";
+import { ComponentWrapper } from "@/components/docs/primitives/component-wrapper";
+
+function CategoryLabel({ children }: { children: React.ReactNode }) {
+ return (
+ + Renders an AI-generated image from base64 data. The component + automatically constructs a data URI from the provided media type and + base64 string. +
+ +
+
+
+
+
+
+
+
+
+ );
+}
+
+export function AIElementDemos() {
+ return (
+ + {children} +
+
+ {/* Chatbot */}
+ Chatbot
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Code */}
+ Code
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Voice */}
+ Voice
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Workflow */}
+ Workflow
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Utilities */}
+ Utilities
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/inline-citation-demo.tsx b/apps/docs/src/components/docs/ai-elements/inline-citation-demo.tsx
new file mode 100644
index 0000000..3221903
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/inline-citation-demo.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import {
+ InlineCitation,
+ InlineCitationCard,
+ InlineCitationCardBody,
+ InlineCitationCardTrigger,
+ InlineCitationCarousel,
+ InlineCitationCarouselContent,
+ InlineCitationCarouselHeader,
+ InlineCitationCarouselIndex,
+ InlineCitationCarouselItem,
+ InlineCitationCarouselNext,
+ InlineCitationCarouselPrev,
+ InlineCitationSource,
+ InlineCitationText,
+} from "ghost-ui";
+
+const sources = [
+ "https://en.wikipedia.org/wiki/Large_language_model",
+ "https://arxiv.org/abs/2303.08774",
+];
+
+export function InlineCitationDemo() {
+ return (
+
+ Large language models are neural networks trained on vast amounts of text
+ data.{" "}
+
+
`;
+
+const errorJsx = `Welcome Back
+Your dashboard is ready to explore.
+
+
+
+
+
+
`;
+
+export function JsxPreviewDemo() {
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/message-demo.tsx b/apps/docs/src/components/docs/ai-elements/message-demo.tsx
new file mode 100644
index 0000000..40d6673
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/message-demo.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import {
+ Message,
+ MessageAction,
+ MessageActions,
+ MessageContent,
+ MessageResponse,
+} from "ghost-ui";
+import {
+ CopyIcon,
+ RefreshCwIcon,
+ ThumbsDownIcon,
+ ThumbsUpIcon,
+} from "lucide-react";
+
+export function MessageDemo() {
+ return (
+
+
+
+ Can you explain how React Server Components work?
+
+
+
+
+
+
+ {`**React Server Components** (RSC) allow you to render components on the server, reducing the amount of JavaScript sent to the client.\n\n### Key Benefits\n\n- **Zero bundle size** — Server Components are not included in the client bundle\n- **Direct backend access** — You can query databases directly\n- **Automatic code splitting** — Client components are lazy-loaded\n\n\`\`\`tsx\n// This runs on the server\nasync function UserProfile({ id }: { id: string }) {\n const user = await db.user.findUnique({ where: { id } });\n return
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/mic-selector-demo.tsx b/apps/docs/src/components/docs/ai-elements/mic-selector-demo.tsx
new file mode 100644
index 0000000..06786dd
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/mic-selector-demo.tsx
@@ -0,0 +1,48 @@
+"use client";
+
+import {
+ MicSelector,
+ MicSelectorContent,
+ MicSelectorEmpty,
+ MicSelectorInput,
+ MicSelectorItem,
+ MicSelectorLabel,
+ MicSelectorList,
+ MicSelectorTrigger,
+ MicSelectorValue,
+} from "ghost-ui";
+
+export function MicSelectorDemo() {
+ return (
+ {user.name}
;\n}\n\`\`\``}
+
+
+
+
+
+
+ {(devices) =>
+ devices.length === 0 ? (
+
+
+ ))
+ )
+ }
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/model-selector-demo.tsx b/apps/docs/src/components/docs/ai-elements/model-selector-demo.tsx
new file mode 100644
index 0000000..df2e74b
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/model-selector-demo.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import {
+ Button,
+ ModelSelector,
+ ModelSelectorContent,
+ ModelSelectorEmpty,
+ ModelSelectorGroup,
+ ModelSelectorInput,
+ ModelSelectorItem,
+ ModelSelectorList,
+ ModelSelectorLogo,
+ ModelSelectorLogoGroup,
+ ModelSelectorName,
+ ModelSelectorTrigger,
+} from "ghost-ui";
+
+export function ModelSelectorDemo() {
+ return (
+ + Opens a popover listing available audio input devices. Requires + microphone permission to show device names. +
+
+
+
+
+
+ Full Node
+
+ A node with header, content, and footer
+
+
+
+
+
+ Ready
+
+
+
+
+
+
+ Source Only
+ Starting node in a workflow
+
+
+
+
+
+
+
+ Target Only
+ Terminal node in a workflow
+
+
+
+
+
+
+
+ Standalone
+ No handles
+
+
+
+
+ Idle
+
+
+
+ + This node demonstrates all available sub-components arranged + together. It has both target (left) and source (right) handles. +
++ This node only has a source handle on the right side. +
++ This node only has a target handle on the left side. +
++ A standalone card-style node with no connection handles. +
+
+
+
+ Open in a chat provider
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/package-info-demo.tsx b/apps/docs/src/components/docs/ai-elements/package-info-demo.tsx
new file mode 100644
index 0000000..d6d393d
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/package-info-demo.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import {
+ PackageInfo,
+ PackageInfoContent,
+ PackageInfoDependencies,
+ PackageInfoDependency,
+ PackageInfoDescription,
+} from "ghost-ui";
+
+export function PackageInfoDemo() {
+ return (
+ + A dropdown menu that lets users open a query in various AI chat + providers. Each item generates a provider-specific URL and opens it in a + new tab. +
+ +
+
+
+ A JavaScript library for building user interfaces
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/panel-demo.tsx b/apps/docs/src/components/docs/ai-elements/panel-demo.tsx
new file mode 100644
index 0000000..ec11091
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/panel-demo.tsx
@@ -0,0 +1,61 @@
+"use client";
+
+import { type NodeTypes, ReactFlowProvider } from "@xyflow/react";
+import {
+ Canvas,
+ Node,
+ NodeContent,
+ NodeHeader,
+ NodeTitle,
+ Panel,
+} from "ghost-ui";
+import { useMemo } from "react";
+
+const PlaceholderNode = () => (
+ + Panels float above the canvas at fixed positions. +
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/persona-demo.tsx b/apps/docs/src/components/docs/ai-elements/persona-demo.tsx
new file mode 100644
index 0000000..f5e4857
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/persona-demo.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import type { PersonaState } from "ghost-ui";
+import { Button, Persona } from "ghost-ui";
+import { useState } from "react";
+
+const variants = [
+ "obsidian",
+ "glint",
+ "halo",
+ "command",
+ "mana",
+ "opal",
+] as const;
+const states: PersonaState[] = [
+ "idle",
+ "listening",
+ "thinking",
+ "speaking",
+ "asleep",
+];
+
+export function PersonaDemo() {
+ const [currentState, setCurrentState] = useState+ Panels are floating overlays positioned at the edges of the canvas. +
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/plan-demo.tsx b/apps/docs/src/components/docs/ai-elements/plan-demo.tsx
new file mode 100644
index 0000000..ce00bc8
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/plan-demo.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import {
+ Plan,
+ PlanAction,
+ PlanContent,
+ PlanDescription,
+ PlanFooter,
+ PlanHeader,
+ PlanTitle,
+ PlanTrigger,
+} from "ghost-ui";
+import { CheckCircleIcon, CircleIcon } from "lucide-react";
+
+export function PlanDemo() {
+ return (
+
+ {states.map((s) => (
+
+ ))}
+
+
+
+ {variants.map((variant) => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/prompt-input-demo.tsx b/apps/docs/src/components/docs/ai-elements/prompt-input-demo.tsx
new file mode 100644
index 0000000..47132fc
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/prompt-input-demo.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import {
+ PromptInput,
+ PromptInputButton,
+ PromptInputFooter,
+ PromptInputSubmit,
+ PromptInputTextarea,
+ PromptInputTools,
+} from "ghost-ui";
+import { PaperclipIcon } from "lucide-react";
+
+export function PromptInputDemo() {
+ return (
+
+ Build a Landing Page
+
+ Create a responsive landing page with hero section, features, and
+ footer.
+
+
+ -
+
-
+
+ + Set up project structure + +
+ -
+
+ + Design hero section + +
+ -
+
+ Build features grid +
+ -
+
+ Add footer and navigation +
+
+ 2 of 4 steps completed +
+
+ {}}>
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/queue-demo.tsx b/apps/docs/src/components/docs/ai-elements/queue-demo.tsx
new file mode 100644
index 0000000..b6f9b37
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/queue-demo.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import {
+ Queue,
+ QueueItem,
+ QueueItemContent,
+ QueueItemDescription,
+ QueueItemIndicator,
+ QueueList,
+ QueueSection,
+ QueueSectionContent,
+ QueueSectionLabel,
+ QueueSectionTrigger,
+} from "ghost-ui";
+import { CheckCircleIcon, ListTodoIcon } from "lucide-react";
+
+export function QueueDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+ Extract shared logic into a reusable hook
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/reasoning-demo.tsx b/apps/docs/src/components/docs/ai-elements/reasoning-demo.tsx
new file mode 100644
index 0000000..0ca165b
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/reasoning-demo.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { Reasoning, ReasoningContent, ReasoningTrigger } from "ghost-ui";
+
+export function ReasoningDemo() {
+ return (
+
+
+ Refactor authentication module
+
+
+
+
+ Write unit tests for API routes
+
+
+
+
+ Set up project scaffolding
+
+
+
+
+ Configure database schema
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/sandbox-demo.tsx b/apps/docs/src/components/docs/ai-elements/sandbox-demo.tsx
new file mode 100644
index 0000000..5560444
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/sandbox-demo.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import {
+ CodeBlock,
+ CodeBlockActions,
+ CodeBlockCopyButton,
+ CodeBlockFilename,
+ CodeBlockHeader,
+ CodeBlockTitle,
+ Sandbox,
+ SandboxContent,
+ SandboxHeader,
+ SandboxTabContent,
+ SandboxTabs,
+ SandboxTabsBar,
+ SandboxTabsList,
+ SandboxTabsTrigger,
+} from "ghost-ui";
+
+const codeSnippet = `import { useState } from "react";
+
+export default function Counter() {
+ const [count, setCount] = useState(0);
+
+ return (
+
+
+
+ {`The user is asking about the performance implications of using React Server Components. Let me think through the key factors:\n\n1. **Bundle size reduction** - Since server components don't ship JavaScript to the client, the initial bundle can be significantly smaller.\n\n2. **Data fetching** - Server components can fetch data directly during rendering, eliminating client-side waterfalls.\n\n3. **Streaming** - The server can stream HTML progressively, improving Time to First Byte.`}
+
+
+
+
+ Completed reasoning
+
+
+
+ {`Analyzing the query about database optimization strategies. I should consider indexing, query planning, and caching...`}
+
+
+
+ Streaming reasoning
+
+
+ );
+}`;
+
+const outputText = `> next dev --turbo
+ Ready in 1.2s
+ Local: http://localhost:3000
+ Network: http://192.168.1.100:3000
+
+ Compiled /page in 340ms`;
+
+export function SandboxDemo() {
+ return (
+ {count}
+ +
+
+
+
+
+
+ Code
+ Output
+
+
+
+
+
+
+ counter.tsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/schema-display-demo.tsx b/apps/docs/src/components/docs/ai-elements/schema-display-demo.tsx
new file mode 100644
index 0000000..12c4c54
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/schema-display-demo.tsx
@@ -0,0 +1,171 @@
+"use client";
+
+import { SchemaDisplay } from "ghost-ui";
+
+export function SchemaDisplayDemo() {
+ return (
+ {outputText}
+
+ Executing test suite...
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/shimmer-demo.tsx b/apps/docs/src/components/docs/ai-elements/shimmer-demo.tsx
new file mode 100644
index 0000000..2eb428f
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/shimmer-demo.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { Shimmer } from "ghost-ui";
+
+export function ShimmerDemo() {
+ return (
+
+
+ Generating response...
+
+
+
+ Analyzing your code and preparing suggestions
+
+
+
+ Thinking...
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/snippet-demo.tsx b/apps/docs/src/components/docs/ai-elements/snippet-demo.tsx
new file mode 100644
index 0000000..56d45b7
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/snippet-demo.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import {
+ Snippet,
+ SnippetAddon,
+ SnippetCopyButton,
+ SnippetInput,
+ SnippetText,
+} from "ghost-ui";
+
+export function SnippetDemo() {
+ return (
+
+
+
+ $
+
+
+
+
+
+
+
+ $
+
+
+
+
+
+
+
+
+
+
+
+
+ $
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/sources-demo.tsx b/apps/docs/src/components/docs/ai-elements/sources-demo.tsx
new file mode 100644
index 0000000..598afb1
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/sources-demo.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { Source, Sources, SourcesContent, SourcesTrigger } from "ghost-ui";
+
+export function SourcesDemo() {
+ return (
+
+
+ setTranscript((prev) => (prev ? `${prev} ${text}` : text))
+ }
+ />
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/stack-trace-demo.tsx b/apps/docs/src/components/docs/ai-elements/stack-trace-demo.tsx
new file mode 100644
index 0000000..b8863d1
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/stack-trace-demo.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import {
+ StackTrace,
+ StackTraceActions,
+ StackTraceContent,
+ StackTraceCopyButton,
+ StackTraceError,
+ StackTraceErrorMessage,
+ StackTraceErrorType,
+ StackTraceExpandButton,
+ StackTraceFrames,
+ StackTraceHeader,
+} from "ghost-ui";
+
+const typeErrorTrace = `TypeError: Cannot read properties of undefined (reading 'map')
+ at UserList (/src/components/UserList.tsx:24:18)
+ at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18)
+ at mountIndeterminateComponent (node_modules/react-dom/cjs/react-dom.development.js:17811:13)
+ at beginWork (node_modules/react-dom/cjs/react-dom.development.js:19049:16)
+ at HTMLUnknownElement.callCallback (node_modules/react-dom/cjs/react-dom.development.js:3945:14)`;
+
+const referenceErrorTrace = `ReferenceError: fetchData is not defined
+ at loadDashboard (/src/pages/dashboard.ts:15:3)
+ at async handleRequest (/src/server/router.ts:42:12)
+ at async processMiddleware (/src/server/middleware.ts:28:5)
+ at node:internal/process/task_queues:95:5`;
+
+export function StackTraceDemo() {
+ return (
+ + Click the microphone button to begin recording. Uses the Web Speech API + when available, with a MediaRecorder fallback. +
+ +
+
+ Transcription output
++ {transcript || "Transcribed text will appear here..."} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/suggestion-demo.tsx b/apps/docs/src/components/docs/ai-elements/suggestion-demo.tsx
new file mode 100644
index 0000000..feea651
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/suggestion-demo.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { Suggestion, Suggestions } from "ghost-ui";
+
+export function SuggestionDemo() {
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/task-demo.tsx b/apps/docs/src/components/docs/ai-elements/task-demo.tsx
new file mode 100644
index 0000000..fd75243
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/task-demo.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import {
+ Task,
+ TaskContent,
+ TaskItem,
+ TaskItemFile,
+ TaskTrigger,
+} from "ghost-ui";
+
+export function TaskDemo() {
+ return (
+ Suggested prompts
+
+
+
+
+ Found src/auth/login.ts — contains the
+ main login handler with JWT token generation.
+
+
+ Found src/middleware/auth.ts —
+ validates tokens on protected routes.
+
+
+ Found src/lib/session.ts — manages
+ session creation and expiration.
+
+
+
+
+
+
+
+ Reviewed prisma/schema.prisma for user
+ model relationships.
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/terminal-demo.tsx b/apps/docs/src/components/docs/ai-elements/terminal-demo.tsx
new file mode 100644
index 0000000..6142dca
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/terminal-demo.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import {
+ Terminal,
+ TerminalActions,
+ TerminalContent,
+ TerminalCopyButton,
+ TerminalHeader,
+ TerminalTitle,
+} from "ghost-ui";
+
+const buildOutput = `\x1b[32m$\x1b[0m next build
+\x1b[36minfo\x1b[0m - Linting and checking validity of types...
+\x1b[36minfo\x1b[0m - Creating an optimized production build...
+\x1b[36minfo\x1b[0m - Compiled successfully
+\x1b[36minfo\x1b[0m - Collecting page data...
+\x1b[36minfo\x1b[0m - Generating static pages (8/8)
+\x1b[36minfo\x1b[0m - Finalizing page optimization...
+
+Route (app) Size First Load JS
+\x1b[37m+\x1b[0m / 5.2 kB 89.3 kB
+\x1b[37m+\x1b[0m /about 1.8 kB 85.9 kB
+\x1b[37m+\x1b[0m /dashboard 12.4 kB 96.5 kB
+\x1b[37m+\x1b[0m /api/health 0 B 0 B
+
+\x1b[32m\u2713\x1b[0m Build completed in 14.2s`;
+
+const gitOutput = `\x1b[33mOn branch main\x1b[0m
+Your branch is up to date with 'origin/main'.
+
+Changes to be committed:
+ \x1b[32mnew file: src/components/avatar.tsx\x1b[0m
+ \x1b[32mmodified: src/lib/utils.ts\x1b[0m
+ \x1b[31mdeleted: src/old-component.tsx\x1b[0m
+
+Untracked files:
+ \x1b[31m.env.local\x1b[0m`;
+
+export function TerminalDemo() {
+ return (
+
+
+
+ Build Output
+
+
+
+
+
+
+
+ git status
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/test-results-demo.tsx b/apps/docs/src/components/docs/ai-elements/test-results-demo.tsx
new file mode 100644
index 0000000..e381143
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/test-results-demo.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import {
+ Test,
+ TestError,
+ TestErrorMessage,
+ TestErrorStack,
+ TestResults,
+ TestResultsContent,
+ TestResultsDuration,
+ TestResultsHeader,
+ TestResultsProgress,
+ TestResultsSummary,
+ TestSuite,
+ TestSuiteContent,
+ TestSuiteName,
+} from "ghost-ui";
+
+export function TestResultsDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Expected status 200 but received 500
+
+
+ {`at Object. (tests/api/user.test.ts:45:10)
+ at processTicksAndRejections (node:internal/process/task_queues:95:5)`}
+
+
+
+
+
+
+ AssertionError: expected 'invalid' to match
+ /^[^@]+@[^@]+$/
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/tool-demo.tsx b/apps/docs/src/components/docs/ai-elements/tool-demo.tsx
new file mode 100644
index 0000000..db1d9e3
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/tool-demo.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import { Tool, ToolContent, ToolHeader, ToolInput, ToolOutput } from "ghost-ui";
+
+export function ToolDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/toolbar-demo.tsx b/apps/docs/src/components/docs/ai-elements/toolbar-demo.tsx
new file mode 100644
index 0000000..0d6a2cf
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/toolbar-demo.tsx
@@ -0,0 +1,71 @@
+"use client";
+
+import { type NodeTypes, ReactFlowProvider } from "@xyflow/react";
+import {
+ Button,
+ Canvas,
+ Node,
+ NodeContent,
+ NodeHeader,
+ NodeTitle,
+ Toolbar,
+} from "ghost-ui";
+import { CopyIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import { useMemo } from "react";
+
+const ToolbarNode = () => (
+ + Click to select and reveal the toolbar below. +
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/transcription-demo.tsx b/apps/docs/src/components/docs/ai-elements/transcription-demo.tsx
new file mode 100644
index 0000000..43c17fa
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/transcription-demo.tsx
@@ -0,0 +1,54 @@
+"use client";
+
+import { Button, Transcription, TranscriptionSegment } from "ghost-ui";
+import { useState } from "react";
+
+const mockSegments = [
+ { text: "Welcome to the demo.", startSecond: 0, endSecond: 2 },
+ { text: " Today we are looking at", startSecond: 2, endSecond: 4 },
+ { text: " the transcription component,", startSecond: 4, endSecond: 6 },
+ { text: " which highlights words", startSecond: 6, endSecond: 8 },
+ { text: " as audio plays.", startSecond: 8, endSecond: 10 },
+ { text: " Each segment is clickable", startSecond: 10, endSecond: 12 },
+ { text: " and can seek to", startSecond: 12, endSecond: 14 },
+ { text: " the corresponding position", startSecond: 14, endSecond: 16 },
+ { text: " in the audio track.", startSecond: 16, endSecond: 18 },
+];
+
+export function TranscriptionDemo() {
+ const [currentTime, setCurrentTime] = useState(0);
+
+ return (
+ + A floating toolbar that appears below a selected node, providing + contextual actions. +
+
+
+
+
+
+ {(segment, index) => (
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/voice-selector-demo.tsx b/apps/docs/src/components/docs/ai-elements/voice-selector-demo.tsx
new file mode 100644
index 0000000..a5fe8b0
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/voice-selector-demo.tsx
@@ -0,0 +1,137 @@
+"use client";
+
+import {
+ Button,
+ VoiceSelector,
+ VoiceSelectorAccent,
+ VoiceSelectorAge,
+ VoiceSelectorAttributes,
+ VoiceSelectorBullet,
+ VoiceSelectorContent,
+ VoiceSelectorDescription,
+ VoiceSelectorEmpty,
+ VoiceSelectorGender,
+ VoiceSelectorGroup,
+ VoiceSelectorInput,
+ VoiceSelectorItem,
+ VoiceSelectorList,
+ VoiceSelectorName,
+ VoiceSelectorPreview,
+ VoiceSelectorSeparator,
+ VoiceSelectorTrigger,
+} from "ghost-ui";
+import { useState } from "react";
+
+const voices = [
+ {
+ id: "alloy",
+ name: "Alloy",
+ gender: "non-binary" as const,
+ accent: "american" as const,
+ age: "Young Adult",
+ description: "Versatile, balanced tone",
+ },
+ {
+ id: "echo",
+ name: "Echo",
+ gender: "male" as const,
+ accent: "american" as const,
+ age: "Adult",
+ description: "Warm, resonant baritone",
+ },
+ {
+ id: "fable",
+ name: "Fable",
+ gender: "female" as const,
+ accent: "british" as const,
+ age: "Adult",
+ description: "Expressive storyteller",
+ },
+ {
+ id: "onyx",
+ name: "Onyx",
+ gender: "male" as const,
+ accent: "american" as const,
+ age: "Mature",
+ description: "Deep, authoritative",
+ },
+ {
+ id: "nova",
+ name: "Nova",
+ gender: "female" as const,
+ accent: "australian" as const,
+ age: "Young Adult",
+ description: "Bright, energetic",
+ },
+ {
+ id: "shimmer",
+ name: "Shimmer",
+ gender: "female" as const,
+ accent: "irish" as const,
+ age: "Adult",
+ description: "Soft, calming presence",
+ },
+];
+
+export function VoiceSelectorDemo() {
+ const [selected, setSelected] = useState
+
+
+ {currentTime.toFixed(1)}s
+
+
+
+
+
+
+
+
+
+
+
+
+ No voices found.
+
+ {voices.map((voice) => (
+ setSelected(voice.id)}
+ >
+
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/ai-elements/web-preview-demo.tsx b/apps/docs/src/components/docs/ai-elements/web-preview-demo.tsx
new file mode 100644
index 0000000..76c8253
--- /dev/null
+++ b/apps/docs/src/components/docs/ai-elements/web-preview-demo.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import {
+ WebPreview,
+ WebPreviewBody,
+ WebPreviewConsole,
+ WebPreviewNavigation,
+ WebPreviewNavigationButton,
+ WebPreviewUrl,
+} from "ghost-ui";
+import { ArrowLeftIcon, ArrowRightIcon, RefreshCwIcon } from "lucide-react";
+
+export function WebPreviewDemo() {
+ return (
+ + A dialog-based voice picker with search, gender, accent, and preview + controls. +
+ +
+ {
+ /* no-op in demo */
+ }}
+ />
+
+
+
+ {voice.description}
+
+
+
+ {voice.name}
+
+ {voice.age}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/bento/activity-goal.tsx b/apps/docs/src/components/docs/bento/activity-goal.tsx
new file mode 100644
index 0000000..f7f1c2d
--- /dev/null
+++ b/apps/docs/src/components/docs/bento/activity-goal.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import {
+ Button,
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from "ghost-ui";
+import { Minus, Plus } from "lucide-react";
+import * as React from "react";
+
+export function CardsActivityGoal() {
+ const [amount, setAmount] = React.useState(350);
+
+ function onClick(adjustment: number) {
+ setAmount(Math.max(200, Math.min(400, amount + adjustment)));
+ }
+
+ return (
+
+
+
+
+
+
+ ${amount}
+
+ USD
+
+
+
+ OM
+
+
+
+
+ Sofia Davis
+m@example.com
+
+ {messages.map((message, index) => (
+
+
+ {message.content}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Or continue with
+
+
+
+
+
+
+
+
+
+
+ {row.getValue("status")}
+ ),
+ },
+ {
+ accessorKey: "email",
+ header: ({ column }) => {
+ return (
+
+ );
+ },
+ cell: ({ row }) => {row.getValue("email")}
,
+ },
+ {
+ accessorKey: "amount",
+ header: () => Amount
,
+ cell: ({ row }) => {
+ const amount = parseFloat(row.getValue("amount"));
+
+ // Format the amount as a dollar amount
+ const formatted = new Intl.NumberFormat("en-US", {
+ style: "currency",
+ currency: "USD",
+ }).format(amount);
+
+ return (
+ {formatted}
+ );
+ },
+ },
+ {
+ id: "actions",
+ enableHiding: false,
+ cell: ({ row }) => {
+ const payment = row.original;
+
+ return (
+
+
+ table.getColumn("email")?.setFilterValue(event.target.value)
+ }
+ className="max-w-sm"
+ />
+
+
+
+
+
+ {table
+ .getAllColumns()
+ .filter((column) => column.getCanHide())
+ .map((column) => {
+ return (
+
+ column.toggleVisibility(!!value)
+ }
+ >
+ {column.id}
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+ {table.getFilteredSelectedRowModel().rows.length} of{" "}
+ {table.getFilteredRowModel().rows.length} row(s) selected.
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function BentoDemo() {
+ const isMobile = useIsMobile();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/bento/metric.tsx b/apps/docs/src/components/docs/bento/metric.tsx
new file mode 100644
index 0000000..17d3c52
--- /dev/null
+++ b/apps/docs/src/components/docs/bento/metric.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+ ChartConfig,
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+} from "ghost-ui";
+import { Line, LineChart } from "recharts";
+
+const data = [
+ {
+ average: 400,
+ today: 240,
+ },
+ {
+ average: 300,
+ today: 139,
+ },
+ {
+ average: 200,
+ today: 980,
+ },
+ {
+ average: 278,
+ today: 390,
+ },
+ {
+ average: 189,
+ today: 480,
+ },
+ {
+ average: 239,
+ today: 380,
+ },
+ {
+ average: 349,
+ today: 430,
+ },
+];
+
+const chartConfig = {
+ today: {
+ label: "Current Value",
+ color: "hsl(var(--primary))",
+ },
+ average: {
+ label: "Average Value",
+ color: "hsl(var(--primary))",
+ },
+} satisfies ChartConfig;
+
+export function CardsMetric() {
+ return (
+
+
+
+ {isMobile &&
+
+
+
+
+
+
+
+
+
+ {!isMobile && (
+ <>
+
+
+
+ )}
+
+
+
+
+
+
+
+
+
+ ${amount}
+
+ USD
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ People with access
+
+
+
+
+
+
+
+ OM
+
+
+
+
+
+ + Olivia Martin +
+m@example.com
+
+
+
+
+ IN
+
+
+
+
+
+ + Isabella Nguyen +
+b@example.com
+
+
+
+
+ SD
+
+
+
+
+
+ + Sofia Davis +
+p@example.com
+
+
+ );
+ }
+ return null;
+};
+
+export function CardsStats() {
+ const [activeIndex, setActiveIndex] = useState+ {type === "revenue" ? "$" : ""} + {payload[0].value.toLocaleString()} +
+
+
+
+ Total Revenue
+
+
+
+
+
+
+ Subscriptions
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/bento/team-members.tsx b/apps/docs/src/components/docs/bento/team-members.tsx
new file mode 100644
index 0000000..d2e2a2b
--- /dev/null
+++ b/apps/docs/src/components/docs/bento/team-members.tsx
@@ -0,0 +1,196 @@
+"use client";
+
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+ Button,
+ Card,
+ CardContent,
+ CardDescription,
+ CardHeader,
+ CardTitle,
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "ghost-ui";
+import { ChevronDown } from "lucide-react";
+
+export function CardsTeamMembers() {
+ return (
+
+
+
+ {
+ const isActive = activeIndex === props.index;
+ return (
+
+
+
+
+
+ $15,231.89
+ + +20.1% from last month +
+
+
+
+ handleMouseEnter(data)}
+ className={`transition-opacity duration-200 ${
+ activeIndex !== null ? "opacity-60" : ""
+ }`}
+ />
+
+
+
+
+
+ +2350
+ + +180.1% from last month +
+
+
+
+
+
+
+
+
+ No roles found.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ OM
+
+
+
+
+ Sofia Davis
+m@example.com
+Viewer
++ Can view and comment. +
+Developer
++ Can view, comment and edit. +
+Billing
++ Can view, comment and manage billing. +
+Owner
++ Admin-level access to all resources. +
+
+
+
+
+
+
+
+
+ No roles found.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ JL
+
+
+
+
+ Jackson Lee
+p@example.com
+Viewer
++ Can view and comment. +
+Developer
++ Can view, comment and edit. +
+Billing
++ Can view, comment and manage billing. +
+Owner
++ Admin-level access to all resources. +
+
+
+
+
+
+
+
+
+ No roles found.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ IN
+
+
+
+
+ + Isabella Nguyen +
+i@example.com
+Viewer
++ Can view and comment. +
+Developer
++ Can view, comment and edit. +
+Billing
++ Can view, comment and manage billing. +
+Owner
++ Admin-level access to all resources. +
+
+
+ {label}
+
+
+ );
+}
+
+// ── Variant Table ──
+
+function VariantTable({ variants }: { variants: ComponentSpec["variants"] }) {
+ if (variants.length === 0) return null;
+
+ return (
+
+ {children}
+
+
+ {variants.map((v) => (
+
+ );
+}
+
+// ── Main Shell ──
+
+export function ComponentPageShell({
+ component,
+ categoryName,
+ demoSource,
+ spec,
+ prev,
+ next,
+ docs,
+}: {
+ component: ComponentEntry;
+ categoryName: string;
+ demoSource: string | null;
+ spec: ComponentSpec | null;
+ prev: { slug: string; name: string } | null;
+ next: { slug: string; name: string } | null;
+ docs?: ComponentDoc;
+}) {
+ const [activeTab, setActiveTab] = useState<"preview" | "source" | "demo">(
+ "preview",
+ );
+ const { copyToClipboard, isCopied } = useCopyToClipboard();
+ const shellRef = useRef
+
+ ))}
+
+
+ {v.name}
+ {v.defaultValue && (
+
+ default: {v.defaultValue}
+
+ )}
+
+ {v.values.map((val) => (
+
+ {val}
+
+ ))}
+
+
+ {/* ── Header ── */}
+
+
+
+
+
+
+
+
+
+
+ {categoryName}
+
+
+ + {component.name} +
+ {docs?.description && ( ++ {docs.description} +
+ )} +
+ {/* ── Install ── */}
+
+
+
+
+ {docs?.usage && (
+
+ {installCommand}
+
+
+
+
+
+
+ Usage
+
+
+
+
+
+
+ )}
+
+ {/* ── Tabs: Preview / Source / Demo Code ── */}
+
+
+
+ {/* ── Spec Sheet ── */}
+
+ {(
+ [
+ ["preview", "Preview"],
+ ...(spec?.source ? [["source", "Source"]] : []),
+ ...(demoSource ? [["demo", "Demo"]] : []),
+ ] as [string, string][]
+ ).map(([key, label]) => (
+
+ ))}
+
+
+
+ {activeTab === "preview" && (
+
+
+ )}
+
+ {activeTab === "source" && spec?.source && (
+
+
+
+
+
+ {spec.filePath}
+
+
+
+
+
+
+ )}
+
+ {activeTab === "demo" && demoSource && (
+
+
+
+
+ {component.slug}-demo.tsx
+
+
+
+
+
+
+ )}
+
+
+
+ {docs && docs.props.length > 0 && (
+
+
+
+ + Specification +
+
+ {/* Variants */}
+ {spec && spec.variants.length > 0 && (
+
+
+ )}
+
+ {/* Sub-components */}
+ {componentExports.length > 1 && (
+
+
+ )}
+
+ {/* Data slots */}
+ {spec && spec.dataSlots.length > 0 && (
+
+
+ )}
+
+ {/* Registry dependencies */}
+ {component.registryDependencies.length > 0 && (
+
+
+ )}
+
+ {/* npm Dependencies */}
+ {component.dependencies.length > 0 && (
+
+
+ )}
+
+ {/* File path */}
+ {spec?.filePath && (
+
+
+ {spec.filePath}
+
+
+ )}
+
+
+ {componentExports.map((exp) => (
+
+ {exp}
+
+ ))}
+
+
+ {spec.dataSlots.map((slot) => (
+
+ [data-slot="{slot}"]
+
+ ))}
+
+
+ {component.registryDependencies.map((dep) => (
+
+ {dep}
+
+ ))}
+
+
+ {component.dependencies.map((dep) => (
+
+ {dep}
+
+ ))}
+
+
+
+ )}
+
+ {docs && docs.composedWith.length > 0 && (
+
+
+ + Props +
+
+ {docs.props.map((prop) => (
+
+
+ ))}
+
+
+
+
+ {prop.type}
+
+ {prop.default && (
+
+ Default:{" "}
+ {prop.default}
+
+ )}
+ {prop.description}
+
+
+ )}
+
+ {docs && docs.examples.length > 0 && (
+
+
+ + Works With +
+
+
+
+ {docs.composedWith.map((slug) => (
+
+ {slug}
+
+ ))}
+
+
+
+ )}
+
+ {/* ── Prev / Next (bottom, below xl) ── */}
+ + Examples +
+ {docs.examples.map((example) => ( +
+
+ ))}
+
+
+ {example.title}
+ {example.description && ( ++ {example.description} +
+ )} +
+
+
+
+
+ {prev ? (
+
+
+
+ {/* spacer for bottom nav hidden on xl */}
+
+
+
+ Previous
+
+
+ {prev.name}
+
+
+
+ ) : (
+
+ )}
+ {next ? (
+
+
+ Next
+
+ {next.name}
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/demo-loader.tsx b/apps/docs/src/components/docs/demo-loader.tsx
new file mode 100644
index 0000000..b95c5bc
--- /dev/null
+++ b/apps/docs/src/components/docs/demo-loader.tsx
@@ -0,0 +1,536 @@
+"use client";
+
+import { Skeleton } from "ghost-ui";
+import { lazy, Suspense, useMemo } from "react";
+
+const exampleModules = import.meta.glob<{ default: React.ComponentType }>(
+ "/src/components/docs/examples/**/*.tsx",
+);
+
+const LoadingSkeleton = () => (
+
+
+);
+
+export function ExampleLoader({
+ componentSlug,
+ exampleName,
+}: {
+ componentSlug: string;
+ exampleName: string;
+}) {
+ const path = `/src/components/docs/examples/${componentSlug}/${exampleName}.tsx`;
+ const loader = exampleModules[path];
+
+ const LazyComponent = useMemo(() => {
+ if (!loader) return null;
+ return lazy(loader);
+ }, [loader]);
+
+ if (!LazyComponent) return null;
+
+ return (
+
+ Component “{name}” not found
+
+ );
+ }
+
+ return (
+
+
+
+
+
+
+
+
+ TypeScript
+
+
+ Python
+
+
+ Rust
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/examples/conversation/with-messages.tsx b/apps/docs/src/components/docs/examples/conversation/with-messages.tsx
new file mode 100644
index 0000000..a7f1f2c
--- /dev/null
+++ b/apps/docs/src/components/docs/examples/conversation/with-messages.tsx
@@ -0,0 +1,46 @@
+import {
+ Conversation,
+ ConversationContent,
+ ConversationScrollButton,
+ Message,
+ MessageContent,
+ MessageResponse,
+} from "ghost-ui";
+
+const messages = [
+ { id: "1", role: "user" as const, text: "What is TypeScript?" },
+ {
+ id: "2",
+ role: "assistant" as const,
+ text: "TypeScript is a strongly-typed superset of JavaScript developed by Microsoft. It adds optional static type checking, interfaces, enums, and other features that help catch errors at compile time rather than at runtime.",
+ },
+ { id: "3", role: "user" as const, text: "How does it compare to Flow?" },
+ {
+ id: "4",
+ role: "assistant" as const,
+ text: "Both TypeScript and Flow add static types to JavaScript, but they differ in key ways:\n\n- **Adoption**: TypeScript has much wider community adoption and tooling support.\n- **Type system**: TypeScript uses a structural type system; Flow also uses structural typing but with some nominal typing features.\n- **Tooling**: TypeScript ships its own compiler (`tsc`), while Flow relies on Babel for compilation.\n- **Ecosystem**: TypeScript has DefinitelyTyped with type definitions for thousands of packages.",
+ },
+];
+
+export default function ConversationWithMessages() {
+ return (
+
+
+
+ {messages.map((msg) => (
+
+
+ {msg.role === "assistant" ? (
+ {msg.text}
+ ) : (
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/examples/message/streaming.tsx b/apps/docs/src/components/docs/examples/message/streaming.tsx
new file mode 100644
index 0000000..eb2f82d
--- /dev/null
+++ b/apps/docs/src/components/docs/examples/message/streaming.tsx
@@ -0,0 +1,24 @@
+import { Message, MessageContent, MessageResponse, Shimmer } from "ghost-ui";
+
+export default function MessageStreaming() {
+ return (
+ {msg.text}
+ )} +
+
+
+
+
+
+
+
+
+ {`Quantum entanglement is when two particles become linked so that measuring one instantly affects the other, no matter how far apart they are. Einstein called it "spooky action at a distance."`}
+
+
+ Generating...
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/examples/message/with-actions.tsx b/apps/docs/src/components/docs/examples/message/with-actions.tsx
new file mode 100644
index 0000000..b616964
--- /dev/null
+++ b/apps/docs/src/components/docs/examples/message/with-actions.tsx
@@ -0,0 +1,47 @@
+import {
+ Message,
+ MessageAction,
+ MessageActions,
+ MessageContent,
+ MessageResponse,
+} from "ghost-ui";
+import {
+ CopyIcon,
+ RefreshCwIcon,
+ ThumbsDownIcon,
+ ThumbsUpIcon,
+} from "lucide-react";
+
+export default function MessageWithActions() {
+ return (
+ Explain quantum entanglement in simple terms.
+
+
+
+
+
+
+
+
+
+ {`You can center a div using **flexbox**:\n\n\`\`\`css\n.parent {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\`\`\`\n\nOr use **grid**:\n\n\`\`\`css\n.parent {\n display: grid;\n place-items: center;\n}\n\`\`\``}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/examples/prompt-input/with-attachments.tsx b/apps/docs/src/components/docs/examples/prompt-input/with-attachments.tsx
new file mode 100644
index 0000000..549ee0e
--- /dev/null
+++ b/apps/docs/src/components/docs/examples/prompt-input/with-attachments.tsx
@@ -0,0 +1,31 @@
+import {
+ PromptInput,
+ PromptInputActionAddAttachments,
+ PromptInputFooter,
+ PromptInputSubmit,
+ PromptInputTextarea,
+ PromptInputTools,
+} from "ghost-ui";
+
+export default function PromptInputWithAttachments() {
+ return (
+ How do I center a div?
+
+ {
+ console.log("Submitted:", msg);
+ }}
+ >
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/external-link.tsx b/apps/docs/src/components/docs/external-link.tsx
new file mode 100644
index 0000000..ae98915
--- /dev/null
+++ b/apps/docs/src/components/docs/external-link.tsx
@@ -0,0 +1,40 @@
+import { cn } from "ghost-ui";
+import { ArrowUpRight } from "lucide-react";
+import { ComponentProps } from "react";
+
+interface ExternalLinkProps extends ComponentProps<"a"> {
+ showIcon?: boolean;
+}
+
+export function ExternalLink({
+ href,
+ className,
+ children,
+ title,
+ showIcon,
+ ...rest
+}: ExternalLinkProps) {
+ if (!children) return null;
+
+ return (
+
+ {children}
+ {showIcon && (
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/foundations/typography.tsx b/apps/docs/src/components/docs/foundations/typography.tsx
new file mode 100644
index 0000000..17c8b74
--- /dev/null
+++ b/apps/docs/src/components/docs/foundations/typography.tsx
@@ -0,0 +1,297 @@
+export function TypographyDemos() {
+ return (
+
+
+
+ + constant +
+
+
+
+
+
+ white
+
+
+
+ black
+
+
+
+ + gray +
+
+
+
+
+
+ gray 50
+
+
+
+ gray 100
+
+
+
+ gray 200
+
+
+
+ gray 300
+
+
+
+ gray 400
+
+
+
+ gray 500
+
+
+
+ gray 600
+
+
+
+ gray 700
+
+
+
+ gray 800
+
+
+
+ gray 900
+
+
+
+ + red +
+
+
+
+
+
+ red 100
+
+
+
+ red 200
+
+
+
+ + blue +
+
+
+
+
+
+ blue 100
+
+
+
+ blue 200
+
+
+
+ + green +
+
+
+
+
+
+ green 100
+
+
+
+ green 200
+
+
+
+ {/* Semantic Colors */}
+ + yellow +
+
+
+
+
+
+ yellow 100
+
+
+
+ yellow 200
+
+
+
+ {/* Border Colors */}
+ + background +
+
+
+
+
+
+ background default
+
+
+
+ background alt
+
+
+
+ background medium
+
+
+
+ background muted
+
+
+
+ background inverse
+
+
+
+ background danger
+
+
+
+ background success
+
+
+
+ background accent
+
+
+
+ {/* Text Colors */}
+ + border +
+
+
+
+
+
+ border default
+
+
+
+ border card
+
+
+
+ border input
+
+
+
+ border input hover
+
+
+
+ border strong
+
+
+
+ border danger
+
+
+
+ border success
+
+
+
+ border warning
+
+
+
+ border info
+
+
+
+ border accent
+
+
+
+ {/* Dark Surfaces */}
+ + text +
+
+
+
+
+ hello world
+text default
+
+
+ hello world
+text alt
+
+
+ hello world
+text muted
+
+
+ + hello world +
+text inverse
+
+
+ hello world
+text danger
+
+
+ hello world
+text success
+
+
+ hello world
+text warning
+
+
+ hello world
+text info
+
+
+ hello world
+text accent
+
+
+
+ {/* Chart Colors */}
+ + dark surface +
+
+
+
+
+
+
+ surface dark
+
+
+
+
+ + surface dark muted +
+
+
+
+
+ + surface dark border +
+
+
+
+ {/* Shadows */}
+ + chart +
+
+
+
+
+
+ chart 1
+
+
+
+ chart 2
+
+
+
+ chart 3
+
+
+
+ chart 4
+
+
+
+ chart 5
+
+
+
+ {/* Radii */}
+ + shadow +
+
+
+
+
+
+ shadow mini
+
+
+
+ shadow card
+
+
+
+ shadow elevated
+
+
+
+ shadow popover
+
+
+
+ shadow modal
+
+
+
+ shadow btn
+
+
+
+ shadow kbd
+
+
+ + radius +
+
+
+
+
+
+ pill (999px)
+
+
+
+ button (999px)
+
+
+
+ input (999px)
+
+
+
+ modal (16px)
+
+
+
+ card lg (16px)
+
+
+
+ card (12px)
+
+
+
+ card sm (10px)
+
+
+
+ dropdown (10px)
+
+ {/* Heading Hierarchy */}
+
+ );
+}
diff --git a/apps/docs/src/components/docs/icons.tsx b/apps/docs/src/components/docs/icons.tsx
new file mode 100644
index 0000000..6517c56
--- /dev/null
+++ b/apps/docs/src/components/docs/icons.tsx
@@ -0,0 +1,165 @@
+type IconProps = React.HTMLAttributes
+
+
+ {/* Labels */}
+ + Headings +
+
+
+
+
+ + Display +
++ Display / 64–96px / Black (900) /-0.05em / 0.88 lh +
+
+
+ + Section heading +
++ Section / 44–64px / Bold (700) /-0.035em / 0.95 lh +
+
+
+ + Subsection heading +
++ Sub / 28–40px / Bold (700) /-0.02em / 1.0 lh +
+
+
+ + Card heading +
++ Card / 20–28px / Semibold (600) /-0.01em / 1.1 lh +
+
+
+
+ {/* Pull Quotes */}
+ + Labels +
+
+
+
+
+
+
+ + Culture +
++ The Future of Open Design +
+
+
+ + Design · March 2026 +
++ Systems That Scale +
++ 11px / Semibold (600) / uppercase / +0.12em tracking +
+
+
+
+ {/* Type Scale */}
+ + Pull Quotes +
+
+
+
+
+ + The magic that happens when you work in the open — co-creation, + co-celebration. ++
+ Pull quote / 1.5–2.5rem / Light (300) / -0.02em / 1.3 lh +
+
+
+
+ {/* Font Weights */}
+ + Type Scale +
+
+
+
+
+ + Open source design: all for one, one for all. +
+9XL / Light
+
+
+ + AI will not replace your job. Humans that use AI will. +
+8XL / Light
+
+
+ + Leave it cleaner than you found it. +
+7XL / Light
+
+
+ + The magic that happens when you work in the open. +
+6XL / Light
+
+
+ + Actual open AI. Co-creation, co-celebration. +
+5XL / Light
+
+
+
+ Work hard smarter, play hard in the grass.
+
4XL / Light
+
+
+ + The first rule of open source design is you talk about open source + design +
+3XL / Light
+
+
+ + Open source design: all for one, one for all. +
+2XL / Light
+
+
+ + The magic that happens when you work in the open. +
+XL / Light
+
+
+ + Leave it cleaner than you found it. +
+LG / Light
+
+
+
+ Work hard smarter, play hard in the grass.
+
BASE / Light
+
+
+ + Actual open AI. Co-creation, co-celebration. +
+SM / Light
+
+
+ + AI will not replace your job. Humans that use AI will. +
+XS / Light
+
+
+
+ {/* Font Families */}
+ + Weights +
+
+
+
+
+ The quick brown fox
+300 / Light
+
+
+ The quick brown fox
+400 / Regular
+
+
+ The quick brown fox
+500 / Medium
+
+
+ The quick brown fox
+600 / Semibold
+
+
+ The quick brown fox
+700 / Bold
+
+
+ The quick brown fox
+900 / Black
+
+
+ + Families +
+
+
+
+
+ + The quick brown fox jumps over the lazy dog +
+font-sans
+
+
+ + The quick brown fox jumps over the lazy dog +
+font-display
+
+
+ + Geist Mono — The quick brown fox +
+font-mono
+{children}
+
+
+
+ Is it accessible?
+
+ Yes. It adheres to the WAI-ARIA design pattern.
+
+
+
+ Is it styled?
+
+ Yes. It comes with default styles that matches the other
+ components' aesthetic.
+
+
+
+ Is it animated?
+
+ Yes. It's animated by default, but you can disable it if you
+ prefer.
+
+
+
+
+
+
+ What are the key considerations when implementing a comprehensive
+ enterprise-level authentication system?
+
+
+ Implementing a robust enterprise authentication system requires
+ careful consideration of multiple factors. This includes secure
+ password hashing and storage, multi-factor authentication (MFA)
+ implementation, session management, OAuth2 and SSO integration,
+ regular security audits, rate limiting to prevent brute force
+ attacks, and maintaining detailed audit logs. Additionally,
+ you'll need to consider scalability, performance impact, and
+ compliance with relevant data protection regulations such as GDPR or
+ HIPAA.
+
+
+
+
+ How does modern distributed system architecture handle eventual
+ consistency and data synchronization across multiple regions?
+
+
+ Modern distributed systems employ various strategies to maintain
+ data consistency across regions. This often involves using
+ techniques like CRDT (Conflict-Free Replicated Data Types), vector
+ clocks, and gossip protocols. Systems might implement event sourcing
+ patterns, utilize message queues for asynchronous updates, and
+ employ sophisticated conflict resolution strategies. Popular
+ solutions like Amazon's DynamoDB and Google's Spanner
+ demonstrate different approaches to solving these challenges,
+ balancing between consistency, availability, and partition tolerance
+ as described in the CAP theorem.
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/alert-demo.tsx b/apps/docs/src/components/docs/primitives/alert-demo.tsx
new file mode 100644
index 0000000..4690fd0
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/alert-demo.tsx
@@ -0,0 +1,109 @@
+import { Alert, AlertDescription, AlertTitle, Button } from "ghost-ui";
+import {
+ AlertCircleIcon,
+ BookmarkCheckIcon,
+ CheckCircle2Icon,
+ GiftIcon,
+ PopcornIcon,
+ ShieldAlertIcon,
+} from "lucide-react";
+
+export function AlertDemo() {
+ return (
+
+
+ Success! Your changes have been saved
+
+ This is an alert with icon, title and description.
+
+
+
+ Heads up!
+
+ This one has an icon and a description only. No title.
+
+
+
+
+ This one has a description only. No title. No icon.
+
+
+
+ Let's try one with icon and title.
+
+
+
+ This is a very long alert title that demonstrates how the component
+ handles extended text content and potentially wraps across multiple
+ lines
+
+
+
+
+ This is a very long alert description that demonstrates how the
+ component handles extended text content and potentially wraps across
+ multiple lines
+
+
+
+
+ This is an extremely long alert title that spans multiple lines to
+ demonstrate how the component handles very lengthy headings while
+ maintaining readability and proper text wrapping behavior
+
+
+ This is an equally long description that contains detailed information
+ about the alert. It shows how the component can accommodate extensive
+ content while preserving proper spacing, alignment, and readability
+ across different screen sizes and viewport widths. This helps ensure
+ the user experience remains consistent regardless of the content
+ length.
+
+
+
+ Something went wrong!
+
+ Your session has expired. Please log in again.
+
+
+
+ Unable to process your payment.
+
+
+
+
+
+ The selected emails have been marked as spam.
+
+
+
+
+ Plot Twist: This Alert is Actually Amber!
+
+ This one has custom colors for light and dark mode.
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/alert-dialog-demo.tsx b/apps/docs/src/components/docs/primitives/alert-dialog-demo.tsx
new file mode 100644
index 0000000..a37afac
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/alert-dialog-demo.tsx
@@ -0,0 +1,35 @@
+import {
+ AlertDialog,
+ AlertDialogAction,
+ AlertDialogCancel,
+ AlertDialogContent,
+ AlertDialogDescription,
+ AlertDialogFooter,
+ AlertDialogHeader,
+ AlertDialogTitle,
+ AlertDialogTrigger,
+ Button,
+} from "ghost-ui";
+
+export function AlertDialogDemo() {
+ return (
+ Please verify your billing information and try again.
+-
+
- Check your card details +
- Ensure sufficient funds +
- Verify billing address +
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/avatar-demo.tsx b/apps/docs/src/components/docs/primitives/avatar-demo.tsx
new file mode 100644
index 0000000..bd40cc9
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/avatar-demo.tsx
@@ -0,0 +1,92 @@
+import { Avatar, AvatarFallback, AvatarImage } from "ghost-ui";
+
+export function AvatarDemo() {
+ return (
+
+ 16:9
+
+
+ 1:1
+
+
+
+ NK
+
+
+ NK
+
+
+ NK
+
+
+ SM
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/badge-demo.tsx b/apps/docs/src/components/docs/primitives/badge-demo.tsx
new file mode 100644
index 0000000..d4b55b2
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/badge-demo.tsx
@@ -0,0 +1,60 @@
+import { Badge } from "ghost-ui";
+import { AlertCircleIcon, ArrowRightIcon, CheckIcon } from "lucide-react";
+
+export function BadgeDemo() {
+ return (
+
+
+ NK
+
+
+ BA
+
+
+ SM
+
+
+
+
+ NK
+
+
+ BA
+
+
+ SM
+
+
+
+
+ NK
+
+
+ BA
+
+
+ SM
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/breadcrumb-demo.tsx b/apps/docs/src/components/docs/primitives/breadcrumb-demo.tsx
new file mode 100644
index 0000000..4ca09c3
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/breadcrumb-demo.tsx
@@ -0,0 +1,47 @@
+import {
+ Breadcrumb,
+ BreadcrumbEllipsis,
+ BreadcrumbItem,
+ BreadcrumbLink,
+ BreadcrumbList,
+ BreadcrumbPage,
+ BreadcrumbSeparator,
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "ghost-ui";
+
+export function BreadcrumbDemo() {
+ return (
+
+ Badge
+ Secondary
+ Destructive
+ Outline
+
+
+
+
+
+ 8
+
+
+ 99
+
+
+ 20+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/calendar-demo.tsx b/apps/docs/src/components/docs/primitives/calendar-demo.tsx
new file mode 100644
index 0000000..9d4d03d
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/calendar-demo.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { addDays } from "date-fns";
+import { Calendar } from "ghost-ui";
+import * as React from "react";
+import { type DateRange } from "react-day-picker";
+
+export function CalendarDemo() {
+ const [date, setDate] = React.useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ date > new Date() || date < new Date("1900-01-01")}
+ className="rounded-md border"
+ />
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/card-demo.tsx b/apps/docs/src/components/docs/primitives/card-demo.tsx
new file mode 100644
index 0000000..05974cb
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/card-demo.tsx
@@ -0,0 +1,187 @@
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+ Badge,
+ Button,
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+ Input,
+ Label,
+} from "ghost-ui";
+import { BathIcon, BedIcon, LandPlotIcon } from "lucide-react";
+export function CardDemo() {
+ return (
+
+
+
+ Login to your account
+
+ Enter your email below to login to your account
+
+
+
+
+
+
+
+
+
+
+
+
+ Meeting Notes
+
+ Transcript from the meeting with the client.
+
+
+
+
+
+
+
+
+
+ Is this an image?
+ This is a card with an image.
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/carousel-demo.tsx b/apps/docs/src/components/docs/primitives/carousel-demo.tsx
new file mode 100644
index 0000000..6402d64
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/carousel-demo.tsx
@@ -0,0 +1,79 @@
+import {
+ Card,
+ CardContent,
+ Carousel,
+ CarouselContent,
+ CarouselItem,
+ CarouselNext,
+ CarouselPrevious,
+} from "ghost-ui";
+import * as React from "react";
+
+export function CarouselDemo() {
+ return (
+
+ Don't have an account?{" "}
+
+ Sign up
+
+
+ + Client requested dashboard redesign with focus on mobile + responsiveness. +
+-
+
- New analytics widgets for daily/weekly metrics +
- Simplified navigation menu +
- Dark mode support +
- Timeline: 6 weeks +
- Follow-up meeting scheduled for next Tuesday +
+
+ NK
+
+
+ BA
+
+
+ SM
+
+
+
+ $135,000
+
+
+ Content Only
+
+
+
+ Header Only
+
+ This is a card with a header and a description.
+
+
+
+
+
+ Header and Content
+
+ This is a card with a header and a content.
+
+
+ Content
+
+
+ Footer Only
+
+
+
+ Header + Footer
+
+ This is a card with a header and a footer.
+
+
+ Footer
+
+
+ Content
+ Footer
+
+
+
+ Header + Footer
+
+ This is a card with a header and a footer.
+
+
+ Content
+ Footer
+
+
+
+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+ ))}
+
+
+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+ ))}
+
+
+
+
+ {Array.from({ length: 5 }).map((_, index) => (
+
+
+ ))}
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/chart-area-demo.tsx b/apps/docs/src/components/docs/primitives/chart-area-demo.tsx
new file mode 100644
index 0000000..45bf4ae
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/chart-area-demo.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+ ChartConfig,
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+} from "ghost-ui";
+import { TrendingUp } from "lucide-react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+
+export const description = "A simple area chart";
+
+const chartData = [
+ { month: "January", desktop: 186 },
+ { month: "February", desktop: 305 },
+ { month: "March", desktop: 237 },
+ { month: "April", desktop: 73 },
+ { month: "May", desktop: 209 },
+ { month: "June", desktop: 214 },
+];
+
+const chartConfig = {
+ desktop: {
+ label: "Desktop",
+ color: "var(--chart-1)",
+ },
+} satisfies ChartConfig;
+
+export function ChartAreaDemo() {
+ return (
+
+
+
+
+ {index + 1}
+
+
+
+
+
+
+
+
+ {index + 1}
+
+
+
+
+
+
+
+
+ {index + 1}
+
+
+
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ January - June 2024
+
+
+
+
+
+
+ Range increased by 12%
+
+ January - June 2024
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/chart-line-demo.tsx b/apps/docs/src/components/docs/primitives/chart-line-demo.tsx
new file mode 100644
index 0000000..8c48a19
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/chart-line-demo.tsx
@@ -0,0 +1,97 @@
+"use client";
+
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+ ChartConfig,
+ ChartContainer,
+ ChartTooltip,
+ ChartTooltipContent,
+} from "ghost-ui";
+import { TrendingUp } from "lucide-react";
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
+
+export const description = "A multiple line chart";
+
+const chartData = [
+ { month: "January", desktop: 186, mobile: 80 },
+ { month: "February", desktop: 305, mobile: 200 },
+ { month: "March", desktop: 237, mobile: 120 },
+ { month: "April", desktop: 73, mobile: 190 },
+ { month: "May", desktop: 209, mobile: 130 },
+ { month: "June", desktop: 214, mobile: 140 },
+];
+
+const chartConfig = {
+ desktop: {
+ label: "Desktop",
+ color: "var(--chart-1)",
+ },
+ mobile: {
+ label: "Mobile",
+ color: "var(--chart-2)",
+ },
+} satisfies ChartConfig;
+
+export function ChartLineDemo() {
+ return (
+
+
+
+
+
+
+
+ Trending up by 5.2% this month
+
+ Showing total visitors for the last 6 months
+
+
+ Desktop usage up 5.2%
+
+ Based on total visits in last 6 months
+
+
+ Net positive trend
+
+ Showing monthly growth rate changes
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/collapsible-demo.tsx b/apps/docs/src/components/docs/primitives/collapsible-demo.tsx
new file mode 100644
index 0000000..74a3c3f
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/collapsible-demo.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import {
+ Button,
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from "ghost-ui";
+import { ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+
+export function CollapsibleDemo() {
+ const [isOpen, setIsOpen] = React.useState(false);
+
+ return (
+
+
+
+
+
+
+
+ + By clicking this checkbox, you agree to the terms and conditions. +
+
+
+
+
+
+
+
+
+ + @peduarte starred 3 repositories +
+
+ @radix-ui/primitives
+
+
+ @radix-ui/colors
+
+
+ @stitches/react
+
+
+
+ );
+}
+
+function FrameworkCombobox({ frameworks }: { frameworks: Framework[] }) {
+ const [open, setOpen] = React.useState(false);
+ const [value, setValue] = React.useState("");
+
+ return (
+ f.value === framework.value,
+ )}
+ >
+
+ {framework.label}
+ + Press{" "} + + ⌘J + +
+
+
+
+
+
+
+
+
+
+ {`npx shadcn@latest add `}
+ {name}
+
+
+ */}
+
+
+
+ {getComponentName(name)}
+
+
+
+
+
+
+ {/*
+
+
+
+
+
+
+
+ {showUrl && (
+
+
+ {internalUrl ? (
+
+
+ )}
+
+
+ {children}
+
+
+
+ );
+}
+
+function DatePickerSimple() {
+ const [date, setDate] = React.useState
+
+ );
+}
+
+function DialogWithForm() {
+ return (
+
+ );
+}
+
+function DialogScrollableContent() {
+ return (
+
+ );
+}
+
+function DialogWithStickyFooter() {
+ return (
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/drawer-demo.tsx b/apps/docs/src/components/docs/primitives/drawer-demo.tsx
new file mode 100644
index 0000000..530deef
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/drawer-demo.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import {
+ Button,
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerDescription,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "ghost-ui";
+import { Minus, Plus } from "lucide-react";
+import * as React from "react";
+import { Bar, BarChart, ResponsiveContainer } from "recharts";
+
+const data = [
+ {
+ goal: 400,
+ },
+ {
+ goal: 300,
+ },
+ {
+ goal: 200,
+ },
+ {
+ goal: 300,
+ },
+ {
+ goal: 200,
+ },
+ {
+ goal: 278,
+ },
+ {
+ goal: 189,
+ },
+ {
+ goal: 239,
+ },
+ {
+ goal: 300,
+ },
+ {
+ goal: 200,
+ },
+ {
+ goal: 278,
+ },
+ {
+ goal: 189,
+ },
+ {
+ goal: 349,
+ },
+];
+
+export function DrawerDemo() {
+ return (
+
+
+ );
+}
+
+function DrawerBottom() {
+ const [goal, setGoal] = React.useState(350);
+
+ const onClick = React.useCallback((adjustment: number) => {
+ setGoal((prevGoal) => Math.max(200, Math.min(400, prevGoal + adjustment)));
+ }, []);
+
+ return (
+
+
+ Payment Amount
+ Set your payment amount.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {goal}
+
+ USD
+
+
+
+ + Lorem Ipsum +
+ {Array.from({ length: 10 }).map((_, index) => ( ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut + enim ad minim veniam, quis nostrud exercitation ullamco laboris + nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident, + sunt in culpa qui officia deserunt mollit anim id est laborum. +
+ ))} +
+ {Array.from({ length: 10 }).map((_, index) => (
+
+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. +
+ ))} +
+
+ );
+}
+
+function DropdownMenuSimple() {
+ return (
+
+
+ NK
+
+
+
+ nahiyankhan
+
+ nahiyankhan@example.com
+
+
+
+
+ NK
+
+
+
+ nahiyankhan
+
+ nahiyankhan@example.com
+
+
+
+ {JSON.stringify(data, null, 2)}
+
+ ),
+ });
+ }
+
+ return (
+
+
+
+ Upgrade your subscription
+
+ You are currently on the free plan. Upgrade to the pro plan to get
+ access to all features.
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/hover-card-demo.tsx b/apps/docs/src/components/docs/primitives/hover-card-demo.tsx
new file mode 100644
index 0000000..d2104e4
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/hover-card-demo.tsx
@@ -0,0 +1,40 @@
+import {
+ Avatar,
+ AvatarFallback,
+ AvatarImage,
+ Button,
+ HoverCard,
+ HoverCardContent,
+ HoverCardTrigger,
+} from "ghost-ui";
+import { CalendarIcon } from "lucide-react";
+
+export function HoverCardDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ VC
+
+
+
+
+ @nextjs
++ The React Framework – created and maintained by @vercel. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/input-demo.tsx b/apps/docs/src/components/docs/primitives/input-demo.tsx
new file mode 100644
index 0000000..381a35f
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/input-demo.tsx
@@ -0,0 +1,23 @@
+import { Input } from "ghost-ui";
+
+export function InputDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/input-otp-demo.tsx b/apps/docs/src/components/docs/primitives/input-otp-demo.tsx
new file mode 100644
index 0000000..e1aa37d
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/input-otp-demo.tsx
@@ -0,0 +1,108 @@
+"use client";
+
+import {
+ InputOTP,
+ InputOTPGroup,
+ InputOTPSeparator,
+ InputOTPSlot,
+ Label,
+} from "ghost-ui";
+import { REGEXP_ONLY_DIGITS } from "input-otp";
+import * as React from "react";
+
+export function InputOTPDemo() {
+ return (
+
+
+ );
+}
+
+function InputOTPSimple() {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function InputOTPPattern() {
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+function InputOTPWithSeparator() {
+ const [value, setValue] = React.useState("123456");
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+function InputOTPWithSpacing() {
+ return (
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/label-demo.tsx b/apps/docs/src/components/docs/primitives/label-demo.tsx
new file mode 100644
index 0000000..28a8358
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/label-demo.tsx
@@ -0,0 +1,24 @@
+import { Checkbox, Input, Label, Textarea } from "ghost-ui";
+
+export function LabelDemo() {
+ return (
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/menubar-demo.tsx b/apps/docs/src/components/docs/primitives/menubar-demo.tsx
new file mode 100644
index 0000000..78f6707
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/menubar-demo.tsx
@@ -0,0 +1,129 @@
+import {
+ Menubar,
+ MenubarCheckboxItem,
+ MenubarContent,
+ MenubarGroup,
+ MenubarItem,
+ MenubarMenu,
+ MenubarRadioGroup,
+ MenubarRadioItem,
+ MenubarSeparator,
+ MenubarShortcut,
+ MenubarSub,
+ MenubarSubContent,
+ MenubarSubTrigger,
+ MenubarTrigger,
+} from "ghost-ui";
+import { HelpCircleIcon, SettingsIcon, Trash2Icon } from "lucide-react";
+
+export function MenubarDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Getting started
+
+
+
+
+ Components
+
+
+
+
+
+ Documentation
+
+
+
+
+
+
+
+
+ Documentation
+
+
+
+ List
+
+
+
+
+ Simple List
+
+
+
+
+ With Icon
+
+
+
+
+
+
+ );
+}
+
+function ListItem({
+ title,
+ children,
+ href,
+ ...props
+}: React.ComponentPropsWithoutRef<"li"> & { href: string }) {
+ return (
+ -
+
-
+
+ + +shadcn/ui++ Beautifully designed components built with Tailwind CSS. +
+ +
+
-
+ {components.map((component) => (
+
-
+
-
+
+ + +Components++ Browse all components in the library. ++ ++ + +Documentation++ Learn how to use the library. ++ ++ + +Blog++ Read our latest blog posts. ++ +
+
-
+
-
+
+ Components + ++ Documentation + ++ Blocks + +
+
-
+
-
+
+ + ++ Backlog + + + + ++ To Do + + + + ++ Done + +
+
{title}
+ + {children} +
+ +
+
+
+
+
+
+ 1
+
+
+
+ 2
+
+
+
+ 3
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/popover-demo.tsx b/apps/docs/src/components/docs/primitives/popover-demo.tsx
new file mode 100644
index 0000000..fc32da7
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/popover-demo.tsx
@@ -0,0 +1,64 @@
+import {
+ Button,
+ Input,
+ Label,
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "ghost-ui";
+
+export function PopoverDemo() {
+ return (
+
+
+
+
+ + Dimensions +
++ Set the dimensions for the layer. +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {plans.map((plan) => (
+
+ ))}
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/resizable-demo.tsx b/apps/docs/src/components/docs/primitives/resizable-demo.tsx
new file mode 100644
index 0000000..835194d
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/resizable-demo.tsx
@@ -0,0 +1,66 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "ghost-ui";
+
+export function ResizableDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/scroll-area-demo.tsx b/apps/docs/src/components/docs/primitives/scroll-area-demo.tsx
new file mode 100644
index 0000000..f21ec8a
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/scroll-area-demo.tsx
@@ -0,0 +1,73 @@
+import { ScrollArea, ScrollBar, Separator } from "ghost-ui";
+import * as React from "react";
+export function ScrollAreaDemo() {
+ return (
+
+ One
+
+
+ Two
+
+
+ Three
+
+
+ Sidebar
+
+
+ Content
+
+
+ Header
+
+
+ Content
+
+
+
+ );
+}
+
+const tags = Array.from({ length: 50 }).map(
+ (_, i, a) => `v1.2.0-beta.${a.length - i}`,
+);
+
+function ScrollAreaVertical() {
+ return (
+
+
+
+
+ );
+}
+
+export const works = [
+ {
+ artist: "Placeholder Name",
+ },
+ {
+ artist: "Placeholder Name",
+ },
+ {
+ artist: "Placeholder Name",
+ },
+] as const;
+
+function ScrollAreaHorizontalDemo() {
+ return (
+
+
+
+ ))}
+
+ + Tags +
+ {tags.map((tag) => ( +{tag}
+
+ {works.map((artwork, index) => (
+
+
+ Photo by{" "}
+
+ {artwork.artist}
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/separator-demo.tsx b/apps/docs/src/components/docs/primitives/separator-demo.tsx
new file mode 100644
index 0000000..57ca076
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/separator-demo.tsx
@@ -0,0 +1,22 @@
+import { Separator } from "ghost-ui";
+
+export function SeparatorDemo() {
+ return (
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/sheet-demo.tsx b/apps/docs/src/components/docs/primitives/sheet-demo.tsx
new file mode 100644
index 0000000..bef1b5d
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/sheet-demo.tsx
@@ -0,0 +1,95 @@
+import {
+ Button,
+ Input,
+ Label,
+ Sheet,
+ SheetClose,
+ SheetContent,
+ SheetDescription,
+ SheetFooter,
+ SheetHeader,
+ SheetTitle,
+ SheetTrigger,
+} from "ghost-ui";
+
+const SHEET_SIDES = ["top", "right", "bottom", "left"] as const;
+
+export function SheetDemo() {
+ return (
+
+
+ Tailwind CSS
+
+ A utility-first CSS framework.
+
+
+
+ Blog
+ Docs
+ Source
+
+
+
+
+
+
+
+ Edit profile
+
+ Make changes to your profile here. Click save when you're
+ done.
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/skeleton-demo.tsx b/apps/docs/src/components/docs/primitives/skeleton-demo.tsx
new file mode 100644
index 0000000..29f9292
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/skeleton-demo.tsx
@@ -0,0 +1,28 @@
+import { Card, CardContent, CardHeader, Skeleton } from "ghost-ui";
+
+export function SkeletonDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ {SHEET_SIDES.map((side) => (
+
+
+
+
+
+
+ Edit profile
+
+ Make changes to your profile here. Click save when you're
+ done.
+
+
+
+
+
+
+
+
+
+
+ ))}
+
+
+
+ + Lorem Ipsum +
+ {Array.from({ length: 10 }).map((_, index) => ( ++ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed + do eiusmod tempor incididunt ut labore et dolore magna + aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit + esse cillum dolore eu fugiat nulla pariatur. Excepteur sint + occaecat cupidatat non proident, sunt in culpa qui officia + deserunt mollit anim id est laborum. +
+ ))} +
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/slider-demo.tsx b/apps/docs/src/components/docs/primitives/slider-demo.tsx
new file mode 100644
index 0000000..3ed8978
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/slider-demo.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import { Label, Slider } from "ghost-ui";
+import * as React from "react";
+
+export function SliderDemo() {
+ return (
+
+
+
+
+
+ {Array.from({ length: 3 }).map((_, index) => (
+
+
+
+
+
+
+ ))}
+
+
+
+ );
+}
+
+function SliderControlled() {
+ const [value, setValue] = React.useState([0.3, 0.7]);
+
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/sonner-demo.tsx b/apps/docs/src/components/docs/primitives/sonner-demo.tsx
new file mode 100644
index 0000000..c2554f2
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/sonner-demo.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { Button } from "ghost-ui";
+import * as React from "react";
+import { toast } from "sonner";
+
+const promiseCode = "`${data.name} toast has been added`";
+
+const allTypes = [
+ {
+ name: "Default",
+ snippet: `toast('Event has been created')`,
+ action: () => toast("Event has been created"),
+ },
+ {
+ name: "Description",
+ snippet: `toast.message('Event has been created', {
+ description: 'Monday, January 3rd at 6:00pm',
+})`,
+ action: () =>
+ toast("Event has been created", {
+ description: "Monday, January 3rd at 6:00pm",
+ }),
+ },
+ {
+ name: "Success",
+ snippet: `toast.success('Event has been created')`,
+ action: () => toast.success("Event has been created"),
+ },
+ {
+ name: "Info",
+ snippet: `toast.info('Be at the area 10 minutes before the event time')`,
+ action: () => toast.info("Be at the area 10 minutes before the event time"),
+ },
+ {
+ name: "Warning",
+ snippet: `toast.warning('Event start time cannot be earlier than 8am')`,
+ action: () => toast.warning("Event start time cannot be earlier than 8am"),
+ },
+ {
+ name: "Error",
+ snippet: `toast.error('Event has not been created')`,
+ action: () => toast.error("Event has not been created"),
+ },
+ {
+ name: "Action",
+ action: () =>
+ toast.message("Event has been created", {
+ action: {
+ label: "Undo",
+ onClick: () => console.log("Undo"),
+ },
+ }),
+ },
+ {
+ name: "Cancel",
+ action: () =>
+ toast.message("Event has been created", {
+ cancel: {
+ label: "Cancel",
+ onClick: () => console.log("Cancel"),
+ },
+ }),
+ },
+ {
+ name: "Promise",
+ snippet: `const promise = () => new Promise((resolve) => setTimeout(() => resolve({ name: 'Sonner' }), 2000));
+
+toast.promise(promise, {
+ loading: 'Loading...',
+ success: (data) => {
+ return ${promiseCode};
+ },
+ error: 'Error',
+});`,
+ action: () =>
+ toast.promise<{ name: string }>(
+ () =>
+ new Promise((resolve) => {
+ setTimeout(() => {
+ resolve({ name: "Sonner" });
+ }, 2000);
+ }),
+ {
+ loading: "Loading...",
+ success: (data) => {
+ return `${data.name} toast has been added`;
+ },
+ error: "Error",
+ },
+ ),
+ },
+];
+
+export function SonnerDemo() {
+ const [activeType, setActiveType] = React.useState(allTypes[0]);
+ return (
+
+
+
+ {value.join(", ")}
+
+
+
+
+
+ {allTypes.map((type) => (
+
+ ))}
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/switch-demo.tsx b/apps/docs/src/components/docs/primitives/switch-demo.tsx
new file mode 100644
index 0000000..33470e8
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/switch-demo.tsx
@@ -0,0 +1,33 @@
+import { Label, Switch } from "ghost-ui";
+
+export function SwitchDemo() {
+ return (
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/table-demo.tsx b/apps/docs/src/components/docs/primitives/table-demo.tsx
new file mode 100644
index 0000000..59e18af
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/table-demo.tsx
@@ -0,0 +1,87 @@
+import {
+ Table,
+ TableBody,
+ TableCaption,
+ TableCell,
+ TableFooter,
+ TableHead,
+ TableHeader,
+ TableRow,
+} from "ghost-ui";
+
+const invoices = [
+ {
+ invoice: "INV001",
+ paymentStatus: "Paid",
+ totalAmount: "$250.00",
+ paymentMethod: "Credit Card",
+ },
+ {
+ invoice: "INV002",
+ paymentStatus: "Pending",
+ totalAmount: "$150.00",
+ paymentMethod: "PayPal",
+ },
+ {
+ invoice: "INV003",
+ paymentStatus: "Unpaid",
+ totalAmount: "$350.00",
+ paymentMethod: "Bank Transfer",
+ },
+ {
+ invoice: "INV004",
+ paymentStatus: "Paid",
+ totalAmount: "$450.00",
+ paymentMethod: "Credit Card",
+ },
+ {
+ invoice: "INV005",
+ paymentStatus: "Paid",
+ totalAmount: "$550.00",
+ paymentMethod: "PayPal",
+ },
+ {
+ invoice: "INV006",
+ paymentStatus: "Pending",
+ totalAmount: "$200.00",
+ paymentMethod: "Bank Transfer",
+ },
+ {
+ invoice: "INV007",
+ paymentStatus: "Unpaid",
+ totalAmount: "$300.00",
+ paymentMethod: "Credit Card",
+ },
+];
+
+export function TableDemo() {
+ return (
+
+
+
+
+
+
+
+
+ Account
+ Password
+
+
+
+
+ Account
+
+ Make changes to your account here. Click save when you're
+ done.
+
+
+
+
+
+
+
+
+
+
+
+
+ Password
+
+ Change your password here. After saving, you'll be logged
+ out.
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/textarea-demo.tsx b/apps/docs/src/components/docs/primitives/textarea-demo.tsx
new file mode 100644
index 0000000..12259cc
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/textarea-demo.tsx
@@ -0,0 +1,39 @@
+import { Label, Textarea } from "ghost-ui";
+
+export function TextareaDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Home
+ Settings
+
+
+
+
+ Home
+
+ Disabled
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/toggle-demo.tsx b/apps/docs/src/components/docs/primitives/toggle-demo.tsx
new file mode 100644
index 0000000..4ef1c3b
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/toggle-demo.tsx
@@ -0,0 +1,39 @@
+import { Toggle } from "ghost-ui";
+import {
+ BoldIcon,
+ BookmarkIcon,
+ ItalicIcon,
+ UnderlineIcon,
+} from "lucide-react";
+
+export function ToggleDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+ Type your message and press enter to send.
+
+
+
+
+
+
+
+
+
+
+
+ Disabled
+
+
+
+
+
+
+ Small
+
+
+ Large
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/toggle-group-demo.tsx b/apps/docs/src/components/docs/primitives/toggle-group-demo.tsx
new file mode 100644
index 0000000..1ac43fe
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/toggle-group-demo.tsx
@@ -0,0 +1,71 @@
+import { ToggleGroup, ToggleGroupItem } from "ghost-ui";
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
+
+export function ToggleGroupDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ All
+
+
+ Missed
+
+
+
+
+
+ Last 24 hours
+
+
+ Last 7 days
+
+
+
+
+
+ Last 24 hours
+
+
+ Last 7 days
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/primitives/tooltip-demo.tsx b/apps/docs/src/components/docs/primitives/tooltip-demo.tsx
new file mode 100644
index 0000000..8be1855
--- /dev/null
+++ b/apps/docs/src/components/docs/primitives/tooltip-demo.tsx
@@ -0,0 +1,43 @@
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from "ghost-ui";
+import { InfoIcon } from "lucide-react";
+
+export function TooltipDemo() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ To learn more about how this works, check out the docs. If you have
+ any questions, please reach out to us.
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/docs/registry-sidebar.tsx b/apps/docs/src/components/docs/registry-sidebar.tsx
new file mode 100644
index 0000000..f83837b
--- /dev/null
+++ b/apps/docs/src/components/docs/registry-sidebar.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import {
+ Button,
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+ Input,
+ Sidebar,
+ SidebarContent,
+ SidebarGroup,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ useSidebar,
+} from "ghost-ui";
+import { ChevronDown, Menu, Search } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import { Link, useLocation } from "react-router";
+import {
+ type ComponentEntry,
+ categories,
+ getComponentsByCategory,
+} from "@/lib/component-registry";
+
+const topNav = [
+ { name: "home", path: "/" },
+ { name: "colors", path: "/ui/foundations/colors" },
+ { name: "typography", path: "/ui/foundations/typography" },
+ { name: "all components", path: "/ui/components" },
+];
+
+export function RegistrySidebar() {
+ const { pathname } = useLocation();
+ const { setOpenMobile } = useSidebar();
+
+ const [searchTerm, setSearchTerm] = useState("");
+
+ const filteredCategories = useMemo(() => {
+ const term = searchTerm.toLowerCase();
+ return categories
+ .map((cat) => {
+ const items = getComponentsByCategory(cat.slug);
+ const filtered = term
+ ? items.filter((item) => item.name.toLowerCase().includes(term))
+ : items;
+ return { ...cat, items: filtered };
+ })
+ .filter((cat) => cat.items.length > 0);
+ }, [searchTerm]);
+
+ const hasSearch = searchTerm.length > 0;
+
+ return (
+ <>
+
+
+ Add to library
+
+ {["top", "right", "bottom", "left"].map((side) => (
+
+
+
+
+
+
+
+ ))}
+
+ Add to library
+
+
+
+
+ {label}
+
+ {COLOR_GROUPS.map((group) => (
+
+ );
+}
+
+function rgbToHex(rgb: string): string | null {
+ // Handle hex passthrough
+ if (rgb.startsWith("#")) return rgb;
+
+ // Handle "rgb(r, g, b)" or "r g b" format
+ const match = rgb.match(/(\d+)[,\s]+(\d+)[,\s]+(\d+)/);
+ if (!match) return null;
+
+ const r = parseInt(match[1]);
+ const g = parseInt(match[2]);
+ const b = parseInt(match[3]);
+ return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+}
diff --git a/apps/docs/src/components/theme-panel/ColorSwatch.tsx b/apps/docs/src/components/theme-panel/ColorSwatch.tsx
new file mode 100644
index 0000000..22acfeb
--- /dev/null
+++ b/apps/docs/src/components/theme-panel/ColorSwatch.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+interface ColorSwatchProps {
+ value: string;
+ onChange: (value: string) => void;
+ label: string;
+}
+
+export function ColorSwatch({ value, onChange, label }: ColorSwatchProps) {
+ return (
+
+ );
+}
diff --git a/apps/docs/src/components/theme-panel/ExportReset.tsx b/apps/docs/src/components/theme-panel/ExportReset.tsx
new file mode 100644
index 0000000..27c40d1
--- /dev/null
+++ b/apps/docs/src/components/theme-panel/ExportReset.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { Button } from "ghost-ui";
+import { Check, Copy, RotateCcw } from "lucide-react";
+import { useCallback, useState } from "react";
+import { useThemePanel } from "@/contexts/ThemePanelContext";
+
+export function ExportReset() {
+ const { exportCSS, reset, overrides } = useThemePanel();
+ const [copied, setCopied] = useState(false);
+
+ const handleCopy = useCallback(async () => {
+ const css = exportCSS();
+ if (!css) return;
+
+ await navigator.clipboard.writeText(css);
+ setCopied(true);
+ setTimeout(() => setCopied(false), 2000);
+ }, [exportCSS]);
+
+ const hasOverrides = Object.keys(overrides).length > 0;
+
+ return (
+
+
+ ))}
+ + {group.label} +
+
+ {group.variables.map((v) => (
+ handleChange(v.key, val)}
+ label={v.label}
+ />
+ ))}
+
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/theme-panel/PresetSelector.tsx b/apps/docs/src/components/theme-panel/PresetSelector.tsx
new file mode 100644
index 0000000..adaed67
--- /dev/null
+++ b/apps/docs/src/components/theme-panel/PresetSelector.tsx
@@ -0,0 +1,60 @@
+"use client";
+
+import { cn, PRESETS } from "ghost-ui";
+import { useThemePanel } from "@/contexts/ThemePanelContext";
+
+export function PresetSelector() {
+ const { activePresetId, applyPreset } = useThemePanel();
+
+ return (
+
+ {PRESETS.map((preset) => {
+ const isActive = activePresetId === preset.id;
+ return (
+
+ );
+ })}
+ {/* Custom indicator */}
+ {activePresetId === null && (
+
+ );
+}
diff --git a/apps/docs/src/components/theme-panel/RadiusControls.tsx b/apps/docs/src/components/theme-panel/RadiusControls.tsx
new file mode 100644
index 0000000..63f2c3f
--- /dev/null
+++ b/apps/docs/src/components/theme-panel/RadiusControls.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { Slider } from "ghost-ui";
+import { useThemePanel } from "@/contexts/ThemePanelContext";
+
+export function RadiusControls() {
+ const { radiusScale, setRadiusScale } = useThemePanel();
+
+ const label =
+ radiusScale < 10
+ ? "Sharp"
+ : radiusScale < 40
+ ? "Subtle"
+ : radiusScale < 60
+ ? "Default"
+ : radiusScale < 85
+ ? "Rounded"
+ : "Pill";
+
+ return (
+
+
+ )}
+
+
+
+
+
+
+
+ Custom
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/theme-panel/ShadowControls.tsx b/apps/docs/src/components/theme-panel/ShadowControls.tsx
new file mode 100644
index 0000000..bed7961
--- /dev/null
+++ b/apps/docs/src/components/theme-panel/ShadowControls.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { Slider } from "ghost-ui";
+import { useThemePanel } from "@/contexts/ThemePanelContext";
+
+export function ShadowControls() {
+ const { shadowScale, setShadowScale } = useThemePanel();
+
+ const label =
+ shadowScale < 5
+ ? "None"
+ : shadowScale < 30
+ ? "Subtle"
+ : shadowScale < 60
+ ? "Default"
+ : shadowScale < 85
+ ? "Prominent"
+ : "Heavy";
+
+ return (
+
+ setRadiusScale(v)}
+ min={0}
+ max={100}
+ step={1}
+ />
+
+
+ {/* Live preview */}
+
+
+ + Corner Radius +
+ + {label} + +
+
+ Preview
+
+
+
+ Card
+
+
+
+ Input
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/theme-panel/ThemePanel.tsx b/apps/docs/src/components/theme-panel/ThemePanel.tsx
new file mode 100644
index 0000000..8a8571e
--- /dev/null
+++ b/apps/docs/src/components/theme-panel/ThemePanel.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import {
+ cn,
+ Separator,
+ Tabs,
+ TabsContent,
+ TabsList,
+ TabsTrigger,
+} from "ghost-ui";
+import { XIcon } from "lucide-react";
+import { useThemePanel } from "@/contexts/ThemePanelContext";
+import { ColorControls } from "./ColorControls";
+import { ExportReset } from "./ExportReset";
+import { PresetSelector } from "./PresetSelector";
+import { RadiusControls } from "./RadiusControls";
+import { ShadowControls } from "./ShadowControls";
+import { TypographyControls } from "./TypographyControls";
+
+export function ThemePanel() {
+ const { isOpen, setOpen } = useThemePanel();
+
+ return (
+
+ setShadowScale(v)}
+ min={0}
+ max={100}
+ step={1}
+ />
+
+
+ {/* Live preview */}
+
+
+ + Shadow Intensity +
+ + {label} + +
+
+ Preview
+
+
+
+ Mini
+
+
+ Card
+
+
+ Elevated
+
+
+ {/* Header */}
+
+ );
+}
diff --git a/apps/docs/src/components/theme-panel/ThemePanelTrigger.tsx b/apps/docs/src/components/theme-panel/ThemePanelTrigger.tsx
new file mode 100644
index 0000000..b075f1f
--- /dev/null
+++ b/apps/docs/src/components/theme-panel/ThemePanelTrigger.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { Button } from "ghost-ui";
+import { Palette } from "lucide-react";
+import { useThemePanel } from "@/contexts/ThemePanelContext";
+
+export function ThemePanelTrigger() {
+ const { setOpen } = useThemePanel();
+
+ return (
+
+ );
+}
diff --git a/apps/docs/src/components/theme-panel/TypographyControls.tsx b/apps/docs/src/components/theme-panel/TypographyControls.tsx
new file mode 100644
index 0000000..c2d2467
--- /dev/null
+++ b/apps/docs/src/components/theme-panel/TypographyControls.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import { Slider } from "ghost-ui";
+import { useCallback, useState } from "react";
+import { useThemePanel } from "@/contexts/ThemePanelContext";
+
+// Default values for scaling (50 = default)
+const WEIGHT_MAP: Record
+
+
+ {/* Scrollable content */}
+
+
+ + Theme +
+ ++ Customize the design language in real time. +
+
+ {/* Presets */}
+
+
+
+ Colors
+
+
+ Radius
+
+
+ Shadows
+
+
+ Type
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Footer */}
+
+
+
+ + Presets +
+
+
+
+
+ );
+}
diff --git a/apps/docs/src/components/theme/ThemeControls.tsx b/apps/docs/src/components/theme/ThemeControls.tsx
new file mode 100644
index 0000000..cba1025
--- /dev/null
+++ b/apps/docs/src/components/theme/ThemeControls.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { ThemeToggle } from "ghost-ui";
+import { ThemePanel } from "@/components/theme-panel/ThemePanel";
+import { ThemePanelTrigger } from "@/components/theme-panel/ThemePanelTrigger";
+import { ThemePanelProvider } from "@/contexts/ThemePanelContext";
+
+export function ThemeControls() {
+ return (
+
+ handleWeightChange(v)}
+ min={0}
+ max={100}
+ step={1}
+ />
+
+
+
+
+ + Weight +
+ + {weightLabel} + +
+ handleTrackingChange(v)}
+ min={0}
+ max={100}
+ step={1}
+ />
+
+
+ {/* Live preview */}
+
+
+ + Letter Spacing +
+ + {trackingLabel} + +
+
+ Preview
+
+
+ + Heading +
++ Body text sample for preview. +
+
+ {/*
+ {/*