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

# The Pantry

> A tour of the TUI Pantry interface. Layout, tabs, navigation, focus modes, color depth, and themes.

The Pantry is a two-pane terminal browser. The sidebar on the left shows a navigation tree of your ingredients. The preview area on the right renders the selected widget with its description, props, and source breadcrumb.

## Tabs

Four tabs organize ingredients by scope. Each tab maintains its own independent navigation state. Cursor position, expansion, and scroll offset are preserved when you switch between them.

### Widgets

Atomic components in isolation. Each ingredient renders one widget configuration with mock data.

<img src="https://mintcdn.com/taho/hwybq0rCf17YoXDw/tui-pantry/images/widgets.png?fit=max&auto=format&n=hwybq0rCf17YoXDw&q=85&s=06126df3475f1b943fdb4b5a8236621e" alt="Widgets tab" width="1280" height="720" data-path="tui-pantry/images/widgets.png" />

### Panes

Composed sections combining multiple widgets into cohesive panels: resource gauges, activity feeds, metric panels.

<img src="https://mintcdn.com/taho/hwybq0rCf17YoXDw/tui-pantry/images/panes.png?fit=max&auto=format&n=hwybq0rCf17YoXDw&q=85&s=2aaf62e84937f617159003adc2d39d7e" alt="Panes tab" width="1280" height="720" data-path="tui-pantry/images/panes.png" />

### Views

Full-page layouts assembling panes and widgets into complete screens. Use views to preview how your components compose at terminal scale.

<img src="https://mintcdn.com/taho/hwybq0rCf17YoXDw/tui-pantry/images/views.png?fit=max&auto=format&n=hwybq0rCf17YoXDw&q=85&s=63045f45a58fe1c4a91f221944ceafe2" alt="Views tab" width="1280" height="720" data-path="tui-pantry/images/views.png" />

### Styles

Color palettes and typography driven from `pantry.toml`. Named swatches with hex values grouped by family, plus text hierarchy samples. No code required. The Pantry auto-generates these ingredients from your [configuration](/tui-pantry/configuration).

<img src="https://mintcdn.com/taho/hwybq0rCf17YoXDw/tui-pantry/images/styles.png?fit=max&auto=format&n=hwybq0rCf17YoXDw&q=85&s=da43dfa18001affb3a2249e0d98bace2" alt="Styles tab" width="1280" height="720" data-path="tui-pantry/images/styles.png" />

## Sidebar navigation

The sidebar displays a collapsible tree. Groups (widget names) expand to reveal variants underneath. Use `j`/`k` or arrow keys to navigate, `h`/`l` to collapse and expand groups, and `Enter` to toggle a group or focus the preview for interactive widgets.

Scrolling follows the cursor automatically. The viewport adjusts to keep the selected entry visible.

## Focus modes

The Pantry has three focus modes:

1. **Sidebar** (default). Keyboard input controls navigation.
2. **Preview**. Press `Enter` on an interactive ingredient to give it keyboard and mouse focus. The ingredient receives key and mouse events directly. Press `Esc` to return to the sidebar.
3. **Fullscreen**. Press `f` to expand the selected ingredient to fill the entire terminal. Press `f` or `Esc` to return.

## Color depth cycling

Not all terminals support TrueColor. SSH sessions, tmux without passthrough, older emulators, and accessibility configurations quantize your palette down to 256, 16, 8, or monochrome.

Press `c` to cycle through all five color depths and see exactly how your widget degrades:

* **TrueColor** (24-bit): full palette
* **256-color**: xterm extended palette
* **16-color**: ANSI standard
* **8-color**: ANSI basic
* **Mono**: no color

The quantization applies to the rendered buffer in real time, showing you what your users actually see in constrained environments.

## Theme toggle

Press `t` to toggle between dark mode (Catppuccin Mocha) and light mode (Catppuccin Latte). The default can be set in `pantry.toml`. See [Configuration](/tui-pantry/configuration).
