Component catalogue

A pattern library of everything the template1 theme's look is made of. The individual chapters are in the left-hand menu — each one shows a live component, not a screenshot.

The demos are interactive

Modals open, tabs switch, galleries page through. It is a real component rendered with the theme's styles, merely set inside a manual page.

Copy-ready code sits under every demo

A toggle reveals the exact markup with its classes — take it 1:1 into a Latte template.

How the library is divided

Group	What it holds
Foundations	design tokens, colours, roles and skins — what everything else builds on
Components	buttons, badges, alerts, forms, cards, lists, tables
Navigation	menus, breadcrumbs, pagination, wizard steps
Feedback	modals, toasts, tooltips, progress indicators, empty states
Content	avatars, ratings, galleries, comments, pricing, accordions
Inputs	autocomplete, select boxes, sliders, file uploads, sign-in
Misc	polls, sort boxes, maps, banners and the rest

Things to watch out for

The library is a snapshot taken when the manual was built

When the theme changes, the catalogue catches up on the next ./build.sh. Anyone working on CSS right now should open ui-demo/ inside the theme — it changes instantly and needs no build. How the import works.

Each demo runs in an isolated frame

It carries the whole of Bootstrap and the theme's styles, which act on bare tags (h1, p, .btn). Inlined straight into the page they would overwrite the manual's own appearance — and it would show up on entirely different pages. The isolation is deliberate, not a stopgap.

The map will not render offline

Google Maps loads from the network by its very nature. In a downloaded copy of the manual an empty frame stays in its place; everything else works without a connection.