> ## 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.

# Bento Grid Workbench Widget

> Modular bento grid displaying project metrics, component cards, and live telemetry

# Bento Grid Workbench Widget (`controlplane-bento`)

The Bento Grid Workbench widget arranges projects, stargazers, commit records, and active stacks into asymmetrical rectangular bento compartments with fine hairline grid borders.

## Configuration Schema

```typescript theme={null}
export interface BentoGridWorkbenchConfig {
  selectedRepos?: string[]
  accentColor?: string
  textColor?: string
}
```

***

## Real Code Example

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

const bentoWidget: WidgetInstance = {
  instanceId: 'bento_01',
  widgetId: 'controlplane-bento',
  name: 'Bento Grid Workbench',
  position: { x: 0, y: 0 },
  size: { width: 800, height: 340 },
  config: {
    accentColor: '#c5ff4a',
  },
  locked: false,
  visible: true,
  zIndex: 1,
}

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