Strata - v1.4.10
    Preparing search index...

    Variable InventoryConst

    Inventory: ForwardRefExoticComponent<
        InventoryProps & RefAttributes<InventoryRef>,
    > = ...

    Professional Grid-Based Inventory System.

    A robust, RPG-ready inventory management system that renders as a high-performance HTML overlay. Supports modern interaction patterns including drag-and-drop, rarity-based styling, slot selection, and locked states.

    Key Features:

    • Interactivity: Full drag-and-drop support for item reordering.
    • Visual Feedback: Rarity-based borders, hover scaling, and selection highlights.
    • Flexible Layout: Responsive grid with configurable columns, rows, and slot sizes.
    • State Sync: Reflects quantities, stack limits, and slot status in real-time.
    // 8x2 RPG Hotbar configuration
    <Inventory
      columns={8}
      rows={2}
      slots={[
        { id: '1', itemName: 'Health Potion', itemIcon: '/icons/potion.png', quantity: 5, rarity: 'common' },
        { id: '2', itemName: 'Magic Sword', itemIcon: '/icons/sword.png', rarity: 'rare', highlighted: true },
        { id: '3', locked: true }
      ]}
      onSlotClick={(slot) => equipItem(slot)}
      onSlotDrop={(from, to) => swapItems(from, to)}
    />

    Settings

    Member Visibility

    On This Page

    Interactive Demos