Templates
Field journal
An editorial journal with a masthead, a front page of one lead story, four smaller stories and an archive, and an article view with a post-town rail, margin notes, brush annotations, a pull quote and an image pair.
This example uses generated pictures and sample data from this site: art.ts and data.ts. Copy those files from the repository, or use your own images and data in their place.
"use client";
import { FieldJournal, type FieldJournalImage } from "@/components/miyuki-ui/field-journal";
import { landscape } from "@/registry/lib/art";
import { people } from "@/registry/lib/data";
const images: Record<FieldJournalImage, string> = {
"kiso-road": landscape("kiso-road", { mood: "snow", width: 1600, height: 800 }),
"otaru-glass": landscape("otaru-canal", { mood: "dusk", width: 1200, height: 800 }),
"tea-altitude": landscape("tea-ridge", { mood: "day", width: 900, height: 700 }),
"snow-plough": landscape("ranshima", { mood: "night", width: 900, height: 1000 }),
"fukushima-river": landscape("kiso-fukushima", { mood: "snow", width: 800, height: 1000 }),
"tsumago-morning": landscape("tsumago", { mood: "dawn", width: 800, height: 1000 }),
"archive-shirakawa": landscape("shirakawa", { mood: "night", width: 800, height: 1000 }),
"archive-nozawa": landscape("nozawa", { mood: "snow", width: 1200, height: 600 }),
"archive-aomori": landscape("aomori", { mood: "dawn", width: 800, height: 600 }),
"archive-yakushima": landscape("yakushima", { mood: "dusk", width: 800, height: 600 }),
};
const avatars = Object.fromEntries(people.map((p) => [p.name, p.avatar]));
export default function FieldJournalDemo() {
return <FieldJournal images={images} avatars={avatars} />;
}Install
npx shadcn@latest add @miyuki-ui/field-journalThis needs the @miyuki-ui registry in your components.json. See Using the shadcn CLI.
Props
FieldJournal
Prop
Type