Prompt in.
Rails interface out.
What made you productive before works against your agent. Nitro Kit is the UI system that keeps your coding agent on track.
Add Nitro Kit 2 to this Rails app and use it for the product's application UI. Set up Nitro Kit before planning or implementing the product: - Add and pin the current Nitro Kit 2 prerelease in the Gemfile, run bundle install, run bin/rails generate nitro_kit:install, and run bin/rails nitro_kit:doctor. - Load the generated project-local Nitro Kit skills and installed, version-matched docs. - Check whether Nitro Kit catalog or MCP tools are available. If they are, inventory and search them by product workflow, retrieve relevant patterns, and state what you will use, adapt, or defer. - If no catalog is available, continue with the bundled docs and component contracts; catalog access is optional.See all 7 demos
Works with Codex, Claude Code, and any MCP client. Read the prompt.
Build Racecamp's application shell (27 Seagulls) in all three Nitro Kit layouts: sidebar, top bar, hybrid. Workspace switcher, Projects/Teams/Activity/Settings nav, user menu, ⌘K command palette, dashboard metrics. Dummy content; UI showcase.
application-shellRebuild Racecamp's authentication as the split-screen variant — sign-in plus forgot-password, sent confirmation, and email verification in one page family. Non-leaking responses, expiring tokens, safe return-to. Nitro Kit, dummy content.
authenticationBuild Racecamp's onboarding: branch (solo/team), workspace details, invite + plan, review and done — with a step indicator and inline validation errors. Nitro Kit forms, dummy data.
onboardingBuild Racecamp's account settings: profile, security (password change signs out other sessions), notification preferences, sessions with per-session revoke, and a danger-zone account deletion with confirmation. Labelled section nav, server-style validation. Nitro Kit, dummy content.
account-settingsBuild Racecamp's subscription experience: pricing with monthly/yearly toggle and three tiers, checkout handoff + confirmation, billing settings with plan, payment method, and invoice history. Nitro Kit, fake data.
subscription-billingBuild Racecamp's file uploads: dropzone, per-file progress with pending/processing/ready/ failed + retry states, existing files list with thumbnails and sizes. Nitro Kit Dropzone and Table, dummy files.
file-uploadsBuild Racecamp's webhooks area: endpoint CRUD with subscribed events and status, one-time signing secret with rotation, per-endpoint delivery log with payload detail and replay. Nitro Kit, dummy data.
webhook-deliveriesWhat made humans productive works against your agent.
Strict Ruby components, plain versioned CSS, native HTML, and a gem-owned core your agent can’t drift from.
01Tailwind components→Plain CSS components
- A human checks every utility class. An agent writes classes that look right but don’t exist in your design system.
- Plain CSS keeps styling out of the component API. Your agent picks a component and a variant. You decide how it looks, in one place.
- Tailwind stays for everything else. For layout and one-off spacing it’s as great as ever.
-<button class="bg-indigo-600 px-4 py-2 …">+<button data-nk="button" data-variant="primary">02ERB fragments→Ruby components
- A human learns the unwritten rules of a folder of partials. An agent sees pieces that combine in any order.
- Ruby components state the rules in code. Use them wrong and they fail 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?") { … }+end03Classes + styles→Variants + fixed APIs
- A human reaches for custom classes when something truly needs to differ. An agent treats every value as valid.
- Variants and fixed APIs give your agent a short list. Guess wrong and it knows right away.
-Button(class: "bg-red-600")-Button(style: "color: red")+Button(variant: :destructive)+# unknown value → ArgumentError04Custom JavaScript state→Native HTML
- Browsers keep improving. Humans miss things. Agents reinvent them.
- Native HTML handles what humans forget: state, focus, keyboard, accessibility.
-<button data-action="modal#open">-controller.open = true+<button commandfor="confirm" command="show-modal">+<dialog id="confirm">05Mixed frontend stacks→Rails end to end
- Human teams split frontend and backend. Agents hold both 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 → HTML06Copied 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.
- 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 2 is in alpha. Get one email when it launches.
54 components. One gem. Zero class= guesses.
A gem-owned Phlex interface system for Rails. Components, CSS, behavior, and contracts ship in the gem and upgrade with bundle update. Nothing is copied into your app unless you ask.
# Gemfile
gem "nitro_kit", "2.0.0.alpha.5"bundle install
bin/rails generate nitro_kit:install
bin/rails nitro_kit:doctor- Components
- 54 catalogued
- Rendering
- Phlex · plain Ruby
- Styling
- Plain versioned CSS
- Behavior
- Native HTML first
- Ownership
- Gem-owned, ejectable
- Pro patterns
- 10 · via MCP
Everything in the box54 components, all in the gem
- Accordion
- Alert
- AppNavigation
- AppShell
- AppearancePicker
- AuthShell
- Avatar
- AvatarStack
- Badge
- Button
- ButtonGroup
- ButtonTo
- Card
- Checkbox
- CheckboxGroup
- Combobox
- CommandPalette
- Container
- ControlGroup
- DangerZone
- DataSection
- DetailsTable
- Dialog
- Dropdown
- Dropzone
- EmptyState
- Field
- FieldGroup
- Fieldset
- Flex
- Grid
- Icon
- Input
- Label
- PageHeader
- Pagination
- PaginationBar
- ProgressiveImage
- RadioButton
- RadioButtonGroup
- RichTextArea
- Select
- SettingsLayout
- SettingsSection
- Sheet
- StatGrid
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toolbar
- Tooltip
- Typeset
- variant
- :default · :primary · :destructive · :ghost
- size
- :xs · :sm · :md · :lg · :xl
- icon
- Lucide name, or icon_end:
- href
- renders <a> with the same states
- type
- :button · :submit · :reset
Button(variant: :danger) → ArgumentError
Starting a product?
Add this to your prompt. Your agent installs Nitro Kit and finds the guidance before it plans.
Add Nitro Kit 2 to this Rails app and use it for the product's application UI.
Set up Nitro Kit before planning or implementing the product:
- Add and pin the current Nitro Kit 2 prerelease in the Gemfile, run bundle install, run bin/rails generate nitro_kit:install, and run bin/rails nitro_kit:doctor.
- Load the generated project-local Nitro Kit skills and installed, version-matched docs.
- Check whether Nitro Kit catalog or MCP tools are available. If they are, inventory and search them by product workflow, retrieve relevant patterns, and state what you will use, adapt, or defer.
- If no catalog is available, continue with the bundled docs and component contracts; catalog access is optional.
Get the changelog and the Pro launch date.
The kit is free. The playbook is Pro.
Like handing your agent the IKEA catalog. Say “build the bathroom” and it comes out right. The kit is the parts. The playbook is the rooms.
- All 54 components, CSS, and behavior
- Contracts and an executable gallery
- Public coding-agent guidance
- Upgrades through Bundler
$0 · custom NitroKit License
Install the gem- 10 patterns: auth, onboarding, CRUD, billing, uploads, webhooks…
- Source exemplars you own
- Evals against the pinned core
- Website and MCP retrieval, ongoing updates
Private alpha · no license check in your app
Ask about ProScales with you: the first screen and the hundredth use the same parts, and your agent never drifts. Components stay in the gem and upgrade with it. Retrieved Pro source is ordinary code you own. It keeps working if you stop paying.
Connect your agent in one line
Pro patterns come over MCP with OAuth. Search by workflow, retrieve the pattern, adapt the exemplar.
claude mcp add --transport http nitro-kit https://nitrokit.dev/mcp
codex mcp add nitro-kit --url https://nitrokit.dev/mcpThen: “search the Nitro Kit catalog for billing and retrieve the pattern.”
Yeah, but…
“But I’m not familiar with Phlex”
Phlex is *just* Ruby. Your agent knows Ruby. You can read the result, and there’s less template magic to explain.
“But what if I *need* to change something with class or style?”
You can. The CSS is yours to override, extend, or replace, and there’s a class cop-out attribute. The safe path is the default, not the only path.
“But native HTML can’t do everything”
True. We use JavaScript where we must.
“But I want the component source in my app”
*Eject* any component when you need to. Until then, the gem carries the fixes and upgrades.
Components that make you Unsloppable
Be notified when Nitro Kit 2 and Pro go live.
Already purchased Nitro Kit Premium? Sign in for legacy downloads.