Become
unsloppable
Coding agents changed everything.
What made you productive before works against your agent.
Nitro Kit is the UI system that keeps your coding agent on track.
Hear me out …
TailwindCSS→plain CSS
- A human can check and adjust every utility class. An agent can write classes that look right but do not exist in your design system.
- Plain CSS keeps styling out of the component API. Your agent picks a component and a variant. You define together how it looks in one place.
-<button class="bg-indigo-600 px-4 py-2 …">+<button data-nk="button" data-variant="primary">ERB fragments→Ruby components
- A human can learn the unwritten rules around a folder of partials. An agent sees pieces that look like they can be combined in any order.
- Ruby components state the rules in code. If your agent uses them wrong, the code fails loudly instead of rendering broken HTML.
-<%= render "dialog", id: "confirm" do %>- <%= button "Delete", style: "danger" %>-<% end %>+Dialog(id: "confirm") do |dialog|+ dialog.trigger("Delete", variant: :destructive)+ dialog.panel(title: "Delete?") { … }+endclasses + styles→variants + fixed APIs
- A human uses custom classes and styles when something truly needs to be different. An agent treats every possible value as a valid choice.
- Variants and fixed APIs give your agent a short list to choose from. If it guesses wrong, it knows right away.
-Button(class: "bg-red-600")-Button(style: "color: red")+Button(variant: :destructive)+# unknown value → ArgumentErrorcustom JavaScript state→native HTML
- Browsers keep improving. Humans miss things. Agents reinvent them.
- Native HTML handles the stuff humans forget: state, focus, keyboard controls, and accessibility.
-<button data-action="modal#open">-controller.open = true+<button commandfor="confirm" command="show-modal">+<dialog id="confirm">mixed frontend stacks→Rails end to end
- Human teams can split frontend and backend work. Agents have to hold both stacks at once.
- Two stacks mean more glue, slower shipping, and more places for bugs to hide.
- Fewer dependencies mean less to learn, maintain, and trust.
-Rails → JSON → React → client state+Rails → Ruby → HTMLcopied source→gem-owned core
- Humans notice when copied components drift. Agents create another variation.
- The gem keeps one shared version. Fixes arrive with an update.
- You can customize, extend, replace, or copy any component. It’s just not the default.
-$ rails generate uikit:install- create app/components/ui/button.rb- create app/components/ui/dialog.rb+$ bundle update nitro_kit+ Gemfile.lock | 2 +-Nitro Kit comes in two parts
↓Gem
↓MCP
Your app
Be notified when we go live
“But I’m not familiar with Phlex”
Does it matter anymore? Phlex is *just* Ruby. Your agent knows Ruby very well. You can read the result, and there’s less template magic to explain.
“But I like Tailwind”
We do too. Use it on almost every site. Nitro Kit borrows its spacing scale and some of its best ideas. They work great together.
“But what if I *need* to change something with class or style?”
You still can! The CSS is yours to override, extend, or replace. There's a class cop-out attribute too. Nitro Kit makes the safe path the default, not the only path.
“But native HTML can’t do everything”
True. We do use JavaScript where necessary.
“But I want the component source in my app”
You can *eject* any component if you need to. Until then, let the gem carry the fixes and upgrades.
“Can’t my agent build all this from scratch?”
Of course. Agents built Nitro Kit too. Then humans sweated the details and provided the foundation for you and the agents to do your best work together 🤝
Already purchased Nitro Kit Premium? Sign in for legacy downloads.