World rows with original thumbnail and measured text layout.
Preview
Example source could not be loaded: item-example. Reload this page to retry.Usage
The example uses a passive Item with a separate Open button and visible activation count. Use render={<a href="..." />} or a button when the whole row should be interactive; a passive div does not become a button by itself.
Composition
ItemMedia with no children displays the packaged world thumbnail. ItemContent supplies clip measurements to Title and Description. ItemGroup shares scale with rows, ItemSeparator divides them, and Header/Footer/Actions support passive row compositions. Only default size and variant are supported.
Interaction and limits
Avoid putting nested interactive controls inside a whole-row anchor. Use a passive Item with ItemActions for separate actions. Native row coverage is limited to compatible-world reference contents/states; arbitrary rich media, custom layouts and incompatible-world states need separate evidence.
See the upstream API for the underlying part and event contracts.
Installation
The passive-row example also uses Button. Install button alongside item for its separate Open action.
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { cva } from "class-variance-authority";
import type { VariantProps } from "class-variance-authority";
import * as React from "react";
import "./minecraft-item.css";
import { MinecraftItemMedia } from "./minecraft-item-media";
import { MinecraftItemText } from "./minecraft-item-text";
import type { MinecraftItemTextProps } from "./minecraft-item-text";
import { MinecraftProse } from "./minecraft-prose";
import {Interactive playground
Keep building your adventure.