# sitelo UI

> A component library for sitelo: buttons, cards, forms, tables and modals, as functions that return HTML.

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

- [Container](https://sitelo.dev/ui/container)

  A centred, width-limited page column.
- [Stack](https://sitelo.dev/ui/stack)

  A flex row or column with a spacing token for the gap.
- [Grid](https://sitelo.dev/ui/grid)

  Fits as many columns as will fit, with no media queries.
- [Divider](https://sitelo.dev/ui/divider)

  A rule between sections, with or without a label.
- [Aspect ratio](https://sitelo.dev/ui/aspect-ratio)

  Hold a box at a fixed shape, so nothing shifts on load.
- [Card](https://sitelo.dev/ui/card)

  A surface for grouped content, with header, body and footer.

## Typography

- [Typography](https://sitelo.dev/ui/typography)

  A type scale that picks its own element.
- [Prose](https://sitelo.dev/ui/prose)

  Style raw HTML from Markdown or a CMS.
- [Link](https://sitelo.dev/ui/link)

  A styled anchor, with the attributes an external link needs.
- [Icons](https://sitelo.dev/ui/icons)

  99 glyphs on one grid, sized and coloured by the text around them.

## Inputs

- [Button](https://sitelo.dev/ui/button)

  Five variants, five colors, three sizes.
- [Button group](https://sitelo.dev/ui/button-group)

  Buttons joined into one control.
- [Text field](https://sitelo.dev/ui/text-field)

  Label, control, help text and error, wired together.
- [Select](https://sitelo.dev/ui/select)

  A native select, styled to match.
- [Checkbox](https://sitelo.dev/ui/checkbox)

  A real input, styled with CSS rather than replaced.
- [Radio group](https://sitelo.dev/ui/radio)

  One choice out of several, as radios sharing a name.
- [Switch](https://sitelo.dev/ui/switch)

  An on/off toggle for a setting that applies immediately.
- [Slider](https://sitelo.dev/ui/slider)

  A native range input, styled to match.
- [Toggle button](https://sitelo.dev/ui/toggle-button)

  A button that stays pressed.
- [Toggle group](https://sitelo.dev/ui/toggle-group)

  A segmented control, as buttons or as links.

## Data display

- [Avatar](https://sitelo.dev/ui/avatar)

  An image when there is one, initials when there is not.
- [Badge](https://sitelo.dev/ui/badge)

  A count or a dot pinned to a corner.
- [Chip](https://sitelo.dev/ui/chip)

  A tag, a status, a filter.
- [Tooltip](https://sitelo.dev/ui/tooltip)

  A hint on hover and focus, drawn entirely in CSS.
- [Table](https://sitelo.dev/ui/table)

  Rows and columns from data, in a scroll container.
- [List](https://sitelo.dev/ui/list)

  Rows with something on either side.
- [Figure](https://sitelo.dev/ui/figure)

  An image and its caption, as one figure.

## Feedback

- [Alert](https://sitelo.dev/ui/alert)

  A message whose icon and ARIA role follow its colour.
- [Empty](https://sitelo.dev/ui/empty)

  What a list looks like before it has anything in it.
- [Progress](https://sitelo.dev/ui/progress)

  A bar for known work, a spinner for the rest.
- [Skeleton](https://sitelo.dev/ui/skeleton)

  A placeholder shaped like the content to come.
- [Toast](https://sitelo.dev/ui/toast)

  A transient message, appended from script.

## Navigation

- [Breadcrumbs](https://sitelo.dev/ui/breadcrumbs)

  The trail of ancestors ending at this page.
- [Pagination](https://sitelo.dev/ui/pagination)

  Numbered pages, windowed, as real links.
- [Tabs](https://sitelo.dev/ui/tabs)

  Links, one page per tab — or panels that swap in place.
- [App bar](https://sitelo.dev/ui/app-bar)

  Brand on one side, navigation and actions on the other.
- [Theme toggle](https://sitelo.dev/ui/theme-toggle)

  Light and dark, without the flash on the way in.

## Overlays

- [Modal](https://sitelo.dev/ui/modal)

  A `<dialog>`, opened modally — no script anywhere.
- [Drawer](https://sitelo.dev/ui/drawer)

  A panel from the edge, the same `<dialog>` as a modal.
- [Menu](https://sitelo.dev/ui/menu)

  A dropdown built on details, open and close for free.
- [Accordion](https://sitelo.dev/ui/accordion)

  Collapsible sections, including exclusive mode.
- [Collapsible](https://sitelo.dev/ui/collapsible)

  One "show more", without accordion chrome.

## Sections

- [Hero](https://sitelo.dev/ui/hero)

  The top of a landing page: headline, sentence, actions.
- [Footer](https://sitelo.dev/ui/footer)

  Columns of links, and a line under them.
- [Stat](https://sitelo.dev/ui/stat)

  A number worth looking at, and what it means.
- [Steps](https://sitelo.dev/ui/steps)

  A numbered flow, with what is done marked done.
- [Timeline](https://sitelo.dev/ui/timeline)

  Entries in order, down a line.
- [Mockup](https://sitelo.dev/ui/mockup)

  A screenshot in a browser, window, phone or terminal.

## Styling

- [Theming](https://sitelo.dev/ui/theming)

  Every 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](https://sitelo.dev/docs/ui) 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.

## Extras

Not everything belongs in one stylesheet. The textured and the decorative — a film grain, to start — live under [sitelo UI extras](https://sitelo.dev/ui-extras), a second entry point where each component brings a sheet of its own, so a page links only what it uses.