bc-grid
GitHub

Density + theming

View source

Three density modes for different work surfaces, plus a fully tokenised theme that follows the host app's light/dark scheme. No CSS overrides needed for the common cases.

Density
Theme
Order #
Customer
Status
Amount
Sales rep
R-000001
Customer 00001
active
$0.00
Avery Chen
R-000002
Customer 00002
pending
$31.42
Ben Singh
R-000003
Customer 00003
closed
$62.83
Cara Diaz
R-000004
Customer 00004
active
$94.25
Drew Lin
R-000005
Customer 00005
pending
$125.66
Elena Park
R-000006
Customer 00006
closed
$157.08
Felix Roy
R-000007
Customer 00007
active
$188.50
Gita Bose
R-000008
Customer 00008
pending
$219.91
Henry Kao
R-000009
Customer 00009
closed
$251.33
Avery Chen
R-000010
Customer 00010
active
$282.74
Ben Singh
R-000011
Customer 00011
pending
$314.16
Cara Diaz
R-000012
Customer 00012
closed
$345.57
Drew Lin
R-000013
Customer 00013
active
$376.99
Elena Park
R-000014
Customer 00014
pending
$408.41
Felix Roy
R-000015
Customer 00015
closed
$439.82
Gita Bose

Try this

Toggle density and theme above the grid.

  • compact — for power users staring at the grid all day. Tight row height, small font.
  • normal — the default. Balanced for most ERP screens.
  • comfortable — looser spacing, larger touch targets, useful on a tablet or for executive-summary screens.
  • Light / dark / system — flips the host app theme. The grid follows automatically.

How density works

The density prop swaps a CSS data attribute on the grid root. CSS variables in @bc-grid/theming remap row height, font size, padding, and the action-column hit area. Animations run through the same FLIP layer so density changes look smooth, not jarring.

Theming

  • No CSS overrides.The grid reads from the host app's shadcn theme tokens — --background, --foreground, --border, --primary — and adds a few of its own (--bc-grid-row-hover, --bc-grid-pinned-shadow). Override those if you want a fully custom palette.
  • Light / dark.Driven by the parent app's .dark class on <html>. No grid-side toggle — flip the host theme and the grid follows.
  • Custom themes. Define new --bc-grid-* variables in any selector that wraps the grid; they cascade normally.

Wiring it up

Import @bc-grid/theming/styles.css once at the root of your global stylesheet. Tailwind v4's @source directive makes sure classes used inside bc-grid's sources are compiled into your app's CSS bundle. See apps/bc-grid-demo/app/globals.css for a copy-pasteable setup.