Blocks | Arbol UI

Account menu: Who is signed in, at the foot of AppShell’s sidebar: their picture and email, opening a menu with their name, the app’s items, the theme and language submenus, and signing out. On the rail only the picture shows.
BreakdownList: A part-to-whole breakdown as a list of meters: each row’s label, figure and share, with a bar against the largest. Rows lead to what they count, or narrow the page as toggles. It needs no chart library, reads well on a phone and says when there is nothing to show.
ChartCard: A finished chart card: a title and the data, and it draws the figure with its change, the legend the chart needs, the chart, a placeholder while loading and a note when there is nothing to draw. Trend, bars, donut, breakdown, funnel, gauge and heatmap; for anything else, compose ChartPanel.
Collapsible card: A card whose head folds it: an optional part of a form, or one item of a list edited in place. A control beside the head (Remove) never folds it.
DeleteDialog: The question before deleting a record for good: it names the record, says what deleting means, and Delete waits until the name is typed. Its words come in Spanish or English.
Editable title: A record’s name renamed in place: press it, type, Enter or leave the field to save, Esc to put it back. It takes the look of the heading it sits in.
FormDialog and FormSheet: A TanStack form in a dialog (a create flow) or a side sheet (an editor), finished: give it the form, a title and the fields. Enter and Ctrl+Enter submit, the save shows and blocks dismissal, it closes once onSubmit resolves and stays open with the reason when it throws, and closing with changes asks first.
KpiGrid: The headline figures of a report, from data: each with its change against the previous period, colored by what the change means, its definition behind an ⓘ, a line of context, a live dot and a link to what it counts. A reading of the figures sits beside one or two of them and under more.
ListPage: The page of a resource’s records: the title with the count of what the list holds, a line on what it is for and the action that adds one, over its ListTable. A list page is these two blocks and the app’s data.
ListTable: A resource’s whole list from rows, columns and callbacks: the toolbar (search, filters, saved views, chips, columns), sortable headers, rows that open their record, row menus, every state inside the frame, pages by number or cursor, and a bar for the selected rows. Built from ListToolbar, DataTable, RowTitle, RowMenu, EmptyState, Pagination and SelectionBar, each usable alone.
ListToolbar: The controls above a list in the order every list keeps: the search, the filters with “Clear filters” while any is applied, the saved views and the column picker at the end, and a row of chips under it. On a phone the filters fold behind one button.
Logo tile: An organization’s, a clinic’s or an integration’s logo on a white tile, at a product mark’s sizes so the two sit side by side. It tries each source in turn and shows an icon, or the initials, while none loads.
Organization menu: The organization at the top of AppShell’s sidebar: its logo and name, opening a menu with its whole name, the app’s items and Switch organization. On the rail only the logo shows; while it loads, a placeholder holds its place.
OverlayActions: The actions at the foot of a form in an overlay: Cancel (or Back, in steps) and the submit button, which shows the save running and submits with Ctrl+Enter from any field. FormDialog and FormSheet render them; use them alone for a form of your own.
OverlayLayout: The standard overlay that is not a form: a title and description with the close button, a body that scrolls, and a footer that stays in view. A record in a sheet, settings that apply at once, or an alert-sized card that is not a question.
PeriodPicker: The period a report or dashboard reads: presets such as the last 7 days or this month, then a custom range. A report always has a period, so there is nothing to clear; the popover states the exact days and, while comparing, the previous period. The value is plain days the app keeps in the URL.
Product mark: Each of Arbol’s products as its brand tile, the same in every app. It is decoration: write the product’s name beside it. In the sidebar, productIcon(product) makes it an entry’s icon for the apps that open in a new tab.
Property list: A record’s properties as labels and values: stacked for a record’s data or an aside, inline for dates and amounts. An empty value shows a dash, read as “Not set”.
Record header: The head of a record’s page, from data: its avatar or icon, its name as the page’s title with its status, a line of facts, and its actions: the common ones in outline, the next step filled and the rest in a ⋯ menu. RecordPage draws it; use it alone in a page laid out by hand.
Record layout: A record’s page body: the main column, and an aside with its properties that stays in view as the page scrolls. Below xl the aside folds into a disclosure above the main column.
Record page: The page of one record, finished: pass the header’s data, the sections as items and the properties as label/value items, and fill in the content. Sections are tabs of the page (each with its content) or links to their own URLs (with the route’s content as children).
Record pager: Moves from one record to the next without going back to the list: up and down arrows, the record’s place, and K and J on the keyboard. Arrows are links for records with their own page, or callbacks for records shown in a sheet.
ReportHeader: The parts ReportPage is assembled from, for a page it does not fit. ReportHeader states the question and the exact days it covers, with the period and filters under it and the export at its end; ReportReading says what the figures mean in a sentence.
ReportPage: A finished report or dashboard page from data: the question and its exact days, the period (presets, a custom range and the comparison with the previous period), the report’s filters and its export; then the headline figures, their reading and the chart cards, each with its loading and empty states. The app passes data and callbacks; every part is also public.
Route states: What a page shows instead of itself: RouteErrorState reads the failure’s kind (offline, session ended, no access, not found, the server’s) and offers the ways out it allows; NotFoundState and NoAccessState name two of them; AppLoadingState is the screen while the app starts. RouterErrorState and RouterNotFoundState, from the router entry, plug them into TanStack Router.
Section nav: Tabs that are pages: a record’s or a settings area’s sections, each at its own URL, as a navigation of links whose thumb slides to the current one. On phones they wrap into balanced rows. Use Tabs for sections inside one page.
SelectionBar: The actions for the rows selected in a list: how many are selected, what can be done with all of them at once and a way to clear the selection, floating at the bottom of the screen while the list scrolls.
Settings card: One topic of a settings or record page as a card: icon, title, description and one action at its head, then its fields, and Save and Cancel at its foot when it edits in place.
Settings links: A settings landing: groups of cards, each a link to one settings page with its icon, what it is for and how it stands today. On a phone each group is one compact list.
Settings page: A settings page, finished: pass its sections as items (each with its rows), its draft’s save and the router’s unsaved-changes guard. The sections are one form that the save bar at its foot saves together; settings that apply at once need no save.