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-foreground: var(--color-zinc-500);
--color-primary: var(--color-zinc-900);
--color-primary-foreground: var(--color-zinc-100);
--color-destructive: var(--color-red-500);
--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-foreground: var(--color-zinc-400);
--color-primary: var(--color-zinc-50);
--color-primary-foreground: var(--color-zinc-900);
--color-destructive: var(--color-red-900);
--color-destructive-foreground: var(--color-white);
}
}
@variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
@layer base {
* {
@apply border-border min-w-0 ring-ring;
}
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!