DEV Community

Cover image for UikitRails — Rails UI you copy in, not lock in
tmanhkha
tmanhkha

Posted on

UikitRails — Rails UI you copy in, not lock in

#ruby #rails #ui

Like shadcn for Rails: generators drop ViewComponents + ERB + plain CSS into your app. You edit the files; the gem is mainly installers + an optional /ui styleguide.

Why bother

  • Your code — components live under app/components and app/assets, not inside a gem you can’t edit.
  • Plain CSS — design tokens, no Tailwind required.
  • Dark mode — add .dark on html or body.
  • Optional styleguide — mount … => /ui for live previews and copy-paste snippets.
  • Optional forms — Ui::Form::Builder keeps fields aligned with standalone components. 
bundle add uikit_rails
bin/rails generate uikit_rails:install
bin/rails generate uikit_rails:add button card
Enter fullscreen mode Exit fullscreen mode 
<%= render Ui::Button::Component.new do %>Click me<% end %>
Enter fullscreen mode Exit fullscreen mode

Mounts UikitRails styleguide engine at /ui so you can preview and copy code for installed components.

mount UikitRails::Engine => "/ui"  # optional
Enter fullscreen mode Exit fullscreen mode

Github: https://github.com/kha-wogi/uikit_rails

Top comments (0)