Blocks · Ghost UI docs

What belongs here

Blocks are reusable compositions. They connect components, content, and workflow context. A component owns a stable focused contract. A block owns the arrangement around that contract.

ComponentInstallable behavior with named props, states, and a focused preview.

Documentation patternA repeated docs master such as Preview, API reference, or table of contents.

BlockA complete working composition that a product team can copy and own.

Documentation patterns

These masters are reused across component detail pages. Each one has a single implementation in apps/web/src/docs and a working example here.

Preview and source

Preview centers the working demo, keeps a 16:9 minimum stage with 16px internal padding, caps normal content at 70%, and exposes the exact source below it.

TableOfContents owns anchor navigation, active-section state, deep links, and reduced-motion behavior. The page owns the item labels and section IDs.

API and property reference

ApiTable accepts typed rows. It keeps property names, types, defaults, required state, and behavior descriptions consistent across detail pages.

Preview props
Prop	Type	Default	Description
`code`required	`string`		The explicit source shown below the demo.
`initialLines`	`number`	`8`	Visible source lines before disclosure.

Source, install, and structure

Use CodeBlock for a full source excerpt, Snippet for a copyable command, and Structure for the file boundary. These are separate masters because their actions and reading density differ.

12345import { Preview } from "@ghost-ui/core/components";

<Preview code={source}>
  <Demo />
</Preview>

Install

npm install @ghost-ui/core

Complete compositions

Grouped surface

LayerCard groups a surface under one heading. The preview remains a working composition; the source remains the exact excerpt.

Release checklist

Two items before launch.

Review copy Done
Set publish date Next

Content-agnostic progress

Progress.Background is a container, not a subject. It tracks any content against a target through value, max, and label.

Release checklist

5 items left to review

Worked Postcard block

Complete blocks keep their working composition. This example uses the same interaction as the gallery: flip the card, use the controls, or press F.

A bicycle on a quiet road in the Santa Cruz mountains at dawn

a bicycle for the mind.

santa cruz mountains, 7:00 am.

I'm Steve.

I work nights at a video game company. By day, my friend and I build a computer in a garage.

Computers are messy kits for hobbyists. We want a simple tool for the mind that anyone can use.

We finished our first printed circuit board. Even the hidden parts are laid out perfectly.

We are looking for people who see what this could become. We are building something that matters.

Stay hungry. Stay foolish.

Ownership

Copy a block into your app and own its layout and content. Installable components remain stable package contracts. Documentation patterns remain composable masters, not hidden application runtime.