diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index 52d2614..25738b2 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -43,6 +43,12 @@
  *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
 
+@font-face {
+  font-family: Minecraft;
+  src: url("https://minecraft.wiki/images/Minecraft.woff2") format("woff2"),
+    url("https://minecraft.wiki/images/Minecraft.woff") format("woff");
+}
+
 :root {
   --vp-c-default-1: var(--vp-c-gray-1);
   --vp-c-default-2: var(--vp-c-gray-2);
diff --git a/src/components/Infobox.vue b/src/components/Infobox.vue
new file mode 100644
index 0000000..23bbf39
--- /dev/null
+++ b/src/components/Infobox.vue
@@ -0,0 +1,48 @@
+<template>
+  <article>
+    <h2>{{ name }}</h2>
+    <TabbedImages :images />
+    <Miniatures :images />
+    <InfoTable :info />
+  </article>
+</template>
+
+<script setup lang="ts">
+import TabbedImages from "./TabbedImages.vue";
+import Miniatures from "./Miniatures.vue";
+import InfoTable from "./info-table/InfoTable.vue";
+import { ItemData, Image } from "./types";
+
+interface Props {
+  name: string;
+  images: Image[];
+  info: ItemData;
+}
+
+defineProps<Props>();
+</script>
+
+<style scoped>
+article {
+  padding: 0.5rem;
+  width: 300px;
+  background-color: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 8px;
+}
+
+h2 {
+  margin: 0;
+  padding: 0;
+  border: none;
+
+  width: 100%;
+  text-align: center;
+  padding: 0.5rem;
+  border-radius: 4px;
+  background-color: var(--vp-c-default-soft);
+}
+</style>
diff --git a/src/components/InventorySlot.vue b/src/components/InventorySlot.vue
new file mode 100644
index 0000000..c791c47
--- /dev/null
+++ b/src/components/InventorySlot.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="item">
+      <img
+        @mouseover="visibility = true"
+        @mouseleave="visibility = false"
+        :src="image.srcUrl"
+        :alt="image.displayName"
+        width="32"
+        height="32"
+      />
+      <span
+        :style="{
+          left: `calc(${x}px + 1rem)`,
+          top: `calc(${y}px - 1.5rem)`,
+          display: visibility ? 'block' : 'none',
+        }"
+      >
+        {{ image.displayName }}
+      </span>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useMouse } from "../composables/useMouse";
+
+export interface Image {
+  displayName: string;
+  srcUrl: string;
+}
+
+defineProps<{ image: Image }>();
+const visibility = ref(false);
+const { x, y } = useMouse();
+</script>
+
+<style scoped>
+span {
+  margin: 0;
+  display: block;
+  position: fixed;
+}
+
+span {
+  opacity: 1;
+  color: #fbfbfb;
+  text-shadow: 0.125em 0.125em 0 #3e3e3e;
+  background-color: rgba(16, 0, 16, 0.94);
+  padding: 0.375em;
+  font-family: Minecraft, sans-serif;
+  font-size: 16px;
+  word-spacing: 4px;
+  white-space: nowrap;
+  line-height: 1.25em;
+}
+
+span::before {
+  content: "";
+  position: absolute;
+  top: 0.125em;
+  right: -0.125em;
+  bottom: 0.125em;
+  left: -0.125em;
+  border: 0.15em solid #100010;
+  border-style: none solid;
+  border-color: rgba(16, 0, 16, 0.94);
+}
+
+span::after {
+  content: "";
+  position: absolute;
+  top: 0.125em;
+  right: 0;
+  bottom: 0.125em;
+  left: 0;
+  border: 0.125em solid #2d0a63;
+  border-image: -webkit-linear-gradient(
+      rgba(80, 0, 255, 0.31),
+      rgba(40, 0, 127, 0.31)
+    )
+    1;
+  border-image: linear-gradient(rgba(80, 0, 255, 0.31), rgba(40, 0, 127, 0.31))
+    1;
+}
+
+img {
+  background-color: #8b8b8b;
+  border: 2px solid;
+  border-color: #373737 #fff #fff #373737;
+  image-rendering: pixelated;
+}
+</style>
diff --git a/src/components/Miniatures.vue b/src/components/Miniatures.vue
new file mode 100644
index 0000000..dda4f4c
--- /dev/null
+++ b/src/components/Miniatures.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="miniatures">
+    <InventorySlot v-for="img in images" :image="img" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import InventorySlot from "./InventorySlot.vue";
+
+export interface Image {
+  displayName: string;
+  srcUrl: string;
+}
+
+defineProps<{ images: Image[] }>();
+</script>
+
+<style scoped>
+div.miniatures {
+  display: flex;
+}
+</style>
diff --git a/src/components/TabbedImages.vue b/src/components/TabbedImages.vue
new file mode 100644
index 0000000..49ffe7f
--- /dev/null
+++ b/src/components/TabbedImages.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <nav v-if="images.length > 1">
+      <button
+        v-for="variant in images"
+        :class="{ active: active.variantName === variant.variantName }"
+        type="button"
+        @click="active = variant"
+      >
+        {{ variant.variantName }}
+      </button>
+    </nav>
+    <img
+      :src="active.srcUrl"
+      :alt="active.variantName"
+      width="128"
+      height="128"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+export interface TabbedImage {
+  variantName: string;
+  srcUrl: string;
+}
+
+const props = defineProps<{ images: TabbedImage[] }>();
+const active = ref<TabbedImage>(props.images[0]);
+</script>
+
+<style scoped>
+div {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+nav {
+  width: 100%;
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  justify-content: center;
+}
+
+button {
+  padding: 0 0.5rem;
+  border-bottom: 3px solid var(--vp-c-border);
+}
+
+button.active {
+  font-weight: 900;
+  border-bottom-color: var(--vp-c-brand-1);
+}
+</style>
diff --git a/src/components/helpers.ts b/src/components/helpers.ts
new file mode 100644
index 0000000..628ca73
--- /dev/null
+++ b/src/components/helpers.ts
@@ -0,0 +1,40 @@
+import { ItemData, Entry, TableData, ItemDataTableRowName } from "./types";
+
+const itemDataDisplayNames: Record<keyof ItemData, string> = {
+  renewable: "[Renewable](https://minecraft.wiki/w/Renewable_resource)",
+  stackable: "Stackable",
+  tools: "Tool",
+  blastResistance:
+    "[Blast Resistance](https://minecraft.wiki/w/Explosion#Blast_resistance)",
+  hardness: "[Hardness](https://minecraft.wiki/w/Breaking#Blocks_by_hardness)",
+  isSolid: "[Solid Block](https://minecraft.wiki/w/Solid_block)",
+  isFull: "Full Block",
+  isTransparent: "[Transparent](https://minecraft.wiki/w/Opacity)",
+  isLuminous: "[Luminous](https://minecraft.wiki/w/Light)",
+  isFlammable: "[Flammable](https://minecraft.wiki/w/Flammable)",
+  isLavaFlammable: "Catches fire from lava",
+};
+
+export const typedEntries = <T>(obj: T) => Object.entries(obj) as Entry<T>[];
+export const itemImage = (item: string) => `/assets/items/webp/${item}.webp`;
+
+// TODO this should be refactored to provide autocomplete, which inevitably involves a huge file somewhere.
+// As a tradeoff, it will be MUCH easier to refer to items in the future, anywhere in the wiki
+
+// TODO this should also return more than just an image. Probably be renamed to item() and return more info.
+
+export const getDataDisplayName = (k: keyof ItemData): ItemDataTableRowName => {
+  const LINK_RE = /\[(.+)\]\((.+)\)/;
+  const text = itemDataDisplayNames[k];
+  if (LINK_RE.test(text)) {
+    const matches = text.match(LINK_RE);
+    return { isLink: true, text: matches[1], href: matches[2] };
+  } else {
+    return { isLink: false, text };
+  }
+};
+
+export const formatTableData = (itemData: ItemData) =>
+  typedEntries(itemData).map(
+    ([k, v]) => [getDataDisplayName(k), [k, v]] as TableData
+  );
diff --git a/src/components/index.md b/src/components/index.md
new file mode 100644
index 0000000..807f88a
--- /dev/null
+++ b/src/components/index.md
@@ -0,0 +1,38 @@
+# Component showcase
+
+## Infobox
+
+<Infobox name="Cogwheel" :images :info />
+
+<script setup lang="ts">
+import { itemImage } from "./helpers";
+import Infobox from "./Infobox.vue";
+import { ItemData } from "./types";
+
+const images = [
+  {
+    displayName: "Small Cogwheel",
+    variantName: "Small",
+    srcUrl: itemImage('cogwheel')
+  },
+  {
+    displayName: "Large Cogwheel",
+    variantName: "Large",
+    srcUrl: itemImage('large_cogwheel')
+  },
+]
+
+const info: ItemData = {
+  renewable: true,
+  stackable: [true, 64],
+  tools: [{type: 'pickaxe', quality: 'wooden'}, {type: 'axe', quality: 'wooden'}],
+  blastResistance: 6,
+  hardness: 1.5,
+  isSolid: false,
+  isFull: false,
+  isTransparent: true,
+  isLuminous: false,
+  isFlammable: false,
+  isLavaFlammable: false,
+}
+</script>
diff --git a/src/components/info-table/InfoTable.vue b/src/components/info-table/InfoTable.vue
new file mode 100644
index 0000000..777b960
--- /dev/null
+++ b/src/components/info-table/InfoTable.vue
@@ -0,0 +1,32 @@
+<template>
+  <table>
+    <tbody>
+      <tr v-for="[k, v] in tableData">
+        <TableRowName :name="k" />
+        <TableRowValue :value="v" />
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { ItemData } from "../types";
+import { formatTableData } from "../helpers";
+import TableRowName from "./TableRowName.vue";
+import TableRowValue from "./TableRowValue.vue";
+
+interface Props {
+  info: ItemData;
+}
+
+const props = defineProps<Props>();
+const tableData = computed(() => formatTableData(props.info));
+</script>
+
+<style scoped>
+table {
+  width: 100%;
+  display: table;
+}
+</style>
diff --git a/src/components/info-table/TableRowName.vue b/src/components/info-table/TableRowName.vue
new file mode 100644
index 0000000..cb123be
--- /dev/null
+++ b/src/components/info-table/TableRowName.vue
@@ -0,0 +1,18 @@
+<template>
+  <td v-if="name.isLink">
+    <a :href="name.href" target="_blank">{{ name.text }}</a>
+  </td>
+  <td v-else>{{ name.text }}</td>
+</template>
+
+<script setup lang="ts">
+import { ItemDataTableRowName } from "../types";
+
+interface Props {
+  name: ItemDataTableRowName;
+}
+
+defineProps<Props>();
+</script>
+
+<style scoped></style>
diff --git a/src/components/info-table/TableRowValue.vue b/src/components/info-table/TableRowValue.vue
new file mode 100644
index 0000000..d903c58
--- /dev/null
+++ b/src/components/info-table/TableRowValue.vue
@@ -0,0 +1,59 @@
+<template>
+  <td>
+    <Component :is="getRowType().component" v-bind="getRowType().props" />
+  </td>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { ItemData, Entry } from "../types";
+import ToolRow from "./ToolRow.vue";
+
+interface Props {
+  value: Entry<ItemData>;
+}
+
+const props = defineProps<Props>();
+
+const getRowType = () => {
+  const [type, value] = props.value;
+
+  if (type === "tools") {
+    return {
+      component: ToolRow,
+      props: {
+        tools: value as ItemData["tools"],
+      },
+    };
+  }
+
+  if (type === "stackable") {
+    const isStackable = value[0] ? "Yes" : "No";
+    const stackSize = value[0] ? ` (${value[1]})` : "";
+    return {
+      component: "span",
+      props: {
+        innerText: isStackable + stackSize,
+      },
+    };
+  }
+
+  if (typeof value === "boolean") {
+    return {
+      component: "span",
+      props: {
+        innerText: value ? "Yes" : "No",
+      },
+    };
+  }
+
+  return {
+    component: "span",
+    props: {
+      innerText: value,
+    },
+  };
+};
+</script>
+
+<style scoped></style>
diff --git a/src/components/info-table/ToolRow.vue b/src/components/info-table/ToolRow.vue
new file mode 100644
index 0000000..0891d2e
--- /dev/null
+++ b/src/components/info-table/ToolRow.vue
@@ -0,0 +1,58 @@
+<template>
+  <img
+    v-for="tool in tools"
+    :src="toolImage(tool)"
+    :alt="formatToolName(tool)"
+    width="32"
+    height="32"
+  />
+</template>
+
+<script setup lang="ts">
+import { Tool } from "../types";
+
+interface Props {
+  tools: Tool[];
+}
+
+defineProps<Props>();
+
+const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+
+const formatToolName = ({ type, quality }: Tool) =>
+  capitalize(quality) + " " + type;
+
+const toolImage = (t: Tool) => {
+  const image = (item: string) => `https://minecraft.wiki/images/${item}.png`;
+
+  if (t.quality === "any") {
+    switch (t.type) {
+      case "axe":
+        return image("SlotSprite_Axe_Required");
+      case "pickaxe":
+        return image("SlotSprite_Pickaxe_Required");
+      case "shovel":
+        return image("SlotSprite_Shovel_Required");
+      case "hoe":
+        return image("SlotSprite_Hoe_Required");
+    }
+  }
+
+  switch (t.type) {
+    case "axe":
+      return image(`Invicon_${capitalize(t.quality)}_Axe`);
+    case "pickaxe":
+      return image(`Invicon_${capitalize(t.quality)}_Pickaxe`);
+    case "shovel":
+      return image(`Invicon_${capitalize(t.quality)}_Shovel`);
+    case "hoe":
+      return image(`Invicon_${capitalize(t.quality)}_Hoe`);
+  }
+};
+</script>
+
+<style scoped>
+img{
+  image-rendering: pixelated;
+}
+</style>
diff --git a/src/components/types.ts b/src/components/types.ts
new file mode 100644
index 0000000..cd485a5
--- /dev/null
+++ b/src/components/types.ts
@@ -0,0 +1,49 @@
+// #region Utility types
+
+export type Entry<T> = [k: keyof T, v: T[keyof T]];
+export type ValueOf<T> = T[keyof T];
+
+// #endregion
+// #region Types
+
+export type Tool = { type: ToolType; quality: ToolQuality };
+export type ToolType = "axe" | "pickaxe" | "shovel" | "hoe";
+export type ToolQuality =
+  | "any"
+  | "wooden"
+  | "stone"
+  | "copper"
+  | "iron"
+  | "golden"
+  | "diamond"
+  | "netherite";
+
+export type ItemDataTableRowName =
+  | { isLink: false; text: string }
+  | { isLink: true; text: string; href: string };
+export type TableData = [name: ItemDataTableRowName, value: Entry<ItemData>];
+
+// #endregion
+// #region Interfaces
+
+export interface ItemData {
+  renewable: boolean;
+  stackable: [boolean, number];
+  tools: Tool[];
+  blastResistance: number;
+  hardness: number;
+  isSolid: boolean;
+  isFull: boolean;
+  isTransparent: boolean;
+  isLuminous: boolean;
+  isFlammable: boolean;
+  isLavaFlammable: boolean;
+}
+
+export interface Image {
+  displayName: string;
+  variantName: string;
+  srcUrl: string;
+}
+
+// #endregion
diff --git a/src/composables/useMouse.ts b/src/composables/useMouse.ts
new file mode 100644
index 0000000..f7f8669
--- /dev/null
+++ b/src/composables/useMouse.ts
@@ -0,0 +1,16 @@
+import { ref, onMounted, onUnmounted } from "vue";
+
+export function useMouse() {
+  const x = ref(0);
+  const y = ref(0);
+
+  const update = (event: MouseEvent) => {
+    x.value = event.clientX;
+    y.value = event.clientY;
+  };
+
+  onMounted(() => window.addEventListener("mousemove", update));
+  onUnmounted(() => window.removeEventListener("mousemove", update));
+
+  return { x, y };
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..ec90208
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.md"],
+  "vueCompilerOptions": {
+    "vitePressExtensions": [".md"]
+  }
+}