Skip to content
signagekit

Components

Each component below is drawn live from the YAML under it, as one zone of a screen. Every component also takestitle,icon,surface,size andweight, and any value can be a bind to the data. The document format describes them all.

heading

A large title that fills its zone.

type: heading
text: Welcome to Harbour House

text

A paragraph. With fit: true it fills the zone; otherwise size picks s, m, l or xl.

type: text
title: Today
fit: true
text: The pool reopens at 14:00 after its weekly clean. Towels are at reception.

stat

A big number with a unit, label and optional state, trend arrow and sparkline.

type: stat
title: Visitors today
value: 1284
trend: up
delta: +12%
good_when: up
label: vs last Saturday
spark: [880, 940, 1010, 990, 1120, 1210, 1284]

meter

One value against a maximum, with a bar.

type: meter
title: Shelf fill, aisle 4
value: 64
max: 100
unit: '%'
thresholds: { warning: 70, danger: 40 }
label: Dairy chiller

meters

One row per item, each against its own limit, bars lined up.

type: meters
title: Line speed, bottles per minute
items:
  - { label: Line 1, value: 412, max: 480 }
  - { label: Line 2, value: 301, max: 360 }
  - { label: Line 3, value: 188, max: 360 }
  - { label: Line 4, value: 0, max: 600, state: danger }

bars

Ranked horizontal bars, largest first, values printed.

type: bars
title: Top reps, $K
items:
  - { label: Dana Reyes, value: 31.2 }
  - { label: Marcus Okafor, value: 28.4 }
  - { label: Lena Brandt, value: 26.9 }
  - { label: Sam Whitfield, value: 22.1 }

split

One whole in up to six parts, with their shares printed.

type: split
title: Contacts by channel
items:
  - { label: Phone, value: 42 }
  - { label: Email, value: 31 }
  - { label: Chat, value: 27 }

chart

A line, area or column chart, with an optional labelled target line.

type: chart
kind: column
title: Revenue by hour, thousands
labels: ['09:00', '10:00', '11:00', '12:00', '13:00', '14:00']
series:
  - { name: Revenue, values: [9.1, 12.4, 14.8, 16.2, 17.5, 19.9] }
target: 15
target_label: Hourly target 15K

table

Rows and columns. Pages through the rows when they don't fit at a readable size.

type: table
title: Menu
columns: [Dish, Diet, Price]
align: [start, start, end]
rows:
  - [Tomato soup, VG, '4.50']
  - [Chicken curry, GF, '8.90']
  - [Mushroom risotto, V, '8.20']
  - [Falafel wrap, VG, '6.80']

list

A bulleted list.

type: list
title: Notices
items:
  - Fire drill Thursday at 10:00
  - New vegan station opens Monday
  - Bring your own cup for 20p off

status

Rows with a state icon each, like service health.

type: status
title: Services
items:
  - { label: Checkout, state: good }
  - { label: Payments, state: good }
  - { label: Search, state: warning, note: 'Slow, p95 1.2 s' }
  - { label: Office VPN, state: danger, note: Down }

schedule

Entries from the current one on, with Now and Next marked.

type: schedule
title: Today in room 3.02
items:
  - { start: '10:00', end: '11:00', title: Northwind planning, detail: Priya Raman }
  - { start: '12:30', title: Cleaning and reset }
  - { start: '13:30', title: Hiring panel, detail: Tomas Lindqvist }
  - { start: '15:00', title: Design crit }

queue

The number now being served, and the ones called before it.

type: queue
title: Counter
label: Now serving
current: B047
recent: [A112, B046, A111, B045]

clock

The current time, optionally with the date.

type: clock
show_date: true

clocks

One clock per time zone, each with a label.

type: clocks
title: Our offices
hour12: false
zones:
  - { label: London, timezone: Europe/London }
  - { label: New York, timezone: America/New_York }
  - { label: Tokyo, timezone: Asia/Tokyo }

countdown

Time left until a moment; shows its done text once it has passed.

type: countdown
title: Sale ends
to: '2026-11-22T21:00:00Z'
label: Ends Sunday
done: Sale over

cycle

One-line messages that swap instantly on a timer, never scrolling.

type: cycle
seconds: 8
items:
  - Coffee bar open until 16:00
  - Card payments only after 14:00
  - Reusable cups get 20p off

image

A picture, filling the zone or shown whole.

type: image
src: /examples/images/kettle.svg
fit: cover
alt: Staff pick of the week

slideshow

Pictures swapped instantly on a timer.

type: slideshow
seconds: 6
images:
  - /examples/images/snacks.svg
  - /examples/images/tote.svg
  - /examples/images/hamper.svg

qr

A QR code, black on white so phones can scan it.

type: qr
title: Book this room
value: https://example.com/rooms/3.02
label: Scan to book

stack

Splits one zone into parts holding other components, in a row or a column.

type: stack
direction: row
items:
  - { type: stat, title: Wait time, value: 6, unit: min }
  - { type: stat, title: Seats free, value: 42 }
  - { type: text, surface: accent, title: Allergens, fit: true, text: Ask at the counter }
PreviousDocument formatNextWriting with assistants

Edit this page on GitHub