Inventory Grid
NewPro
A backpack grid where items drag between slots, stacks merge, rarity tints each slot, and tooltips show item stats.
Customize
6
64px
Rarity colors
Tooltips
#ff784f
When to use it
- RPG and survival game backpacks, chests and shop screens
- Equipment or loadout pages where players rearrange gear
- Reward lockers and item collections in loyalty or learning apps
Good to know
- Plan
- Pro
- Dependencies
- None beyond React
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 854
Installation
Inventory Grid is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy inventory-grid.tsx into components/ui.
Usage
import { InventoryGrid, type InventorySlots } from "@/components/ui/inventory-grid";
const slots: InventorySlots = [
{ id: "potion", name: "Health Potion", icon: <img src="/potion.png" alt="" />, rarity: "common", count: 12, maxStack: 20 },
{ id: "sword", name: "Emberfang", icon: <SwordIcon />, rarity: "legendary", stats: ["+48 Attack"] },
null,
null,
];
<InventoryGrid defaultSlots={slots} columns={4} onChange={saveBackpack} />Props
10 properties| Property | Type | Default | Description |
|---|---|---|---|
| slots | (InventoryItem | null)[] | — | Slots in reading order, null for an empty slot. Pass it with onChange to control the grid. |
| defaultSlots | (InventoryItem | null)[] | a sample backpack | Starting slots when the grid manages its own state. |
| onChange | (slots: InventorySlots) => void | — | Called with the new slots after every move. |
| columns | number | 6 | Slots per row. |
| slotSize | number | 64 | Largest slot size in pixels. Slots shrink when the container is narrow. |
| color | string | "#ff784f" | Color of the drop target and focus ring. |
| rarityGlow | boolean | true | Tint slots and tooltips with the color of the item's rarity. |
| tooltips | boolean | true | Show item tooltips on hover, focus and tap. |
| title | string | null | "Backpack" | Heading above the grid. Pass null to hide it. |
| className | string | — | Extra classes for the wrapper. |