sitelo UI

sitelo-ui is a component library for sitelo. Every component is a function that returns a string of HTML, so it nests straight into the page you are already writing — no compiler, no runtime, no hydration.

Every example in this section is rendered by the same build that renders the page around it. What you see is what the code beneath it produced, and it follows this site’s light and dark themes because sitelo-ui reads the same data-theme attribute the docs do.

Layout

centred
ContainerA centred, width-limited page column.
onetwothree
StackA flex row or column with a spacing token for the gap.
1234
GridFits as many columns as will fit, with no media queries.
or
DividerA rule between sections, with or without a label.
Aspect ratioHold a box at a fixed shape, so nothing shifts on load.
A card
CardA surface for grouped content, with header, body and footer.

Typography

Heading
Caption
TypographyA type scale that picks its own element.
A heading
And a paragraph.
ProseStyle raw HTML from Markdown or a CMS.
Read the docs.
LinkA styled anchor, with the attributes an external link needs.
Icons99 glyphs on one grid, sized and coloured by the text around them.

Inputs

ButtonFive variants, five colors, three sizes.
Button groupButtons joined into one control.
Email
Text fieldLabel, control, help text and error, wired together.
Theme
SelectA native select, styled to match.
SitemapRSS feed
CheckboxA real input, styled with CSS rather than replaced.
freepro
Radio groupOne choice out of several, as radios sharing a name.
PublicDrafts
SwitchAn on/off toggle for a setting that applies immediately.
SliderA native range input, styled to match.
Toggle buttonA button that stays pressed.
Toggle groupA segmented control, as buttons or as links.

Data display

ALGHAT+1
AvatarAn image when there is one, initials when there is not.
12
BadgeA count or a dot pinned to a corner.
passedstatic
ChipA tag, a status, a filter.
TooltipA hint on hover and focus, drawn entirely in CSS.
Page Size
/ 4.1 kB
/docs 12.7 kB
TableRows and columns from data, in a scroll container.
- Routing
  File based
ListRows with something on either side.
A caption
FigureAn image and its caption, as one figure.

Page	Size
/	4.1 kB
/docs	12.7 kB

Feedback

Deployed.
AlertA message whose icon and ARIA role follow its colour.
Nothing here
EmptyWhat a list looks like before it has anything in it.
ProgressA bar for known work, a spinner for the rest.
SkeletonA placeholder shaped like the content to come.
Saved.
ToastA transient message, appended from script.

1. Docs
2. UI
BreadcrumbsThe trail of ancestors ending at this page.
1. ‹
2. 1
3. 2
4. 3
5. …
6. 5
7. ›
PaginationNumbered pages, windowed, as real links.
One Two
TabsLinks, one page per tab — or panels that swap in place.
sitelo
v2
App barBrand on one side, navigation and actions on the other.
Theme toggleLight and dark, without the flash on the way in.

Overlays

ModalA dialog on the popover API — no script anywhere.
DrawerA panel from the edge, same popover mechanics.
Actions ▾
MenuA dropdown built on details, open and close for free.
A question
AccordionCollapsible sections, including exclusive mode.
Show more
Hidden until asked for.
CollapsibleOne "show more", without accordion chrome.

Sections

A headline
And a sentence.
HeroThe top of a landing page: headline, sentence, actions.
DocsGuide · Components
FooterColumns of links, and a line under them.
Pages
204
+8
StatA number worth looking at, and what it means.
1. Install
2. Build
StepsA numbered flow, with what is done marked done.
1. v2.7
  Sections
TimelineEntries in order, down a line.
sitelo.dev
MockupA screenshot in a browser, window, phone or terminal.

Styling

ThemingEvery colour, radius and font, from one call.

Getting set up

Two lines: import the components, and put styles() in the head. The Components page in the docs covers installation, theming, the calling convention and the optional client runtime, and lists every export in one table.

The examples/ui directory in the repository renders the whole set on a single page.