odin·htmx

Style

Scheme

Library

Components

The everyday controls — buttons, badges, overlays, tabs — each styled once and reused everywhere.

Buttons

Variants and states, all one .btn with a modifier.

Badges, chips & tags

Status pills and categorical chips.

ActiveInvitedDisabledEngineerDesignerManager v2.1new 7unread

Avatars

Initials with a stable per-identity hue.

ALLTGHTB+9

Progress & meters

Determinate bars, a ring and an indeterminate spinner.

68%

Inputs

The raw fields, themed. Full forms live on the Forms page.

Tabs

Panels fetched from the server on demand.

Overview

Panels are fetched per click and swapped into place. Switching tabs is one GET request, nothing more.

82%
54%
96%

Accordion

Built on <details> — semantic and keyboard-friendly.

What is HTMX doing here?

Every interactive panel on this page is a server fragment swapped in over a single request. No client state, no build step.

Where does the markup come from?

Odin procedures write HTML into a string builder. A component is just a proc — this accordion item is one.

Is the data real?

It is an in-memory store seeded at boot. Create and delete on the Data page mutate it live.

Overlays & toasts

Dialog, drawer and notifications — opened and dismissed over HTMX.