Icon Navigation Components

IconBoxGrid

Grid layout for feature lists, industry overviews, or product categories. Supports 2-5 columns, configurable icon sizes, and card variants.

import { Brain, SolarPanel } from '@phosphor-icons/react';

<IconBoxGrid
  title="Section Title"
  subtitle="Optional subtitle"
  items={[
    {
      icon: <Brain size={24} weight="duotone" />,
      title: 'Item Title',
      description: 'Item description',
      href: '/link'
    },
    // ... more items
  ]}
  columns={3}       // 2 | 3 | 4 | 5 (default: 4)
  iconSize="md"     // 'sm' | 'md' | 'lg' (default: 'md')
  variant="default" // 'default' | 'cards' (default: 'default')
/>

IconBoxScroll

Horizontal scrolling navigation for category browsing. Includes keyboard navigation (Arrow keys, Home/End), ARIA tab pattern, and optional scroll indicators.

import { Buildings, Factory } from '@phosphor-icons/react';

<IconBoxScroll
  title="Section Title"
  subtitle="Optional subtitle"
  items={[
    {
      icon: <Buildings size={24} weight="duotone" />,
      title: 'Item Title',
      description: 'Item description',
      href: '/link'
    },
    // ... more items
  ]}
  onSelect={(index) => console.log(index)}
  cardSize="md"              // 'sm' | 'md' | 'lg' (default: 'md')
  showScrollIndicators={true} // boolean (default: true)
/>

Keyboard Navigation

IconBoxScroll supports full keyboard navigation following the WAI-ARIA tabs pattern: