> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gitascii.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Aura Bento Cards Widget

> Modular glassmorphic bento identity showcase with avatar card and responsive tech pills

# Aura Bento Cards Widget (`codeweb-retro-grid`)

The Aura Bento Cards widget combines a 260x260 developer portrait card with an ambient multi-row tech stack gallery with customizable display modes (`both`, `logo`, or `name`).

## Configuration Schema

```typescript theme={null}
export interface CodewebRetroGridConfig {
  title?: string                              // Header label (default: 'Tech Stack')
  displayMode?: 'both' | 'logo' | 'name'       // Pill display mode (default: 'both')
  sourceType?: 'avatar' | 'url' | 'upload'     // Image source type
  imageUrl?: string                           // Custom avatar URL
  uploadedImageData?: string                  // Base64 image data
  devCardLink?: string                        // Clickable link for avatar card
  userName?: string                           // Name overlay string
  userHandle?: string                         // Handle overlay string
  selectedTechs?: string[]                    // Array of tech keys to display
  staticMode?: boolean                        // Disables glowing orb animations
}
```

<ParamField body="displayMode" type="'both' | 'logo' | 'name'" default="both">
  * `both`: Displays official skill icon + title text.
  * `logo`: Compact 32px circular icon badges only.
  * `name`: Text-only pill badges.
</ParamField>

***

## Real Code Example

```typescript theme={null}
import { renderWidgetSvg, WidgetInstance } from '@/engine'

const bentoCardsWidget: WidgetInstance = {
  instanceId: 'bento_cards_01',
  widgetId: 'codeweb-retro-grid',
  name: 'Aura Bento Cards',
  position: { x: 0, y: 0 },
  size: { width: 800, height: 260 },
  config: {
    title: 'CORE STACK & TOOLS',
    displayMode: 'both',
    selectedTechs: ['ts', 'react', 'nextjs', 'nodejs', 'tailwind', 'postgres', 'docker', 'git'],
  },
  locked: false,
  visible: true,
  zIndex: 1,
}

const svgOutput = renderWidgetSvg(bentoCardsWidget, profileData, globalStyles)
```