Fluxbit ViewComponents

Installation Guide

You can install everything automatically by running:

bundle add fluxbit_view_components
bin/rails fluxbit_view_components:install

Or follow the steps below to install manually. Some steps below are the same as the instructions to install Tailwind and Flowbite from this link: https://flowbite.com/docs/getting-started/rails/

⚠️ This guide assumes you are using Rails 7.0 or later with ESBuild as the JavaScript bundler. If you are using a different setup, please refer to the Flowbite documentation for more information.

Create a new project

If you don't have a Rails project yet, create one:

gem install rails

Then create a new Rails project with TailwindCSS and ESBuild:

rails new myapp -j esbuild --css tailwind; cd myapp

⚠️ If you already have a Rails project, skip this step. ⚠️ If you are using Importmap or Webpacker, you can use the --skip-javascript option to skip the JavaScript setup. You can then add your preferred JavaScript setup later. ⚠️ If you are using Rails 7.1 or later, you can use the --css tailwind option to set up TailwindCSS automatically.

Add Required Gems

Add the TailwindCSS gems to your Gemfile:

bundle add tailwindcss-ruby
bundle add tailwindcss-rails
bundle add view_components
bundle add fluxbit_view_components

Install TailwindCSS

Run the installer to generate the configuration files:

bin/rails tailwindcss:install

Install Flowbite via NPM

npm install flowbite --save

💡 Replace yarn with npm or bun depending on your setup.

Configure tailwind.config.js

Create or replace the file tailwind.config.js with the following content:

const execSync = require('child_process').execSync;
module.exports = {
  content: [`${execSync("bundle show fluxbit").toString().trim()}/**/*.{erb,html,rb}`]
}

⚠️ The new version of Tailwind CSS (v4.0+) doesn't require to have a tailwind.config.js file, but to use Flowbite and Fluxbite you need to have it.

Update Your Main CSS File

In app/assets/stylesheets/application.tailwind.css, add the following lines:

@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "../../../node_modules/flowbite";
@config "../../../tailwind.config.js";

Update the Default Layout

Edit app/views/layouts/application.html.erb:

Inside the <head> tag:

<script>
    if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
      document.documentElement.classList.add('dark');
    } else {
      document.documentElement.classList.remove('dark')
    }
  </script>

⚠️ You only need to add this line if you want to use the dark mode feature.

Replace the <body> tag with:

<body class="<%= fx_body_class %>">

⚠️ If you're using a custom layout, apply the same changes accordingly.

Done!

Your app is now configured with:

  • TailwindCSS
  • Flowbite
  • Fluxbit ViewComponents styles and helpers