ODT-UI for Ruby on Rails (`odt-ui-rails`)

Standalone CSS First & Native Ruby on Rails integration for ODT-Lightweight-UI. Zero build tools required by host application, with seamless Tailwind CSS v4 support and complete ActionView helpers.

Features

🎨 100% Standalone CSS First: Zero build steps required. Ships pre-compiled .odt-* classes and design tokens.
⚡ Tailwind CSS v4 Seamless Interop: Host apps can use custom Tailwind utility classes via class: "..." and include @theme color presets.
🧩 Complete Component Set: Buttons, Badges, Cards, Alerts, Headings, Text, Avatars, Inputs, Textareas, Selects, Checkboxes, Radios, and Form Groups.
💎 Ruby LSP & Solargraph Types: Full RBS type signatures included.

Installation

Add to your Gemfile:

gem "odt-ui-rails", "~> 2.1.0"

Run bundle and install generator:

bundle install
bin/rails g odt:install

Manual Stylesheet Setup

For Tailwind CSS v4 (app/assets/tailwind/application.css or application.tailwind.css):

@import "tailwindcss";
@import "odt_ui/tokens.css";
@import "odt_ui/styles.css";
@import "odt_ui/theme.css";

For Standard Rails / Propshaft / Sprockets (app/assets/stylesheets/application.css):

@import "odt_ui/tokens.css";
@import "odt_ui/styles.css";

Usage Examples

Buttons

<%= odt_button "Submit", variant: :filled, color: :primary, radius: :full %>
<%= odt_button "Glass Action", variant: :frosted, color: :primary %>
<%= odt_button "New Event", href: new_event_path, icon: "fa-solid fa-plus" %>
<%= odt_button "Saving...", loading: true %>
<%# With custom Tailwind classes %>
<%= odt_button "Full Width", class: "mt-4 w-full shadow-lg" %>

Badges

<%= odt_badge "Active", variant: :subtle, color: :success, dot: true %>
<%= odt_badge "Critical", variant: :filled, color: :danger %>
<%= odt_badge "Date", icon: "fa-regular fa-calendar" %>

Cards

<%= odt_card title: "Analytics Overview", subtitle: "Last 30 days", variant: :elevated, hoverable: true do %>
  <p>Your content here</p>
<% end %>

<%= odt_card variant: :frosted, radius: :"3xl", padding: :xl do %>
  <p>Glassmorphic frosted card</p>
<% end %>

Alerts

<%= odt_alert "Changes saved successfully!", variant: :success %>
<%= odt_alert "Please verify your email address.", variant: :warning %>

Form Controls

<%= odt_input label: "Email Address", type: "email", placeholder: "you@example.com", left_icon: "fa-solid fa-envelope" %>

<%= odt_textarea label: "Comments", rows: 4, placeholder: "Type your notes..." %>

<%= odt_select label: "Country", options: [["Thailand", "TH"], ["United States", "US"]], prompt: "Select country" %>

<%= odt_checkbox label: "I agree to terms", description: "Read our privacy policy", color: :primary %>

<%= odt_radio label: "Option A", name: "choice", value: "a", color: :primary %>

<%= odt_form_group label: "Custom Field", required: true, helper: "Must be unique" do %>
  <input type="text" class="odt-input odt-input--outlined odt-input--md" name="custom" />
<% end %>

Typography & Avatars

<%= odt_heading "Dashboard", as: :h1, size: :"4xl" %>
<%= odt_text "Welcome back to your workspace.", color: :muted, size: :lg %>
<%= odt_avatar name: "Korn Chatikavanij", size: :md, color: :secondary %>

ODT-UI for Ruby on Rails (odt-ui-rails)