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

# Layouts

> The four built-in layouts, and how to supply your own.

The sidebar view is the default option. You can pass predefined values - sidebar, drawer, dock, or widget to change the layout.

<Tabs>
  <Tab title="sidebar(default)">
    Full-page chat with a persistent chat history on the left. The default choice for a dedicated chat surface.

    ```tsx theme={null}
    <TrueForgeUI server={server} layout="sidebar" />
    ```

    <Frame caption="Sidebar: full-page chat with the thread list pinned on the left.">
      <img src="https://mintcdn.com/trueforge/-cqmkRr191P4m1ug/images/sidebar.png?fit=max&auto=format&n=-cqmkRr191P4m1ug&q=85&s=164b26538596f4e75ab9e7919af39ce2" alt="Sidebar layout — a persistent thread list on the left beside a full-page chat" width="2028" height="1094" data-path="images/sidebar.png" />
    </Frame>
  </Tab>

  <Tab title="drawer">
    Chat history list collapses into an overlay drawer. Click on the history icon to view the past conversations. Suited to narrower viewports.

    ```tsx theme={null}
    <TrueForgeUI server={server} layout="drawer" />
    ```

    <Frame caption="Drawer: the thread list collapses into an overlay for narrow viewports.">
      <img src="https://mintcdn.com/trueforge/-cqmkRr191P4m1ug/images/drawer.png?fit=max&auto=format&n=-cqmkRr191P4m1ug&q=85&s=98e83ffbc37ef8f23f98885ba21ac277" alt="Drawer layout — the thread list collapsed into an overlay drawer" width="2028" height="1094" data-path="images/drawer.png" />
    </Frame>
  </Tab>

  <Tab title="dock">
    A panel pinned to the right edge, filling the available width up to a 400px cap.

    ```tsx theme={null}
    <TrueForgeUI server={server} layout="dock" />
    ```

    <Frame caption="Dock: a compact panel pinned to the right edge, up to a 400px cap.">
      <img src="https://mintcdn.com/trueforge/-cqmkRr191P4m1ug/images/dock.png?fit=max&auto=format&n=-cqmkRr191P4m1ug&q=85&s=0f286ce9bc186c10dec05744c64394ad" alt="Dock layout — a compact chat panel pinned to the right edge of the app" width="2028" height="1094" data-path="images/dock.png" />
    </Frame>
  </Tab>

  <Tab title="widget">
    Floating launcher that expands into a compact chat panel.

    ```tsx theme={null}
    <TrueForgeUI server={server} layout="widget" />
    ```

    <Frame caption="Widget: a floating launcher that expands into a compact chat panel.">
      <img src="https://mintcdn.com/trueforge/-cqmkRr191P4m1ug/images/widget.png?fit=max&auto=format&n=-cqmkRr191P4m1ug&q=85&s=a30b13c752fb09dde3dbbcdf6231aca0" alt="Widget layout — a floating launcher expanded into a compact chat panel" width="2028" height="1094" data-path="images/widget.png" />
    </Frame>
  </Tab>
</Tabs>

Built-in layouts are code-split, so using one does not pull the other three into your bundle. A placeholder renders for the moment it takes to load.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.