Getting started

Installing Nitro Kit into both new and old apps takes just a few steps

Fully automatic

From a new Rails app:

bin/rails app:template LOCATION="https://nitrokit.dev/t/install"

Manual instructions

bundle add nitro_kit bundle install

Tailwind CSS

Tailwind CSS is required for Nitro Kit and version 4 is recommended.

There are multiple, equally good, methods to get Tailwind into your project but the simplest one is likely using tailwindcss-rails:

bundle add tailwindcss-rails bundle install bin/rails tailwindcss:install

Open app/assets/tailwind/application.css and add or replace with this:

@import "tailwindcss";

@theme {
  --color-foreground: var(--color-zinc-900);
  --color-background: var(--color-white);

  --color-border: var(--color-zinc-200);
  --color-ring: var(--color-blue-600);
  --color-muted: var(--color-zinc-100);
  --color-muted-content: var(--color-zinc-500);
  --color-primary: var(--color-zinc-800);
  --color-primary-content: var(--zinc-800);
  --color-primary-foreground: var(--color-zinc-100);
  --color-destructive: var(--color-red-500);
  --color-destructive-content: var(--color-red-800);
  --color-destructive-foreground: var(--color-white);
}

@layer base {
  [data-theme="dark"] {
    --color-foreground: var(--color-zinc-100);
    --color-background: var(--color-zinc-950);

    --color-border: var(--color-zinc-700);
    --color-ring: var(--color-blue-700);
    --color-muted: var(--color-zinc-800);
    --color-muted-content: var(--color-zinc-400);
    --color-primary: var(--color-zinc-50);
    --color-primary-content: var(--color-zinc-50);
    --color-primary-foreground: var(--color-zinc-900);
    --color-destructive: var(--color-red-900);
    --color-destructive-content: var(--color-red-600);
    --color-destructive-foreground: var(--color-white);
  }
}

@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));

@layer base {
  * {
    @apply border-border ring-ring min-w-0;
  }

  body {
    /* Nitro Kit looks great in Inter as well */
    /* https://rsms.me/inter */
    @apply bg-background text-foreground font-sans;
  }
}

Stimulus

Nitro Kit requires Stimulus if you add components that depend on JavaScript.

It is expected that your app loads all Stimulus controllers from app/javascript/controllers/ as per the default stimulus-rails installation.

Add components to your app

bin/rails generate nitro_kit:component all # or a list of individual
components

That's it!

Good to know