# Content blocks

Building blocks for page content: feature, check, and numbered list rows, prompt bubbles, the page actions, the scripted terminal, and API preview states.

## Feature item

A rule-topped feature row, like the website's feature columns: an optional icon (project it with the `icon` attribute, in an icon badge) next to a semibold title and a gray description.

### Example

#### Data models

Typed schemas with validation, defaults, and computed properties

#### Relationships

Connect models via references — products to categories, orders to users

#### Indexed queries

Indexed properties answer filters without scanning every item

#### Real-time updates

Upsert, delete, refresh data — lists update automatically

#### Usage

```html
<docs-feature-item title="Feature Name" description="Feature description">
  <docs-icon-badge icon size="sm">
    <docs-icon name="box" size="sm" />
  </docs-icon-badge>
</docs-feature-item>
```

## Prompt bubble

A chat-style "user prompt": a square ink author tile next to a panel framed by the 1.5px rule, used on the Agentic recipes and setup pages to show the prompt a user types to the agent. The prompt text is projected; `author` sets the tile's label (default `'You'`).

### Example

> **You:** What's in products.csv?

#### Usage

```html
<docs-prompt-bubble>What's in products.csv?</docs-prompt-bubble>

<!-- Custom avatar label -->
<docs-prompt-bubble author="Me">{{ recipe.prompt }}</docs-prompt-bubble>
```

## Copy as Markdown

The page actions next to the breadcrumb: a mint "Copy as Markdown" button that copies the page's raw `.md` (generated at build time) and an outline `.md` link that opens it, for agents and curious readers. The docs layout renders it once.

### Example

#### Usage

```html
<docs-copy-markdown />
```

## API preview state

Wraps the loading / ready / failed states of an interactive API preview so every SDK query and fn page renders the same spinner and error message (an error-tinted pill). The ready-state content **must** be passed as a child `<ng-template>` — it is rendered lazily only when `ready` is true, so bindings inside it are never evaluated while data is still loading. Inputs: `loading`, `ready`, `loadingText`, `errorText`.

### Example (loading state)

Loading data...

#### Usage

```html
<docs-api-preview-state
  [loading]="isLoading()"
  [ready]="!!result()"
  loadingText="Loading data..."
  errorText="Failed to load data"
>
  <ng-template>
    <!-- ready content — rendered lazily, only when [ready] is true -->
    <docs-stat-tile label="Sum">{{ stats()!.sum }}</docs-stat-tile>
  </ng-template>
</docs-api-preview-state>
```

## Check list item

A checklist row: a square mint marker with a black check (the mark a checked `docs-checkbox` shows) next to the label — for "what you'll get" or requirement lists. Inputs: `text` (required). Stack several in a column for a checklist.

### Example

Type-safe data models with validation

Indexed queries on in-memory data

Real-time updates with automatic list refresh

#### Usage

```html
<docs-check-list-item text="Type-safe data models" />
```

## Numbered list item

An ordered step row: the step number in semibold ink, no circle, next to the gray label. Inputs: `number` and `text` (both required). Wrap items in a `<ul>` or `<ol>`.

### Example

- 1 Install the dcupl CLI

- 2 Scaffold a project with dcupl init

- 3 Run the local data app

#### Usage

```html
<ul class="list-none pl-0">
  <docs-numbered-list-item [number]="1" text="Install the dcupl CLI" />
  <docs-numbered-list-item [number]="2" text="Scaffold a project" />
</ul>
```

## Next steps

The footer that guides readers on: rule-topped columns (a 2px rule, a semibold title with an arrow, a gray description), like the website's feature rows, at the bottom of guide and reference pages. In **component pages** use `<docs-next-steps>` directly; in **Markdown pages** use the `:::next-steps` directive.

### Example

## Next steps

- [Quick start](/sdk/quick-start) — Set up dcupl in under 5 minutes
- [Models](/sdk/core-concepts/models) — Define schemas and relationships

#### Component usage

```html
<docs-next-steps
  [links]="[
    { label: 'Quick start', path: '/sdk/quick-start', desc: 'Set up dcupl in under 5 minutes' },
    { label: 'Models', path: '/sdk/core-concepts/models', desc: 'Define schemas and relationships' },
  ]"
/>

<!-- Optional custom heading (default: 'Next steps') -->
<docs-next-steps heading="Continue reading" [links]="links" />
```

#### Markdown directive

```markdown
:::next-steps{heading="Next steps"}
- [Quick start](/sdk/quick-start) — Set up dcupl in under 5 minutes
- [Models](/sdk/core-concepts/models) — Define schemas and relationships
:::

<!-- {heading="..."} is optional; description after — is optional -->
```

## Scripted terminal

An animated terminal that replays a captured CLI session — commands type themselves in, output streams beneath, then the next step begins. It is drawn like the code panels: a rule-framed editor surface under a light header strip (title, a "Terminal" pill, Skip / Replay and the mint Copy button); gray prompts, white commands, results in mint and warnings in yellow. Playback starts when the terminal scrolls into view, can be replayed or skipped (click the body), and copies all commands. It is SSR-safe (the full session renders statically first) and honours `prefers-reduced-motion`. Used across the [Agentic](/agentic/recipes) and [CLI](/cli/local-data-apps) docs.

### Example

```console title="zsh — example session"
# create an in-memory daemon
$ dcupl app create --auto-update --json
{ "appId": "app_8f3a", "status": "running" }

# ingest a CSV
$ dcupl app data upsert --file products.csv --model Product --json
{ "model": "Product", "upserted": 1284, "applied": true }
```

### Props

- `steps: TerminalStep[]` — the session: each step has a `command`, optional `output`, `outputLang` (`'json' | 'text'`), `comment`, and `pauseAfter`.
- `title: string` — the window-chrome label (default `'zsh — dcupl'`).
- `typeSpeed: number` — characters typed per second (default `55`).

#### Usage

```ts
import { ScriptedTerminalComponent, TerminalStep } from '../components/ui';

steps: TerminalStep[] = [
  {
    comment: 'create an in-memory daemon',
    command: 'dcupl app create --auto-update --json',
    outputLang: 'json',
    output: '{ "appId": "app_8f3a", "status": "running" }',
  },
];

// template
// <docs-scripted-terminal [steps]="steps" title="zsh — dcupl" />
```