Why I Built Rails Blocks

👋 Hey, I'm Alex. I've been building Rails apps for years, and I kept running into the same frustrating problem:

Finding beautiful, functional UI components for Rails is way harder than it should be.

The Problem

Every month, I see amazing component libraries launch for upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg - https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg React. Beautiful dropdowns, smooth animations, thoughtful interactions. I'd reach out to the creators: "Any plans for a Rails version?"

The answer was always the same: "Sorry, just React, Vue, and other JS frameworks."

Meanwhile, the Rails community (despite being an incredible ecosystem for shipping fast) was stuck choosing between:

  • Building everything from scratch (slow 🐌)
  • Using outdated components (ugly 🧌)
  • Compromising on quality to ship faster (frustrating 😤)

Why I Built Rails Blocks

Rails is phenomenal at helping you ship fast. But we don't have to sacrifice quality for speed.

Modern users expect interfaces that are both beautiful and functional.

So with my background (9 years as a designer / product manager, and years building SaaS products) I knew I could help.

I used Stimulus, Tailwind CSS, and a few other dependencies to create interactions that rival what you'd find in the React world.

The Solution: Rails Blocks

I started building these components for my own apps in 2022. After months of refinement and real-world testing, I realized other Rails developers could benefit from them too.

Rails Blocks is my answer to the lack of interactive UI resources for Ruby on Rails. Each component is:

  • Production-ready: Battle-tested in real apps like SchoolMaker and Sponsorship.so
  • Delightful by default: Modern design that works out of the box
  • Stimulus-powered: With flexible and documented components
  • Copy-paste simple: Simple to install, and works with importmaps
  • Accessible: With keyboard navigation and screen reader support

My Hope

I want Rails developers to have access to the same beautiful, modern components that other frameworks enjoy. You should be able to ship something fast that also looks and feels delightful.

If you find Rails Blocks useful, please share it. The more developers who know about it, the stronger our ecosystem becomes. Together, we can make Rails hot again, one beautiful component at a time.

Inspiration & Credits

Some great projects that inspired me to create Rails Blocks:

  • shadcn/ui - For showing what modern component libraries can be
  • Origin UI - For beautiful, thoughtful design patterns & the home page layout
  • Tailwind UI - For setting the standard in Tailwind CSS component design
  • CSS Zero by Lazaro Nixon - for part of the idea of creating lots of component variants
  • Tailwind Stimulus Components by the great Chris Oliver - for partially giving me the idea to create a Stimulus component library & inspiration for some components

Dependencies that make Rails Blocks possible:

  • Tailwind CSS - The utility-first CSS framework that powers all our styling
  • Stimulus - For progressive enhancement and interactivity the Rails way
  • Floating UI - Excellent positioning library for dropdowns, popovers, and tooltips
  • Number Flow - Beautiful number animations with smooth transitions
  • Embla Carousel - Lightweight and performant carousel with great touch support
  • Shoelace - Their color picker component is one of the best I've found
  • Tom Select - Powerful and flexible select component with great UX
  • Air Datepicker - Feature-rich date picker that just works
  • Emoji Mart - The most complete framework agnostic emoji picker component available
  • Nucleo - Premium icons used throughout the components. Copyright Notice

Table of contents

Get notified when new components come out