ViewComponent-based UI library for Rails applications, matching the design system at ui.jetrockets.com.
- Ruby >= 3.0
- Rails >= 7.0
- ViewComponent >= 3.0
- Tailwind CSS v4 (configured in your host app)
Add the gem to your Gemfile, then run the install generator — it detects how your app manages JavaScript and wires jet_ui up accordingly, no flags needed:
gem "jet_ui"bundle install
rails generate jet_ui:install| Importmap | Vite | |
|---|---|---|
| Detected by | config/importmap.rb present |
a Vite config, or vite in package.json |
| JS wiring | Automatic — controllers auto-register | Manual — you import and application.register(...) the ones you use |
| CSS wiring | Automatic — injected into your Tailwind source | Manual — @import "@jetrockets/jet_ui/css" in your CSS entry point |
| npm install | None needed — the gem ships the controllers itself | Done for you by the generator (yarn add @jetrockets/jet_ui, or your package manager's equivalent) |
Full walkthrough and troubleshooting for the Vite path: docs/vite.md.
The generator detects your Tailwind CSS source file and injects a single import covering all component stylesheets, and registers JetUi Stimulus controllers in your app's controllers index. When the gem is updated, both CSS and JS are picked up automatically — no further changes needed. Safe to re-run after upgrades.
The generator detects Vite and installs the @jetrockets/jet_ui npm package for you. Vite apps
own their JS/CSS entry points, so those are not modified automatically — wire up the two pieces
yourself:
Register the controllers you use (@hotwired/stimulus is a peer dependency):
import { DialogController, DialogsController } from "@jetrockets/jet_ui"
application.register("dialog", DialogController)
application.register("dialogs", DialogsController)Import the component styles in your Tailwind/CSS entry point:
@import "@jetrockets/jet_ui/css";Or, if you'd rather manage styles through the bundler than the Rails asset pipeline, import the CSS straight from JavaScript:
import "@jetrockets/jet_ui/css" // all component styles
import "@jetrockets/jet_ui/css/btn.css" // a single componentSee docs/vite.md for detection details and troubleshooting.
The jet_ui helper is available in all views:
<%= jet_ui.btn { "Save" } %>
<%= jet_ui.card do %>
<%= jet_ui.card_header do %>
<%= jet_ui.card_title "Hello" %>
<% end %>
<%= jet_ui.card_body do %>Content<% end %>
<% end %>Subcomponents follow the namespace_subcomponent naming convention (card_header, alert_title, stat_label, etc.).
⚡ Requires Stimulus (configured automatically by jet_ui:install).
Sets up JetUi in your application (CSS + JS). Safe to re-run after gem upgrades — already-configured steps are skipped:
rails generate jet_ui:installCopies a component's source files into your application for local customisation. Ejected files take precedence over the gem's versions automatically. For components with a Stimulus controller (e.g. flash), the JS file is ejected too.
rails generate jet_ui:eject btn
rails generate jet_ui:eject flash
rails generate jet_ui:eject btn card flashBy default the test, preview, and JS controller (when present) are all ejected. Use flags to skip any of them:
rails generate jet_ui:eject btn --skip-test
rails generate jet_ui:eject btn --skip-preview
rails generate jet_ui:eject flash --skip-javascript
rails generate jet_ui:eject btn --skip-test --skip-preview