Components

Trek's admin UI is built with ViewComponent, Stimulus and Turbo, styled with PostCSS and Radix 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 / ToastComponent	flash notifications
HeadingComponent	headings
GateComponent	authorization-based visibility gate
IconComponent	SVG icon renderer

Form components

Rendered by the form builder 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 editor and accepts three options — nodes, blocks and floating (all enabled by default) — to toggle the node toolbar, block formatting and floating menu:

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

Content is stored as ProseMirror JSON and rendered with formatted_content. Image uploads (Uppy), link insertion and prompts are served by the panel controllers.