Inventory Picker

Special

Retro grid picker for loadouts or item selection with rarity badges and helper text.

Import

import { PixelInventoryPicker } from "@/components/ui/pixel/pixel-inventory-picker"

Usage

Inventory0/3

Select up to 3 items

Component Source

Copy and paste the following code into your project at /src/components/ui/pixel/pixel-inventory-picker.tsx

"use client";

import { BoxSelect, Gem, Shield, Sword } from "lucide-react";
import * as React from "react";
import { cn } from "@/lib/utils";

type Rarity = "common" | "rare" | "epic" | "legendary";

export type PixelInventoryItem = {
  id: string;
  label: string;
  icon?: React.ReactNode;
  quantity?: number;
  rarity?: Rarity;
  description?: string;
  disabled?: boolean;
};

type PixelInventoryPickerProps = {
  items: PixelInventoryItem[];
  selectedIds?: string[];
  defaultSelectedIds?: string[];
  onSelectionChange?: (ids: string[]) => void;
  maxSelections?: number;
  columns?: number;
  label?: React.ReactNode;
  helperText?: React.ReactNode;
  hasError?: boolean;
  emptyState?: React.ReactNode;
  className?: string;
  gridClassName?: string;
  slotClassName?: string;
  renderItem?: (
    item: PixelInventoryItem,
    state: { isSelected: boolean },
  ) => React.ReactNode;
};

type PixelInventorySlotProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  item: PixelInventoryItem;
  isSelected?: boolean;
};

const rarityAccent: Record<Rarity, string> = {
  common: "",
  rare: "border-primary",
  epic: "border-secondary",
  legendary: "border-(--color-pixel-light-primary)",
};


// ... (more code below)

Props

PropTypeDefaultDescription
itemsPixelInventoryItem[]-Array of inventory items rendered as slots.
selectedIdsstring[]-Controlled list of selected item IDs.
defaultSelectedIdsstring[]-Initial selection for uncontrolled usage.
maxSelectionsnumber-Limits the number of simultaneous selections.
columnsnumber4How many columns to display in the grid.
renderItem(item, state) => React.ReactNode-Custom renderer for each slot.
slotClassNamestring-Additional classes applied to default slots.
helperTextReact.ReactNode-Status or helper message shown below the grid.
hasErrorbooleanfalseHighlights helper text when validation fails.

Examples

Starter Backpack

Inventory0/3

Select up to 3 items

Custom Render

Inventory0/3

Select up to 3 items

Accessibility

This component is built with accessibility in mind, including proper ARIA attributes, keyboard navigation, and focus management.