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

# UI slots customization

> Inject custom React components into specific slots in the LynxHub user interface.

You can customize the layout structure of the host application. The `lynxAPI` exposes registration methods to inject or replace React components in multiple layout slots.

***

## Title bar customization

The top title bar is divided into three sections: **Start** (left), **Center**, and **End** (right).

```typescript theme={null}
// Add widgets to specific slots
lynxAPI.titleBar.addStart(Component: FC): void;
lynxAPI.titleBar.addCenter(Component: FC): void;
lynxAPI.titleBar.addEnd(Component: FC): void;

// Replace entire default slot sections
lynxAPI.titleBar.replaceCenter(Component: FC): void;
lynxAPI.titleBar.replaceEnd(Component: FC): void;
```

### Example: Add a sync button

```jsx theme={null}
import {Button} from '@heroui/react';

function SyncButton() {
  return (
    <Button size="sm" color="primary" onPress={() => console.log('Syncing...')}>
      Sync Status
    </Button>
  );
}

export function InitialExtensions(lynxAPI) {
  lynxAPI.titleBar.addEnd(SyncButton);
}
```

***

## Status bar customization

The bottom status bar lists state indicators and quick toggles.

```typescript theme={null}
// Add widgets to specific slots
lynxAPI.statusBar.addStart(Component: FC): void;
lynxAPI.statusBar.addCenter(Component: FC): void;
lynxAPI.statusBar.addEnd(Component: FC): void;

// Replace the entire status bar container
lynxAPI.statusBar.replaceContainer(Component: FC): void;
```

### Example: Hardware monitor integration

If you want to replace the default status bar with custom metrics, use `replaceContainer`:

```jsx theme={null}
import HardwareStatusBar from './components/HardwareStatusBar';

export function InitialExtensions(lynxAPI) {
  // Replace the default bar with your custom component
  lynxAPI.statusBar.replaceContainer(HardwareStatusBar);
}
```

***

## Navigation bar customization

The sidebar navigation panel houses page links and settings routes.

```typescript theme={null}
// Replace default elements
lynxAPI.navBar.replace.container(Component: FC): void;   // Entire sidebar
lynxAPI.navBar.replace.contentBar(Component: FC): void;  // Upper navigation list
lynxAPI.navBar.replace.settingsBar(Component: FC): void; // Lower settings list

// Add navigation buttons to lists
lynxAPI.navBar.addButton.contentBar(Component: FC): void;
lynxAPI.navBar.addButton.settingsBar(Component: FC): void;
```

***

## Running AI panel customization

The split screen view shown when executing a card is customizable. You can replace individual panels or the full viewport.

```typescript theme={null}
lynxAPI.runningAI.container(Component: FC): void; // Replaces entire running view
lynxAPI.runningAI.terminal(Component: FC): void;  // Replaces terminal pane only
lynxAPI.runningAI.browser(Component: FC): void;   // Replaces browser webview pane only
```

***

## Modals customization

You can register custom modal overlays or override the host's default dialog windows.

### Add custom modals

To register a custom modal in the application overlay tree:

```typescript theme={null}
lynxAPI.addModal(Component: FC): void;
```

### Replace built-in modals

To replace a default host modal, assign your replacement component to the appropriate key in `replaceModals`:

```typescript theme={null}
lynxAPI.replaceModals.updateApp(Component: FC): void;
lynxAPI.replaceModals.launchConfig(Component: FC): void;
lynxAPI.replaceModals.cardExtensions(Component: FC): void;
lynxAPI.replaceModals.updatingNotification(Component: FC): void;
lynxAPI.replaceModals.cardInfo(Component: FC): void;
lynxAPI.replaceModals.installUi(Component: FC): void;
lynxAPI.replaceModals.uninstallCard(Component: FC): void;
lynxAPI.replaceModals.unassignCard(Component: FC): void;
lynxAPI.replaceModals.warning(Component: FC): void;
lynxAPI.replaceModals.cardReadme(Component: FC): void;
lynxAPI.replaceModals.gitManager(Component: FC): void;
```

***

## Miscellaneous slots

### Markdown viewer replacement

You can supply a custom Markdown component to display project readme files:

```typescript theme={null}
type ReplaceMdProps = {repoPath: string; rounded?: boolean};
lynxAPI.replaceMarkdownViewer(Component: FC<ReplaceMdProps>): void;
```

### Background replacement

You can override the default window background layer:

```typescript theme={null}
lynxAPI.replaceBackground(Component: FC): void;
```