Compare Row

A composite block: imports from @/components/vibeui/ — the install command brings them along with the block. The block owns the layout and its own text, passes the parts props only and leaves their --vibeui-<name>-* palettes alone. The component is self-contained: one file, no npm dependencies, the palette in --vibeui-datagrid-026-*. A client component: useState holds the identifier of the reference and the deviation display mode. The reference is chosen with a radio button — this is a choice of one out of many, and a checkbox would lie here; the reference row is rendered first and pinned with position:sticky under the sticky header, so the top offset is set explicitly. The table is built with border-collapse:separate: with collapsed borders the sticky row loses its line. The deviation is labelled with a plus or minus sign along with the colour: colour alone does not read for colour blindness, and "cheaper" and "more expensive" are opposite in meaning here. The theme comes from the surrounding color-scheme through light-dark(): by default the table lays no panel under itself, it sits directly on the page background and darkens along with it, and an opaque background of its own is left only on the sticky cells.