How to use React Components in Active Admin

Catalin Ionescu
Modern Rails
Published in
4 min readMay 10, 2020

--

A comprehensive guide on creating an interactive input field for ActiveAdmin by defining a custom Formtastic input implemented using React

Updated January 2021 for Ruby on Rails 6.1 and ActiveAdmin 2.9.0

Screen recording from the Organisely admin

ActiveAdmin is a Ruby on Rails framework designed to enable building good-looking administration interfaces quickly. It has a DSL that ensures it’s easy to define the data you will display on the Index and Show pages, while also being able to customize the appearance of the forms.

ActiveAdmin has always been a great pick for developers looking to put together an admin section quickly, but with the release of version 2.0 and onwards, it got ever more popular.

Screenshot from BestGems.org

Version 2.0+ allows native integration with webpacker (the Ruby on Rails version of Webpack), keeping up with the latest developments in Rails.

ActiveAdmin also has a very comprehensive documentation and a growing list of themes that can be easily integrated.

I am, by no means, an early adopter of ActiveAdmin. I’ve always seen it as a cryptic tool with questionable value. Then I joined a new company where the first…

--

--

Catalin Ionescu
Modern Rails

Director of Applications Engineering. Bristol University alumnus.