---
url: /reference/components.md
---
# Components

Trek's admin UI is built with [ViewComponent](https://viewcomponent.org), [Stimulus](https://stimulus.hotwired.dev) and [Turbo](https://turbo.hotwired.dev), styled with PostCSS and [Radix colors](https://www.radix-ui.com/colors), with light & dark themes.

## UI components

The main building blocks, all in the `Trek::` namespace:

| Component | Purpose |
| --- | --- |
| `LayoutComponent` | admin layout, with header, menu and panel slots |
| `HeaderComponent` | top navigation bar |
| `MenuComponent` | sidebar navigation, with polymorphic slots |
| `BrandComponent` | logo, title & subtitle area |
| `DialogComponent` | modal dialogs, with configurable title and buttons |
| `TabsComponent` | tabbed interfaces |
| `ButtonComponent` | buttons & button-styled links |
| `ListComponent` | record lists |
| `PropertiesComponent` | key-value property display |
| `PaginationComponent` | Kaminari-backed pagination |
| `ToasterComponent` / `Toaster::ToastComponent` | flash notifications |
| `HeadingComponent` | headings |
| `SectionComponent` | a titled section of a page, with an optional hint under its heading |
| `GateComponent` | the frame of the sign-in and password reset screens: a centred card under the brand |
| `IconComponent` | SVG [icon](/reference/icons) renderer |
| `Dashboard::SectionComponent` / `Dashboard::TileComponent` | dashboard sections of shortcut tiles |

## Dashboard tiles

A tile is a link by default. With `method:`, it issues another HTTP method through Turbo (as a `data-turbo-method` link), so a tile can create a record in one click rather than open a form; `data:` adds attributes to the link, such as a confirmation:

```ruby
s.with_tile(
  text: "New weekly draft",
  icon: "trek/add",
  href: [:draft_current_week, :admin, :newsletters],
  method: :post,
  data: { turbo_confirm: "Create this week's draft?" }
)
```

## Form components

Rendered by the [form builder](/reference/forms) helpers, under `Trek::Form::`:

`GroupComponent`, `FieldsetComponent`, `ActionsComponent` (configurable aspect & classnames), `ErrorsComponent`, `TextFieldComponent`, `ImageFieldComponent`, `SoundFieldComponent`, `SwitchBoxComponent`, `CollectionSelectComponent`, `GroupedCollectionSelectComponent`, `LinkSelectComponent` and `ContentEditorComponent`.

## Content editor

`Trek::Form::ContentEditorComponent` wraps the [Tiptap](https://tiptap.dev) editor and accepts `nodes`, `blocks` and `floating` (all enabled by default) to toggle the text buttons, the block buttons and the floating menu, and `autofocus`:

```ruby
f.content_editor :intro, nodes: false, floating: false
```

Content is stored as ProseMirror JSON and rendered with [`formatted_content`](/reference/concerns/contentable). Image uploads (Uppy), link insertion and prompts are served by the [panel controllers](/reference/controllers). See the [Content editor](/content-editor) guide for its toolbar, how content is stored and rendered, and how to customize it.