Installation

Prerequisites

Install Ghost components into a project you already own:

• A React 19 project with TypeScript
• @base-ui/react@1.8.0 for accessible behavior — Ghost owns styles and APIs, Base UI owns the interaction contracts
• A path alias for component imports (the gallery uses @/components/ui/*)

Copy the source

Ghost UI is source-distributed, not versioned on npm: the root package is private: true at version 0.1.0. Copy the files you need from src/components/ui/ into your project and own them from there:

• tokens.css — always first; every visual value reads these tokens
• components.tsx + components.css — editorial and content components
• base-styled.tsx + foundation.css — Base UI adapters
• Conversational component files such as message.tsx, conversation.tsx, and questionnaire.tsx — copy only the families you use, with their matching CSS

Local customizations stay local. When the library improves, promote the change back as a focused diff instead of re-copying around your edits.

Install dependencies

Install only what the files you copied need. The core set mirrors the ghost-kit registry entry:

12345678npm install @base-ui/react@1.8.0 @fontsource/ibm-plex-sans@5.3.0 lucide-react@0.561.0 clsx@2.1.1 tailwind-merge@3.0.2
# Snippet and the complete kit
npm install react-syntax-highlighter@16.1.1 motion@12.0.0
npm install -D @types/react-syntax-highlighter@15.5.13
# Charts only
npm install @tanstack/charts@1.1.0 @tanstack/react-charts@1.1.0
# Markdown rendering only
npm install react-markdown@10.1.0 remark-gfm@4.0.1

Wire up tokens

Import the token sheet once, then the component styles. Host projects may override shadcn semantic roles to re-theme without touching component source:

12345678import "@fontsource/ibm-plex-sans/400.css";
import "@/components/ui/tokens.css";
import "@/components/ui/components.css";
import { Button } from "@/components/ui/components";

export function Save() {
return <Button>Save note</Button>;
}

Registry artifacts

The machine-readable form of the same source lives in local JSON files, rebuilt from owned source — never hand-edited. npm run ghost:registry writes the shadcn-schema items to design/ghost-ui/public/r/; npm run build:registry -- --origin <host> emits the clean release copy under dist/registry/r/. Point your installer at the files on a host you control; there is no live public install URL.

Local registry

Prepare the registry payloads for the same origin as your local documentation server. This rewrites source and token dependencies to local URLs.

12npm run web:release:prepare -- --mode local --origin http://localhost:3110
npm run web:dev

Keep the server running while you use the installation commands on component pages. Production builds must prepare the payloads with their own HTTPS origin.