---
title: "Blocks"
description: "Whole screens and frames, finished: pass the data, get the page. Each is assembled from exported parts, to use one piece alone or build a variant."
---

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

# Blocks

Blocks are whole screens and frames, finished: pass the data and callbacks, get the page. A sidebar is the
same logic in every app, so an app passes `navigation` and nothing else; a list is the table block plus
rows and columns. Each block is assembled from parts that are exported too, so you can use one small piece
alone or build a variant from the same parts.

```tsx
import { AppShell, ListPage, ListTable } from '@arbol-ai/ui';

<AppShell navigation={navigation}>
  <ListPage title="Contacts" count={total} actions={<NewContactButton />}>
    <ListTable
      aria-label="Contacts"
      columns={columns}
      data={contacts}
      getRowHref={(contact) => `/contacts/${contact.id}`}
    />
  </ListPage>
</AppShell>;
```

| Block | What it brings |
| --- | --- |
| [`AppShell`](https://epidermis.getarbol.com/components/layout/app-shell/) and its slots | Sidebar from items, header, back link, companion panel; `AccountMenu`, `OrganizationMenu`, `LogoTile`, `ProductMark` |
| [`ListPage`](https://epidermis.getarbol.com/components/blocks/list-page/), [`ListTable`](https://epidermis.getarbol.com/components/blocks/list-table/) | Toolbar (search, filters, saved views, columns), sorting, row links and menus, every state, pages, bulk actions |
| [`RecordPage`](https://epidermis.getarbol.com/components/blocks/record-page/), [`SettingsPage`](https://epidermis.getarbol.com/components/blocks/settings-page/) | Record header with pager and rename, tabs, properties aside; settings sections, cards, links and save bar |
| [`FormDialog`, `FormSheet`](https://epidermis.getarbol.com/components/blocks/form-dialog/) (`/form`) | A create or edit flow: fields, Cancel and a pending Submit, the server's refusal, the discard guard |
| [`KpiGrid`](https://epidermis.getarbol.com/components/blocks/kpi-grid/), [`ChartCard`](https://epidermis.getarbol.com/components/blocks/chart-card/), [`ReportPage`](https://epidermis.getarbol.com/components/blocks/report-page/) | A period picker, KPI tiles from data, chart cards from series, breakdowns |
| [Route states](https://epidermis.getarbol.com/components/blocks/route-states/) | `RouteErrorState`, `NotFoundState`, `NoAccessState`, `AppLoadingState`, and TanStack Router adapters in `/router` |

Tables, forms, routing, data fetching and virtualization are all TanStack: Table (`DataTable`), Form,
Router, Query and Virtual (`PickList`).

Source: https://epidermis.getarbol.com/guides/blocks/index.mdx