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

1. bundle add shoelace-rails-ui
2. rails g shoelace:install
3. 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.