# Blocks
> Ready-made screens built from the components, numbered like ShellUI's dashboard-01.
Source: https://native.shellui.dev/docs/blocks
> **Next release**
>
> On the main branch of shellui-native; not in the 0.2.0-beta.1 CLI yet.
A block is a whole screen built from the components: an app shell with a [bottom nav](https://native.shellui.dev/docs/components/navigation/bottom-nav.md), or a page with an [edge menu](https://native.shellui.dev/docs/components/navigation/edge-menu.md). `add` writes one file you own to `Components/Blocks/` (namespace `.Components.Blocks`, next to `Components/UI` or `Components/Native`) and installs the components it uses. Each block is a plain view in C#: use it as a page's content and edit it like any other code.
The previews are the Avalonia blocks at a phone's size, running in your browser.
## Using a block
```bash
shellui-native add bottom-nav-01
```
**MAUI**
```csharp
using MyApp.Components.Blocks;
var shell = new BottomNav01();
shell.Pages["home"] = new HomeView(); // one view per tab Value
shell.Pages["cards"] = new CardsView();
shell.ActionClicked += (_, _) => StartPayment();
Content = shell;
```
**Avalonia**
```csharp
using MyApp.Components.Blocks;
var shell = new BottomNav01();
shell.Pages["home"] = new HomeView(); // one view per tab Value
shell.Pages["cards"] = new CardsView();
shell.ActionClicked += (_, _) => StartPayment();
Content = shell;
```
Until you put your views in `Pages`, each tab shows a placeholder page: a title over grey cards. Change the tabs, their icons and the variant in the file itself.
| Member | Blocks | Description |
|---|---|---|
| `Pages` | bottom-nav-01 to 05 | One view per tab, keyed by the item's `Value`: `Dictionary` on MAUI, `Dictionary` on Avalonia. |
| `Nav` | bottom-nav-01 to 05 | The `BottomNav`, to change the items or the selection. |
| `Show(value)` | bottom-nav-01 to 05 | Shows the page for a tab `Value`. A tap on a tab does it; call it after setting `Nav.SelectedValue` from code. |
| `ActionClicked` | bottom-nav-01 | The round Pay button in the middle was pressed. |
| `Page` | edge-menu-01 | The view under the menu: `View?` on MAUI, `Control?` on Avalonia. |
| `Menu` | edge-menu-01 | The `EdgeMenu`, to change the tiles. |
| `ToolPicked` | edge-menu-01 | A tile was picked; passes its `Value`. |
## Bottom nav
### bottom-nav-01
An app shell like a wallet app's: a tab bar with a raised Pay button in the middle and the user's avatar on the last tab, with a count badge on Alerts and a dot on the avatar. The active tab is in the primary colour. Uses `bottom-nav` and `avatar`.
```bash
shellui-native add bottom-nav-01
```
[Live preview](https://native.shellui.dev/preview/index.html?c=block-bottom-nav-01)
### bottom-nav-02
An app shell with a Material 3 tab bar: a pill grows behind the active icon. Uses `bottom-nav`.
```bash
shellui-native add bottom-nav-02
```
[Live preview](https://native.shellui.dev/preview/index.html?c=block-bottom-nav-02)
### bottom-nav-03
An app shell with a floating tab bar over the page that slides away while the page scrolls down; only the active tab shows its label. Uses `bottom-nav`.
```bash
shellui-native add bottom-nav-03
```
[Live preview](https://native.shellui.dev/preview/index.html?c=block-bottom-nav-03)
### bottom-nav-04
An app shell with a compact capsule of icons; the active one widens into a pill with its label. The capsule slides away while the page scrolls down too. Uses `bottom-nav`.
```bash
shellui-native add bottom-nav-04
```
[Live preview](https://native.shellui.dev/preview/index.html?c=block-bottom-nav-04)
### bottom-nav-05
An app shell whose active tab rises into a circle over the bar; the bar slides away while the page scrolls down. Uses `bottom-nav`.
```bash
shellui-native add bottom-nav-05
```
[Live preview](https://native.shellui.dev/preview/index.html?c=block-bottom-nav-05)
## Edge menu
### edge-menu-01
A page with a dock of tools on its right edge: a solid rail of five tiles (Settings, Notes, Calendar, Images, Camera) that dims the page while open. Put your view in `Page`, change the tiles to your tools and handle `ToolPicked`. Uses `edge-menu`.
```bash
shellui-native add edge-menu-01
```
**MAUI**
```csharp
var page = new EdgeMenu01 { Page = new NotesView() };
page.ToolPicked += (_, tool) => OpenTool(tool); // "settings", "notes", "calendar", ...
Content = page;
```
**Avalonia**
```csharp
var page = new EdgeMenu01 { Page = new NotesView() };
page.ToolPicked += (_, tool) => OpenTool(tool); // "settings", "notes", "calendar", ...
Content = page;
```
[Live preview](https://native.shellui.dev/preview/index.html?c=block-edge-menu-01)