PriceList

Demo landings

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

MarginAn invented AI note-taker for recorded meetings: summaries, decisions and to-dos that each link to the transcript line they came from./demo/ai
RooftreeRooftree keeps a household's groceries, chores, calendar and meals on one encrypted list that syncs across iPhone, Android, Mac and Windows./demo/app
Hollyhock BakeryHollyhock Bakery on Alder Street: today's bake, the menu and prices, opening hours that know the time, pickup orders, directions, step-free access and parking./demo/bakery
The MeasureA book and video course on web typography for designers and engineers: measure, rhythm, scale and fonts, with CSS for every chapter./demo/book
Overprint 2027Overprint is one day of talks on what browsers ship, in two rooms of an old foundry in Rotterdam, on Thursday 15 April 2027./demo/conference
CenteredCentered is a video course in wheel-throwing pottery: 24 lessons in six modules with chapters and transcripts, self-paced or with a cohort, ending in a lidded jar./demo/course
Strata TwoStrata Two is a 75% keyboard in a one-piece aluminium case with a gasket-mounted plate. Preorder batch 03 for $279, shipping 9 March 2027./demo/hardware
plumbPlumb compiles a TypeScript schema to straight-line JavaScript once, so parsing runs the checks you would have written by hand./demo/library
UndercurrentA fortnightly letter and podcast about the water mains, power lines, signals and post under an ordinary day, read aloud with the people who run them./demo/newsletter
KeelKeel meters every event your product emits, prices it on any plan and sends the invoice on the first of the month./demo/saas
QuoinQuoin designs and builds everyday software for transit, libraries and makers, and measures what it changed. Booking from March./demo/studio

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { PriceList } from "@sdxc/ui/landing";

Lays its groups into columns that each stay at least columnWidth wide, starting every group at the top of its cell so a short group keeps its own height. Server markup and CSS alone; group titles rule off in --ui-landing-hairline, set in --ui-landing-display-weight.

Composition

The parts the component publishes, each a static property of the host.

PriceList
PriceList.GroupOne named group: its heading, an optional line under it, then the items as a list.
PriceList.ItemOne item: the name and the price on a shared baseline with a dotted leader filling the gap, and the description under them.

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`columnWidth`	`string`	No	Narrowest a column gets, as a CSS length; the list fits as many columns as clear it.
`children`	`RemixNode`	Yes	One or more PriceList.Group elements.

Also accepts everything in TagProps<"div">.

PriceList.Group

Prop	Type	Required	Description
`title`	`RemixNode`	Yes	The group's name, rendered as a heading at the ambient level.
`description`	`RemixNode`	No	A line under the title, such as when the group is served.
`children`	`RemixNode`	Yes	One or more PriceList.Item elements.

Also accepts everything in Omit<TagProps<"div">, "title">.

PriceList.Item

Prop	Type	Required	Description
`name`	`RemixNode`	Yes	What the item is called.
`price`	`RemixNode`	Yes	The price as the reader should see it, currency included.
`children`	`RemixNode`	No	A short line under the name: what is in it, or how it is sold.

Also accepts everything in Omit<TagProps<"li">, "children">.

Bread

Pastry