In active development 👷‍♂️ 🏗️ 🚧

At time of writing this gem gives you working Shoelace with the sl-light theme (tested against a new Rails 7 app). It also allows you to author components with the <%= sl_drawer %> ERB-flavored format. There's active work (see below) to get this gem to a stable and reliable stage, so feel free to contribute!

Shoelace::Rails::Ui

Get started with Shoelace today, the Rails way!

Quickstart

bundle add shoelace-rails-ui
rails g shoelace:install
presto!

# ERB-flavored shoelace.
<%= sl_alert variant: "warning", open: true, closable: true do %>
  Hello from shoelace!!!
<% end %>

# Is the equivalent of
  <sl-alert variant="warning" open closable>
    Hello from shoelace!!!
  </sl-alert>

<%= sl_divider %>

# Nested blocks
<%= sl_details summary: "Togglable" do %>
  <%= sl_alert variant: "primary", open: true do %>
    This is doubly-nested shoelace
  <% end %>
<% end %>

#=>
#  <sl-details summary="Togglable">
#    <sl-alert variant="primary" open>
#      This is doubly-nested shoelace
#    </sl-alert>
#  </sl-details>

<%= sl_divider %>

# You can throw in raw shoelace as well to gradually migrate existing apps.
 <sl-dropdown>
  <sl-button slot="trigger" caret>But you aren't forced</sl-button>
  <sl-menu>
    <sl-menu-item>To use</sl-menu-item>
    <sl-menu-item>ERB</sl-menu-item>
    <sl-divider></sl-divider>
    <sl-menu-item checked>It's totally</sl-menu-item>
    <sl-menu-item disabled>optional :)</sl-menu-item>
  </sl-menu>
</sl-dropdown>

<%= sl_divider %>

# Works like a dream with Hotwire 🚀
<%= turbo_frame_tag :slow, src: static_pages_lazy_path, loading: :lazy do %>
  <%= sl_tag variant: "warning" do %>
    Loading lazily with hotwire!
  <% end %>
  <%= sl_progress_bar indeterminate: true %>
<% end %>

<%= sl_divider %>

What this gem gives you

Out-of-the-box shoelace
sl_my_component(my_attribute:"")-style ERB syntax for composing HTML with these components
sl_form helpers to write forms the Rails way, supercharged with Shoelace
- authored originally by @yuki24 in shoelace-rails

Requirements

Rails 7.0 or greater with defaults (hotwire, importmaps, etc.)

What you don't need

custom javascript
custom css
yarn
webpack
node

Docs

All components

Example application that actually uses this

Workload for MVP (contribute today!)

Todo	Status
`rails generate shoelace:install` one-step to shoelace	✅
Render nested shoelace components	✅
Include assets	✅
V1 codegen	✅
V2 codegen (with @kddnewton's guidance implemented)	🔲
Smoketest in CI	✅
All components test covered	🔲
Github Action CI	✅
Linting in CI	🔲
Render icons	🔲
Autogen docs site	🔲
Version parity with shoelace	🔲
BUG Details summary only accepts one word	🔲
BUG - double text render	✅

Notes

Codegen could be generated by a scrape online instead of a full pull. ( Alernatively, unpkg )

License

The gem is available as open source under the terms of the MIT License.

shoelace-rails-ui

Runtime