Wiki Components

Reference for the React components available in .mdx pages. Pages must use the .mdx extension (not .md) and import from src/components.

InfoCard

A floating stat panel for the top of block/item pages: replaces the bare two-column markdown tables.

Shulker Loader

ID

cesg:shulker_loader

Stress

4 SU/RPM

Power

Shaft into the back face

import { InfoCard } from '../../../components';

<InfoCard
  title="Shulker Loader"
  stats={{
    ID: 'cesg:shulker_loader',
    Stress: '4 SU/RPM',
    Power: 'Shaft into the back face',
  }}
/>

The card floats right on wide screens and goes full-width on mobile.

CraftingGrid

Datapack-style shaped recipe: pattern rows map characters to items, spaces are empty slots. Hover a slot for the item name; items with href link to their page. Icons resolve automatically by display name from the registry in src/components/items.ts (textures live in public/items/); pass icon explicitly only to override, and unknown names fall back to a text abbreviation.

Shulker ShellShulker ShellShulker ShellShulker ShellEnder Pearl DustShulker ShellShulker ShellShulker ShellShulker Shell

→2Processed Shulker Shell

Crafting Table

import { CraftingGrid } from '../../../components';

<CraftingGrid
  pattern={['SSS', 'SES', 'SSS']}
  items={{
    S: 'Shulker Shell',
    E: { name: 'Ender Pearl Dust', href: '/fluids/ender-pearl-dust/' },
  }}
  result={{ name: 'Processed Shulker Shell', count: 2 }}
  caption="Crafting Table"
/>

ItemSlot

A single inventory slot, useful inline or for loot/drop lists. Accepts a plain string or an item object (name, icon, href, count, cycle).

Binding Crystal

import { ItemSlot } from '../../../components';

<ItemSlot item={{ name: 'Binding Crystal', href: '/gateways/binding-crystal/' }} />

Color cycles

Pass cycle for a CSS-synced sprite animation. Slots with the same frame count stay lockstep (shared @keyframes). Named cycles: vanilla_shulker, enhanced_t1, enhanced_t2, enhanced_t1_dyed, enhanced_t2_dyed, dye. “Any Dye” / “Any Vanilla Shulker Box” get a cycle by default.

<CraftingGrid
  pattern={['BD']}
  items={{
    B: 'Enhanced Shulker Box',
    D: { name: 'Any Dye', cycle: 'dye' },
  }}
  result={{ name: 'Enhanced Shulker Box', cycle: 'enhanced_t2_dyed' }}
/>

BrewingRecipe

Brewing stand layout: input potion + ingredient → output potion.

Awkward Potion+Ender Pearl Dust→Potion of Teleportation

Brewing Stand

import { BrewingRecipe } from '../../../components';

<BrewingRecipe
  input="Awkward Potion"
  ingredient={{ name: 'Ender Pearl Dust', href: '/fluids/ender-pearl-dust/' }}
  result="Potion of Teleportation"
  caption="Brewing Stand"
/>

ProcessRecipe

Non-grid recipes such as Create crushing or spout filling.

Ender Pearl→Ender Pearl Dust

Create: Crushing Wheels

import { ProcessRecipe } from '../../../components';

<ProcessRecipe
  inputs={['Shulker Shell', 'Liquid Ender Pearl Bucket']}
  result="Processed Shulker Shell"
  caption="Create: Spout / Filling"
/>

Notes for doc authors

• These components render statically: no client: directive needed. Cycles are pure CSS.
• Icons render pixelated at 36px. Rebuild with bun run icons (fetch vanilla textures + isometric / shulker / dye sprites). Map display names in src/components/items.ts.