Service Price Ledger
A price list set like a printed menu — baseline dot leaders, tabular prices, a Book link per row — beside a photo plate that follows hover, focus, or on phones the row mid-screen.
- Category
- Sections
- Added
- 2026-09-25
- Deps
- none
- Updated
- 2026-09-25
This is a viberdy Pro component
The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.
Price list
Card only · Walk-ins till 5
Cuts
Beard & shave
Props
"use client";
import { useEffect, useRef, useState } from "react";
/**
* A price list set like a printed one: names, durations, and prices joined by
* dot leaders — with a photo plate beside it that shows whichever service you
* are looking at, and a Book link on every row.
*
* THE LEADER SITS ON THE BASELINE. The row is a baseline-aligned flex line; the
* leader is a 2px box with no text, whose synthesised baseline is its bottom
* edge, so the dots land on the same line as the letters at any font size. The
* dots are anchored to the RIGHT, so the last one always sits the same
* distance from the price. Prices use tabular figures so the column holds.
*
* THE PLATE FOLLOWS ATTENTION, ON EVERY DEVICE. With a mouse it follows the
* hovered row; with a keyboard, the focused Book link; on a phone, where
* nothing hovers, whichever row is passing the middle of the screen. It keeps
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}About this section
For a barber, a salon or a café, the price list is the page people come back to — the question is nearly always "how much, and how long?" This section answers it the way a printed menu does. Each row carries a name, a duration and a price joined by dot leaders that sit exactly on the text baseline, with prices in tabular figures so the column holds, and a "from" in small caps where a price can vary. Every row has its own Book link, because a price you cannot act on is a dead end. Beside the list sits a photo plate that shows the service you are looking at: it follows the mouse, follows keyboard focus, and on a phone — where nothing hovers — follows whichever row is passing the middle of the screen. Photos are greyscaled and pressed into one plate colour, so a handful of phone snaps from the shop floor read as a single, deliberate series. Switch it to a café menu and the same rows say Order instead.
Curator’s note
The price list is the page a barber's regulars actually open. Dot leaders are the oldest trick in menu setting, and the only hard part is making them sit on the baseline.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Sticky Index Section
sectionsAn editorial index with sticky year headers, and a switch that demonstrates the overflow ancestor that breaks them.
Hanging Quote Section
sectionsA pull quote with the opening mark optically aligned — measured from the real glyph, not a guessed em value.
Find Us Map Section
sectionsA street map printed in the shop's colour, the address set large, a live "Open until 18:00" readout in the shop's own time, the week's hours, nearby stations and one-tap directions — no API key.