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.

Alternative: npm package (Vite)

The above (importmap) setup needs no npm install — the gem ships the controllers itself. If your app bundles JavaScript with Vite instead, run the install generator: it detects Vite, installs the @jetrockets/jet_ui npm package for you (running yarn add @jetrockets/jet_ui, or the npm/pnpm/bun equivalent it detects), and prints the wiring steps:

rails generate jet_ui:install
# detects Vite → runs: yarn add @jetrockets/jet_ui

Then register the controllers you use (@hotwired/stimulus is a peer dependency):

import { ModalController } from "@jetrockets/jet_ui"

application.register("modal", ModalController)

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 component

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

Component	Docs
Btn	docs/components/btn.md
Card	docs/components/card.md
Badge	docs/components/badge.md
Alert	docs/components/alert.md
Group	docs/components/group.md
Stat	docs/components/stat.md
Icon	docs/components/icon.md
Spinner	docs/components/spinner.md
Avatar	docs/components/avatar.md
Breadcrumbs	docs/components/breadcrumbs.md
Tabs	docs/components/tabs.md
Empty	docs/components/empty.md
List	docs/components/list.md
Divider	docs/components/divider.md
Timeline	docs/components/timeline.md
Stepper	docs/components/stepper.md
Table	docs/components/table.md
Pagy	docs/components/pagy.md
Flash ⚡	docs/components/flash.md
Accordion	docs/components/accordion.md
Clipboard ⚡	docs/components/clipboard.md
Sidebar	docs/components/sidebar.md
Header	docs/components/header.md
Navbar	docs/components/navbar.md
Modal ⚡	docs/components/modal.md
Drawer ⚡	docs/components/drawer.md
Dropdown ⚡	docs/components/dropdown.md
Tooltip ⚡	docs/components/tooltip.md
Popover ⚡	docs/components/popover.md
Turbo Confirm ⚡	docs/components/turbo_confirm.md

⚡ 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