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.

Try it from scratch:

rails new myproject -c tailwind
cd myproject
bundle add basecoat
rails basecoat:install
rails g scaffold Post title:string! description:text posted_at:datetime active:boolean rating:integer 
rails db:migrate
./bin/dev
# open http://localhost:3000/posts

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.

The default scaffolds are ugly. There's no styling, no turbo frames - it's missing the WOW factor.

Basecoat CSS combines tailwind with clean css classes. It creates the looks of shadcn, which has a massive community.

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.

rake basecoat:install

NB: Only run this once.

The generated views will include:

• Basecoat CSS styling
• Turbo Frame support for SPA-like navigation
• A tiny bit of javascript for awesome 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.

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

rails generate:authentication
rails db:migrate
rake basecoat:install:authentication

NB: To create a user, go to your console:

rails console
User.create(email_address: "[email protected]", password: "basecoat")
exit

First install devise, follow the instructions at https://github.com/heartcombo/devise. Then:

rake basecoat:install:devise

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...)

• We include extra css for the definition list. Ideally I would pick an existing component.
• 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.