Basecoat (shadcn) powered views for Rails

This gem provides you with amazing layouts, scaffolds, views and partials based on Basecoat UI. It is especially powerful for admin applications with a lot of CRUD actions.

Beautiful responsive, dark & light mode Rails scaffolds, pages for authentication and Devise, and pagy styling.

Login: Index: Form, mobile dark mode:

Shadcn has quickly become the default ui for the web. However, sometimes we don't really need all the React components. Especially with backend applications - where Rails shines as full stack solution.

This is where basecoat-ui comes in. The reason why I love basecoat is because it combines tailwind with clean css classes (like daisy-ui).

If you need more complex components; enrich the views with https://railsblocks.com/ or https://shadcn.rails-components.com/ or just the shadcn React components themselves.

Add this line to your application's Gemfile in the development group:

gem 'basecoat'

And then execute:

bundle install

Note: Basecoat requires Tailwind CSS. If you haven't installed it yet, follow the instructions at https://github.com/rails/tailwindcss-rails to set up Tailwind CSS in your Rails application.

Run the rake tasks, run a scaffold and observe beauty.

Install the Basecoat application layout and partials:

rake basecoat:install

NB: This could overwrite exising files!

The generated views will include:

• Basecoat CSS styling
• Turbo Frame support for SPA-like navigation
• View transitions
• Responsive design
• Dark mode support
• Form validation with required fields
• Boolean fields styled as switches
• Automatic sidebar navigation links

The scaffold templates are automatically available from the gem, so you can immediately generate scaffolds:

rails generate scaffold Post title:string body:text published:boolean

Install the Basecoat-styled Devise views and layout:

rake basecoat:install:devise

NB: This will overwrite exising files!

Install the Basecoat-styled authentication views (for Rails built-in authentication):

rake basecoat:install:authentication

NB: This will overwrite exising files!

Install the Basecoat-styled Pagy pagination:

rake basecoat:install:pagy

• Rails 8.0+
• Tailwind CSS (installation instructions)
• Basecoat CSS
• Stimulus (for the theme toggle, can be moved to something else if you desire...)

The scaffolds are more opinionated than the default - it includes a main turbo frame. I also strongly feel that the index should not reuse the partial used in show - it defeats the purpose of the show page. A responsive table was the best I could come up with - closer to the OG scaffolds before Hotwire.

Also, the (arguably) most messy part of the views are the svg tags which contain the lovely lucide icons. Since these icons are the default for shadcn I'm considering including https://github.com/heyvito/lucide-rails to clean up the views.

• The javascript included by basecoat needs some improvement. It's not automatically initialized on turbo:load - included is a hack that I hope is temporary.
• We include extra css for the definition list. Hopefully this will be part of basecoat-css someday.
• Rails adds class="field_with_errors", so we need extra css for this. I hope Rails will at some point have aria-invalid="true" on the input, basecoat will apply the correct styling.
• Can the views even be prettier? Probably! I'm more than happy to discuss improvements:

Bug reports and pull requests are more than welcome on GitHub!

The gem is available as open source under the terms of the MIT License.