# Docs component gallery

> Live demos of every custom component available to documentation authors.

URL: https://wmkeyboard.pages.dev/development/component-gallery/
Section: Development

Every component in `CONTENT_GUIDE.md`'s table, rendered live. Import them from
`@components/*`. (The rest of `src/components/` is Starlight overrides and
homepage furniture, not building blocks for a page.) The conventions live in
[CONTENT_GUIDE.md](https://github.com/wasi-master/wmkeyboard/blob/main/docs/CONTENT_GUIDE.md).

## Inline

Keys: press Shift then ?123, or hold
Space. Builds: google
fdroid all. Versions: 1.4.

Settings location chip:

Typing / Gestures / Spacebar swipes

## PhoneFrame

Left empty, it renders the screenshot-pending placeholder. Given an image (or a
`<video>`), it renders a device frame:

An empty PhoneFrame: the placeholder stubs use.

## LayoutExplorer

Renders any `.wmlayout.json` straight from `app/src/main/assets/layouts/`.
Import the file, then pass it in. Keys with alternates show the first one as a
corner hint; hover or tap that key for the full long-press set. A layout whose
keys carry shift labels gets a ⇧ toggle:

Bishnupriya Manipuri (shift layer demo)

## ThemePreview

Renders real theme specs (the same format as `.wmtheme.json` exports)
on a mock keyboard. The default set exercises gradients (linear, radial,
sweep), translucent keys, pill/cut key shapes, borders, key sheens and the
HUE_CYCLE animation:

ThemeSpec-shaped approximations of several built-in themes.

Pass `specs` to render an actual export file:

The Midnight theme from the addon repository, rendered from its real .wmtheme.json.

## FilterTable

Client-filterable, sortable table for big datasets. It's live on the
[language overview](https://wmkeyboard.pages.dev/languages/overview/) (843 rows) and
[dictionaries](https://wmkeyboard.pages.dev/languages/dictionaries/) (333 rows) pages. The data is
generated from the app's registries by `docs/scripts/extract_data.py`:

 [l.id, l.name, l.script])}
	placeholder="Filter (first 40 languages shown here)…"
/>

## GestureDemo

Stylised, looping gesture explainers. They illustrate concepts, so use a screen
recording when you need the *real* behaviour. Four types:

space-swipe — space-swipe: a short spacebar swipe switches language

space-hold — space-hold: hold, then drag through the language picker

long-press — long-press: an accent popup on a held key

glide — glide: trace a word without lifting

All four freeze to a static end-state under `prefers-reduced-motion`.