Effects

Radius, elevation, motion, and the shared disabled treatment.

Source: src/stylesheets/nitro_kit/tokens.css
API: var(--nk-radius-{step}), var(--nk-shadow-{step}), var(--nk-duration-{speed}), var(--nk-ease)

Radius

Five sizes and a circle. Radii move together when a theme changes shape, and --nk-button-radius separates button shape when a pill treatment should not recolor inputs and surfaces.

Every radius step

Inline chips--nk-radius-xsTypeset code

Compact controls--nk-radius-smCheckbox

Data-entry controls and menus--nk-radius-mdInput, Select, Dropdown, Badge

Actions and surfaces--nk-radius-lgButton, Card, Alert, Toast

Modal surfaces--nk-radius-xlDialog, extra-large Button

Pills and circles--nk-radius-fullAvatar, Switch, RadioButton

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/foundations/effects_page.rb

RADIUS_STEPS.each do |step, tier, consumers|
  figure(data: { gallery: "depth" }) do
    span(
      aria: { hidden: true },
      style: "--gallery-radius: var(--nk-radius-#{step})",
      data: { gallery: "radius-chip" }
    )
    figcaption do
      strong { tier }
      code { "--nk-radius-#{step}" }
      small { consumers }
    end
  end
end

Elevation

Four shadow steps form the depth ladder. Every surface sits on one rung.

Every shadow step

Raised controls--nk-shadow-xsButton

Resting surfaces--nk-shadow-smCard, Tooltip

Floating elements--nk-shadow-mdDropdown, Combobox, Toast

Modal surfaces--nk-shadow-lgDialog, CommandPalette, Sheet

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/foundations/effects_page.rb

ELEVATION_STEPS.each do |step, tier, consumers|
  figure(data: { gallery: "depth" }) do
    span(
      aria: { hidden: true },
      style: "--gallery-shadow: var(--nk-shadow-#{step})",
      data: { gallery: "depth-chip" }
    )
    figcaption do
      strong { tier }
      code { "--nk-shadow-#{step}" }
      small { consumers }
    end
  end
end

Motion

Three durations and one deliberate easing curve, interruptible in both directions. Every transition stands down under prefers-reduced-motion, including these demos.

Every duration step

Micro feedback--nk-duration-fastAccordion chevron, tab highlight

Interactive state--nk-duration-normalControls, overlays, toasts

Large movement--nk-duration-slowSheet, app shell drawer

cubic-bezier(0.4, 0, 0.2, 1)

One curve, both directions--nk-easeEnter and exit stay reversible

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/foundations/effects_page.rb

DURATION_STEPS.each do |speed, tier, consumers|
  figure(data: { gallery: "depth" }) do
    span(aria: { hidden: true }, style: "--gallery-duration: var(--nk-duration-#{speed})", data: { gallery: "motion-chip" }) do
      span(data: { gallery: "motion-chip-handle" })
    end
    figcaption do
      strong { tier }
      code { "--nk-duration-#{speed}" }
      small { consumers }
    end
  end
end
figure(data: { gallery: "depth" }) do
  span(aria: { hidden: true }, data: { gallery: "motion-ease" }) { code { "cubic-bezier(0.4, 0, 0.2, 1)" } }
  figcaption do
    strong { "One curve, both directions" }
    code { "--nk-ease" }
    small { "Enter and exit stay reversible" }
  end
end

Disabled state

One opacity covers every disabled control.

Enabled and disabled

API: var(--nk-disabled-opacity)

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/foundations/effects_page.rb

render NitroKit::Button.new("Save changes", id: "gallery-foundation-enabled")
render NitroKit::Button.new("Save changes", id: "gallery-foundation-disabled", disabled: true)

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.