Stat grid

Keyed label, value, and detail records in a responsive one-to-three-column grid.

Source: StatGrid composes Grid with one column by default, two from sm, and three from lg. cols: and gap: accept the Grid vocabulary. It does not own trends, charts, colors, or policy.
API: StatGrid.new(cols: "1 sm:2 lg:3", gap: 4) { |stats| stats.stat(key:, label:, value:, detail:) } requires unique normalized keys and non-blank copy; values render to_s. At least one stat is required.

Cardinality and content pressure

The deliberately narrow keyed stat record across one, partial, complete, dense, and long data.

One stat

Members: 1

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/stat_grid_page.rb

render NitroKit::StatGrid.new(id: "gallery-stat-grid-one") do |stats|
  stats.stat(key: :members, label: "Members", value: "1")
end

Partial row

Members: 18; 2 invitations pending
Active projects: 7

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/components/stat_grid_page.rb

render NitroKit::StatGrid.new(id: "gallery-stat-grid-two") do |stats|
  stats.stat(key: :members, label: "Members", value: "18", detail: "2 invitations pending")
  stats.stat(key: :projects, label: "Active projects", value: "7")
end

Complete row

Monthly requests: 1,284,902; Current billing period
Error rate: 0.08%; Past 24 hours
Uptime: 99.99%; Past 30 days

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/components/stat_grid_page.rb

render NitroKit::StatGrid.new(id: "gallery-stat-grid-three") do |stats|
  stats.stat(key: :monthly_requests, label: "Monthly requests", value: "1,284,902", detail: "Current billing period")
  stats.stat(key: :error_rate, label: "Error rate", value: "0.08%", detail: "Past 24 hours")
  stats.stat(key: :uptime, label: "Uptime", value: "99.99%", detail: "Past 30 days")
end

Dense records

Region 1: 12345; Healthy
Region 2: 24690
Region 3: 37035; Healthy
Region 4: 49380
Region 5: 61725; Healthy
Region 6: 74070
Region 7: 86415; Healthy
Region 8: 98760
Region 9: 111105; Healthy

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/components/stat_grid_page.rb

render NitroKit::StatGrid.new(id: "gallery-stat-grid-dense") do |stats|
  (1..9).each do |index|
    stats.stat(
      key: "region-#{index}",
      label: "Region #{index}",
      value: (index * 12_345).to_s,
      detail: index.odd? ? "Healthy" : nil
    )
  end
end

Caller-owned columns

Queued jobs: 1284
Running: 12
Failed: 0; Past hour
Workers: 6

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/components/stat_grid_page.rb

render NitroKit::StatGrid.new(cols: "2 md:4", gap: 3, id: "gallery-stat-grid-columns") do |stats|
  stats.stat(key: :queued, label: "Queued jobs", value: 1_284)
  stats.stat(key: :running, label: "Running", value: 12)
  stats.stat(key: :failed, label: "Failed", value: 0, detail: "Past hour")
  stats.stat(key: :workers, label: "Workers", value: 6)
end

Long values nested in content

Annual enterprise data retention: 365 days; Applies to International Research and Reliability Engineering
Encrypted object storage: 8,192.75 GB; Replicated across three regions
Audit events awaiting export: 2,147,483,647; Export before the regulatory deadline

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/components/stat_grid_page.rb

render NitroKit::Container.new(size: :lg, id: "gallery-stat-grid-long-container") do
  render NitroKit::StatGrid.new(id: "gallery-stat-grid-long") do |stats|
    stats.stat(key: :retention, label: "Annual enterprise data retention", value: "365 days", detail: "Applies to International Research and Reliability Engineering")
    stats.stat(key: :storage, label: "Encrypted object storage", value: "8,192.75 GB", detail: "Replicated across three regions")
    stats.stat(key: :events, label: "Audit events awaiting export", value: "2,147,483,647", detail: "Export before the regulatory deadline")
  end
end

Component contract

Constructor options, rendered root, closed vocabularies, and compound boundary for this component, exactly as shipped.

docs/component_contracts.md · NitroKit::StatGrid

Constructor: cols: "1 sm:2 lg:3", gap: 4, id: nil
Root: div[data-nk=stat-grid] wrapping a slotted Grid and one dl
Compound contract: One or more stat(key:, label:, value:, detail:) declarations with unique normalized keys. Values accept any object and render to_s; blank copy raises. cols: and gap: use the Grid responsive vocabulary. Stats are declared inside the render block; the root spans the full inline size.

System rules for coding agents

Instructions for coding agents, repeated on every component page so one fetched page has enough context. Humans can usually skip this section.

test/dummy/app/components/gallery/agent_rules.rb

View agent instructions

Nitro Kit 2.0 is a gem-owned, Phlex-only UI system for Rails. Render components directly: render NitroKit::Button.new("Save", variant: :primary).
Compose Nitro components inside application-owned Phlex classes. Public initializers and declared slots are the component API; private methods are not.
Public options are explicit keywords, and enumerated options are closed vocabularies. Invalid names or values raise ArgumentError; this component's accepted options are in the contract above.
Pass native attributes through their typed boundary: html: for HTML, aria: for ARIA, and data: for application data. class and style are forbidden, including inside html:.
Nitro owns NitroKit::Component::RESERVED_DATA_ATTRIBUTES: data-nk, data-slot, data-variant, data-size, data-nk-escape, data-enhanced, data-state, data-disabled, data-required, data-orientation, data-presentation, data-placement, data-layout, data-side, data-field-type, data-dir, data-gap, data-align, data-justify, data-wrap, data-cols, data-mode, data-key. Do not pass them through data:. data-action, data-controller are additive and compose with Nitro behavior.
If an integration truly requires a class, use desperately_need_a_class:. It requires a non-blank String and marks the exception with data-nk-escape="class".
Every root emits data-nk; owned parts emit component-qualified data-slot values such as field-control or card-title. Select on those attributes, never on classes.
Customize components with documented --nk-* custom properties in an application stylesheet. Variables beginning with --_nk-* are private component mechanics.
Use NitroKit::Flex and NitroKit::Grid for layout. Parents own external placement and available width; components own their intrinsic geometry.
Preserve native elements and accessibility semantics. State is exposed through native semantics and ARIA first, and through data-state when styling or behavior also needs it.