DEV Community

Cover image for Rapid UI Development: Top 4 Component Kits for Solo Rails Devs
Zil Norvilis
Zil Norvilis

Posted on • Originally published at norvilis.com

Rapid UI Development: Top 4 Component Kits for Solo Rails Devs

I remember the days when building a professional-looking dashboard in Rails meant spending a whole week wrestling with CSS flexbox and custom SVG icons. You’d get the backend working in an hour, but the frontend would take forever.

In 2026, the "One-Person Framework" philosophy has finally fixed this. We now have high-quality, pre-built component libraries that give us a "premium" look instantly.

Instead of building a "Modal" or a "DataTable" from scratch, you just install a library and render a component. Here are the top pre-built libraries you should use to ship your next Rails 8 project in record time.

1. Shadcn Rails (The Solo Developer's Favorite)

If you have been watching the React world, you know that Shadcn is the biggest thing in design. It’s famous because you don't "install" it as a black-box library; you copy-paste the code into your project so you have 100% control.

The Rails community now has Shadcn Rails, and it is amazing.

Why it works:
It uses ViewComponent and Tailwind CSS. When you add a component, it generates a Ruby class and an ERB file in your app/components folder.

The Workflow:

  1. You find a component (like a Command Palette or a Calendar) on their site.
  2. You run a simple command to "add" it to your app.
  3. You use it in your view: <%= render UI::Button.new { "Save" } %>.

Because the code is now yours, you can easily tweak the Tailwind classes to match your brand without fighting a gem's internal CSS.

2. Polaris ViewComponents (The Enterprise Choice)

If you want your app to feel as solid and reliable as Shopify, you should use Polaris ViewComponents.

Polaris is the official design system for Shopify. Since Shopify is built on Rails, their component library is one of the most battle-tested in the world.

Why it works:
It is extremely high-quality. It handles accessibility (A11y), keyboard navigation, and complex states perfectly. If you are building a B2B SaaS or a complex internal tool, this is the "No-Brainer" choice.

The Catch:
Your app will look a lot like the Shopify admin. If you want a unique, "funky" startup look, you might find Polaris a bit too "corporate."

3. PhlexUI (The Speed King)

If you have moved away from ERB and are using Phlex (the pure Ruby view engine), then PhlexUI is your best friend.

Why it works:
It is built specifically for the Phlex ecosystem. Because there are no HTML templates to parse, it is incredibly fast. The components are beautifully designed using Tailwind and are very easy to customize because they are just plain Ruby classes.

The Workflow:

render PhlexUI::Card.new do
  render PhlexUI::Card::Header.new do
    render PhlexUI::Typography::H3.new { "Revenue" }
  end
  render PhlexUI::Card::Content.new do
    render PhlexUI::Typography::P.new { "$12,400" }
  end
end
Enter fullscreen mode Exit fullscreen mode

It feels like writing a script rather than writing a webpage. For a solo dev, the "Flow State" you get from staying in pure Ruby is a huge productivity boost.

4. Flowbite / DaisyUI (The "Light" Alternative)

Sometimes, a full ViewComponent library is overkill. You might just want some pre-styled Tailwind classes. In that case, Flowbite or DaisyUI are great.

They don't give you Ruby classes. Instead, they give you a set of "standard" HTML structures and Tailwind classes that make things like tooltips and accordions work using the native popover and details HTML tags.

The Workflow:
You copy a snippet of HTML from their docs and paste it into your Rails view. It’s the fastest way to get a single component, but it’s harder to maintain than a structured library like Shadcn Rails.

Summary: Which one should you pick?

  • Choose Shadcn Rails if you want a modern "Linear/Vercel" look and want total control over the code.
  • Choose Polaris if you are building an enterprise tool where reliability and accessibility are more important than a unique brand.
  • Choose PhlexUI if you are already using Phlex and want the fastest possible development experience.

That's pretty much it. Stop spending your time on CSS gradients. Pick a library, snap the components together, and get back to building the features that actually make you money.

Top comments (0)