JetUi
ViewComponent-based UI library for Rails applications, matching the design system at ui.jetrockets.com.
Requirements
- Ruby >= 3.0
- Rails >= 7.0
- ViewComponent >= 3.0
- Tailwind CSS v4 (configured in your host app)
Installation
Add to your Gemfile:
gem "jet_ui"
Run the install generator:
bundle install
rails generate jet_ui:install
The generator:
- Detects your Tailwind CSS source file and injects a single import covering all component stylesheets
- 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.
Usage
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.).
Components
⚡ Requires Stimulus (configured automatically by jet_ui:install).
Generators
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:install
jet_ui:eject
Copies 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 flash
By 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