Good to know

It's Dangerous to Go Alone! Take This

Make it your own

Nitro Kit exists to give you a starting point. Don’t be afraid to change the components to fit your needs and tastes.

The easiest way to customize the looks or behaviours is just to change them.

If you have to keep the components as they are generated, here are some ideas:

  1. Copy them to a new file and go from there
  2. Subclass components and override class or other methods
  3. Make helper methods that pass class: or other arguments directly

Attributes

Nitro Kit components all accept any keyword argument. These, if not further specified, will be passed to the most relevant HTML element as attributes.

nk_button(thing: "1") becomes <button […] thing="1">

Two attributes have special behaviour:

class: [String|Array|Hash] arguments will get merged with the default classes using tailwind_merge.

data: [Hash] values will be merged with special cases for turbo.action and turbo.controller values. These will be concatted instead of overridden.

Variants

Nitro Kit uses the term variant for things that can have different presentations.

A Button can be primary or destructive for example.

Variants can be chosen either by passing a variant: :primary argument or by the special method name format, like nk_primary_button.

Text or block content

Many components that have textual content can be given either a string or a block.

nk_button "Click me"

or

nk_button { "Click me" }

are equivalent.