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

# Layout

# Layout

In some pages, we need to share some UI, here we agree to use `layout.tsx` to implement it.

* `layout.tsx` is used to define the layout

```tsx theme={null}
// src/dashboard/layout.tsx
import { Outlet } from "react-router-dom";

export function Component() {
  return (
    <section>
      {/* Include shared UI here e.g. a header or sidebar */}
      <nav></nav>
      <Outlet />
    </section>
  )
}
```

```tsx theme={null}
// src/dashboard/settings/page.tsx
export function Component() {
  return <div>Settings</div>
}
```

The above layout file will be rendered as follows:

* `/dashboard` page will be rendered as `DashboardLayout` component

* `/dashboard/settings` page will be rendered as `DashboardLayout` component, and `Outlet` will be replaced with `SettingsPage` component