Brand components

Ink figure

greyscale illustration frame (multiply blend) in 9:16, 16:9, 3:4 or 1:1, with required alt text.

Ink drawing: a folded newspaper beside a cup of coffee — Illustration · English edition

Install

bash

npx shadcn add @eloquent/ink-figure

Usage

tsx

import { InkFigure } from "@/components/ui/ink-figure";

<InkFigure src="/ink/scene.svg" alt="Ink drawing: a folded newspaper beside a cup of coffee" ratio="16:9" caption="Illustration" />

States

Ink drawing on a paper ground, filling the frame — cover · paper

State	Treatment
Ratios	9:16, 16:9, 3:4 and 1:1
`fit`	`contain` (default) or `cover`
`ground`	tint-1 panel (default) or paper
Image	Always greyscale, multiplied onto the ground

Keyboard

This component is not interactive. It is not a tab stop, so Tab skips it.

Key	Action
Tab	Skips it; not a tab stop

Vietnamese

Bản vẽ mực: một tờ báo gấp đôi bên tách cà phê — Minh hoạ · Ấn bản tiếng Việt

Ink adaptation

Brand item with no upstream. Any image is forced to greyscale with mix-blend-mode: multiply, so the paper of a scan merges with the frame; no border box, radius or overlay.