Björk UI

Components•Spec sheet

Spec sheet

A product spec sheet that compares up to three models side by side. Rows that differ are marked, one switch hides everything they share, group headings stick while you scroll, and on a phone it becomes a one-model view with a picker.

Dependencies

Motion clsx

Copy below cli

npx shadcn add @bjork-ui/spec-sheet

How to use

import { SpecSheet, type SpecGroup, type SpecVariant } from "@/components/bjork-ui/tables/spec-sheet";const variants: SpecVariant[] = [  { id: "h14", name: "Halden 14", detail: "from $1,599" },  { id: "h16", name: "Halden 16", detail: "from $2,299" },];const groups: SpecGroup[] = [  {    id: "display",    label: "Display",    rows: [      { label: "Size", value: { h14: 14.2, h16: 16.2 }, unit: "in" },      { label: "Peak brightness", value: { h14: 500, h16: 600 }, unit: "nits", note: "HDR content" },      { label: "Color gamut", value: "100% DCI-P3" },    ],  },];<SpecSheet  title="Compare models"  variants={variants}  groups={groups}  onDifferencesOnlyChange={(on) => console.log(on)}/>

Compare models

22 of 28 specs differ

Show differences only

Compare models: Halden 14, Halden 16, Halden 16 Pro
Spec	Halden 14from $1,599	Halden 16from $2,299	Halden 16 Profrom $3,199
Display
SizeDiagonal, viewable(differs between models)	14.2in	16.2in	16.2in
Resolution(differs between models)	2880 × 1800	3456 × 2160	3456 × 2160
Panel(differs between models)	IPS	IPS	Mini-LED, 2,304 zones
Peak brightnessHDR content(differs between models)	500nits	600nits	1,600nits
Refresh rate(differs between models)	120Hz	120Hz	165Hz
Color gamut	100% DCI-P3All models
Finish(differs between models)	Glossy	Glossy	Nano-texture
Performance
Processor(differs between models)	H2, 10-core	H2, 12-core	H2 Max, 16-core
Graphics(differs between models)	16cores	20cores	40cores
MemoryUnified, not upgradable(differs between models)	16GB	32GB	64GB
Storage(differs between models)	512GB	1TB	2TB
Neural engine	38TOPSAll models
Cooling(differs between models)	Single fan	Dual fan	Dual fan, vapor chamber
Battery
Capacity(differs between models)	72Wh	100Wh	100Wh
Video playbackLocal 1080p, 150 nits(differs between models)	19h	22h	18h
Charger(differs between models)	70W	96W	140W
Fast charge50% in 30 min(differs between models)	No	Yes	Yes
Connectivity
USB-C / Thunderbolt(differs between models)	2ports	3ports	3ports
HDMI 2.1(differs between models)	No	Yes	Yes
SD card slot(differs between models)	No	Yes	Yes
Wireless	Wi-Fi 7, Bluetooth 5.4All models
Headphone jack	YesAll models
Webcam	1080p, Center FrameAll models
Dimensions
Width(differs between models)	312.6mm	355.7mm	355.7mm
Depth(differs between models)	221.2mm	248.1mm	248.1mm
Thickness(differs between models)	14.9mm	16.8mm	16.8mm
Enclosure	Recycled aluminiumAll models
Weight(differs between models)	1.38kg	2.04kg	2.16kg

Marked rows differ between models