Content blocks

Image

The image block: a centered image with radius 4 and an optional caption. With no `src` it shows the “Add an image” placeholder.

Abstract landscape
A caption under the image

Usage

  • Use the Image block for figures, screenshots and photos inside page content.
  • Always provide alt text, and a caption when the image needs context.
  • Show the placeholder (no src) only while content is being edited.
  • Don’t use the Image block for avatars, icons or decorative UI; use Avatar or Icon instead.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/ImageExample.tsx
import { BlockContent, ImageBlock, rt } from '@krackedui/motion';

export function ImageExample() {
  return (
    <BlockContent>
      <ImageBlock src="/landscape.png" alt="Abstract landscape" caption={rt('A caption under the image')} />
    </BlockContent>
  );
}

Examples

Width

Abstract landscape

Placeholder

API Reference

ImageBlock

Based on <div> and supports its props. Adds:

PropTypeDefault
src
string
alt
string
""
caption
RichText
width
number
captionSlot
ReactNode
onPlaceholderClick
() => void

Accessibility

  • Always pass alt for meaningful images.
  • The placeholder is a role="button" with tabIndex={0}.
© 2026 Motion. Internal documentation.