The latest articles on DEV Community by tmanhkha (@tmanhkha). https://dev.to/tmanhkha https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F225927%2F9a27db8f-84cf-4a8e-b0e7-3d6f9407681d.png https://dev.to/tmanhkha en tmanhkha Sat, 21 Mar 2026 18:39:22 +0000 https://dev.to/tmanhkha/uikitrails-rails-ui-you-copy-in-not-lock-in-47gf https://dev.to/tmanhkha/uikitrails-rails-ui-you-copy-in-not-lock-in-47gf <p>Like shadcn for Rails: generators drop ViewComponents + ERB + plain CSS into your app. You edit the files; the gem is mainly installers + an optional <code>/ui</code> styleguide.</p> <p>Why bother</p> <ul> <li>Your code — components live under <code>app/components</code> and <code>app/assets</code>, not inside a gem you can’t edit.</li> <li>Plain CSS — design tokens, no Tailwind required.</li> <li>Dark mode — add <code>.dark</code> on html or body.</li> <li>Optional styleguide — mount … =&gt; <code>/ui</code> for live previews and copy-paste snippets.</li> <li>Optional forms — <code>Ui::Form::Builder</code> keeps fields aligned with standalone components. </li> </ul> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>bundle add uikit_rails bin/rails generate uikit_rails:install bin/rails generate uikit_rails:add button card </code></pre> </div> <div class="highlight js-code-highlight"> <pre class="highlight erb"><code><span class="cp">&lt;%=</span> <span class="n">render</span> <span class="no">Ui</span><span class="o">::</span><span class="no">Button</span><span class="o">::</span><span class="no">Component</span><span class="p">.</span><span class="nf">new</span> <span class="k">do</span> <span class="cp">%&gt;</span>Click me<span class="cp">&lt;%</span> <span class="k">end</span> <span class="cp">%&gt;</span> </code></pre> </div> <p>Mounts UikitRails styleguide engine at <code>/ui</code> so you can preview and copy code for installed components.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight ruby"><code><span class="n">mount</span> <span class="no">UikitRails</span><span class="o">::</span><span class="no">Engine</span> <span class="o">=&gt;</span> <span class="s2">"/ui"</span> <span class="c1"># optional</span> </code></pre> </div> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8iw6kka2wieosygobdqc.png" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8iw6kka2wieosygobdqc.png" alt=" " width="800" height="438"></a></p> <p>Github: <a href="https://github.com/kha-wogi/uikit_rails" rel="noopener noreferrer">https://github.com/kha-wogi/uikit_rails</a></p> ruby rails ui