Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/crashtech/torque-admin/llms.txt

Use this file to discover all available pages before exploring further.

Torque Admin ships with first-class support for four CSS frameworks — Bootstrap, Bulma, Tailwind, and Semantic UI (Fomantic-UI). The active theme controls how every UI primitive (buttons, badges, loaders, segments, etc.) is rendered, and it can be extended or completely overridden without forking the engine. Switching frameworks is a single config change; the rest of the admin adapts automatically.
Torque Admin provides the component layer for each framework but does not bundle the framework’s CSS or JavaScript assets. You must add the chosen framework’s stylesheet to your application layout (e.g. via a CDN link, a gem, or your asset pipeline) independently of this setting.

​
Setting the Theme

Set config.theme to one of the four supported values in your initializer or in the inline configure block when mounting the engine: 
# config/initializers/torque_admin.rb
Torque::Admin.configure do |config|
  config.theme = 'semantic_ui'   # 'tailwind' | 'bootstrap' | 'bulma' | 'semantic_ui'
end
Each string value maps directly to a helper module inside Torque::Elements::Helpers:
Config valueHelper module
'bootstrap'Torque::Elements::Helpers::Bootstrap
'bulma'Torque::Elements::Helpers::Bulma
'semantic_ui'Torque::Elements::Helpers::SemanticUI
'tailwind'No dedicated theme module — uses Tailwind utility classes directly
When the admin application initializes, UiBuilder.add_framework is called with the theme name and the corresponding module, creating a dedicated UiBuilder subclass that has all component definitions baked in.

​
Theme Configuration by Framework

Semantic UI (and its community fork Fomantic-UI) uses human-readable class names. The helper module is Torque::Elements::Helpers::SemanticUI.ICON format: "icon %s" (e.g. "icon home")SIZES mapping: mini tiny small default large big huge massive (plus numeric aliases 1–8)Defined elements:
ElementDefault tagNotable presets / notes
button<button class="ui button">Presets: :default, :multiple (renders as <div class="ui buttons">)
container<div class="ui container">Toggles: text, fluid, resizable
divider<div class="ui divider">Toggles: vertical, horizontal, fitted, hidden, section
emoji<em>Argument :name assigned to data-emoji; no content rendered; imports: size
flag<i class="ui flag">Argument :name assigned to class; no content rendered
header<div class="ui header">Imports: icon, size, color; toggles: sub, dividing, block, inverted
icon<i>Argument :name formatted with ICON; no content rendered
image<img class="ui image">Toggles: avatar, bordered, fluid, rounded, circular, centered
badge<span class="ui label">Preset :multiple → <div class="ui labels">; imports: icon, size, color
loader<div class="ui loader">Toggles: text, indeterminate, active, inverted; imports: size, color
placeholder<div class="ui placeholder">Toggles: fluid, inverted
rail<div class="ui rail">Toggles: internal, dividing, attached; property: position
reveal<div class="ui reveal">Argument :type; toggles: instant, disabled, active
segment<div class="ui segment">Preset :multiple → segments wrapper; many toggles
step<div class="ui step">Preset :multiple → steps wrapper; imports: icon, size, color
text<span class="ui text">Imports: size, color
menu<div class="ui menu">Preset :submenu; toggles: secondary, vertical, inverted, fluid, etc.
menu_item<a class="item">Preset :header → <div class="header">
config.theme = 'semantic_ui'
Add Fomantic-UI to your layout:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.css">

​
Page Frames

Frames are the outermost HTML chrome that wrap every rendered admin page — they sit between the view template and the application layout and control the placement of the navigation menu, header, main content area, and footer. Torque Admin ships with four built-in frames:
FrameDescription
classicTop navigation menu + full-width <main> + footer. Simple horizontal chrome.
modernFixed top <header> with the app banner + vertical sidebar menu + scrollable content area + footer.
sidebarFlex-row layout with a left vertical sidebar (menu + banner) + right <main> area + footer.
minimalBare wrapper with no chrome — useful for login pages, error pages, or highly custom layouts.
Set the default frame in your BaseController: 
# app/controllers/admin/base_controller.rb
class Admin::BaseController < TAController
  frame 'classic'
end
You can override the frame per controller or even per action: 
class Admin::SessionsController < TAController
  frame 'minimal'                     # all actions use minimal
end

class Admin::DashboardController < TAController
  frame 'modern', only: [:index]      # only the index uses modern
  frame 'classic', except: [:index]   # everything else uses classic
end

​
Extending the Theme

theme_extensions lets you add custom UI components or override existing ones without changing the source theme. Extensions are applied directly to the theme’s UiBuilder subclass in the order they appear in the array. Using a Proc (for quick DSL additions): 
config.theme_extensions = [
  proc do
    # This block runs in the context of the UiBuilder class
    define :status_pill do |b|
      b.preset(:default, as: 'span', class: 'status-pill')
      b.property(:color).assigns(:class)
    end
  end,
]
Using a Module (for method overrides or helpers): 
module MyAdmin::ThemeOverrides
  # Override the built-in badge to always add a custom class
  def badge(**, &)
    super(**, class: ['internal-badge'], &)
  end
end

Torque::Admin.configure do |config|
  config.theme = 'semantic_ui'
  config.theme_extensions = [MyAdmin::ThemeOverrides]
end
Combining both: 
config.theme_extensions = [
  MyAdmin::BaseExtensions,   # Module — included first
  MyAdmin::ExtraComponents,  # Module — included second (wins on conflicts)
  proc { define :my_widget { |b| b.preset(:default, as: 'div') } },
]

Build docs developers (and LLMs) love

Get started for freeTalk to us