Flowbite Components

Unofficial, open source implementation of Flowbite components for Rails applications, built using ViewComponent.

Flowbite Components provides a comprehensive library of UI components following the Flowbite design system, implemented as Rails ViewComponents with full Tailwind CSS integration and dark mode support.

• Full Flowbite Design System: Faithful implementation of Flowbite components
• Rails Native: Built specifically for Rails using ViewComponent
• Tailwind CSS Integration: Seamless integration with Tailwind CSS
• Dark Mode Support: Built-in dark theme variants
• Form Helpers: Comprehensive form input components with validation states
• Accessibility First: ARIA attributes and semantic HTML
• Type Safety: Comprehensive test coverage and input validation

Add the gem to your application's Gemfile:

gem 'flowbite-components'

Then execute:

bundle install

Make sure you have Tailwind CSS installed in your Rails application. We recommend using the tailwindcss-rails gem:

gem "tailwindcss-rails", ">= 4.3.0"

Install Flowbite as an npm dependency:

npm install flowbite

Add Flowbite to your Tailwind CSS configuration. In your app/assets/tailwind/application.css:

@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@import "../builds/tailwind/flowbite-components";

<% form_with model: @user do |form| %>
  <%= render Flowbite::InputField::Text.new(
    attribute: :name,
    form: form,
    label: {content: "Full Name"},
    hint: {content: "Enter your full name"}
  ) %>

  <%= render Flowbite::InputField::Email.new(
    attribute: :email,
    form: form
  ) %>

  <%= render Flowbite::Button.new(
    type: :submit,
    content: "Save User"
  ) %>
<% end %>

<!-- Default button -->
<%= render Flowbite::Button.new do %>
  Click me
<% end %>

<!-- Outline button with color -->
<%= render Flowbite::Button::Outline.new(style: :blue) do %>
  Outline Button
<% end %>

<!-- Pill button -->
<%= render Flowbite::Button::Pill.new(style: :green) do %>
  Pill Button
<% end %>

<%= render Flowbite::InputField::Text.new(
  attribute: :username,
  form: form,
  size: :lg,
  input: {
    options: {
      placeholder: "Enter username",
      maxlength: 50,
      class: "custom-class"
    }
  }
) %>

<%= render Flowbite::InputField::Email.new(
  attribute: :email,
  form: form,
  label: {
    content: "Email Address",
    options: {class: "font-bold"}
  }
) %>

<!-- Disabled field -->
<%= render Flowbite::InputField::Text.new(
  attribute: :name,
  form: form,
  disabled: true
) %>

<!-- Field with hint -->
<%= render Flowbite::InputField::Password.new(
  attribute: :password,
  form: form,
  hint: "Must be at least 8 characters long"
) %>

• Checkbox: Flowbite::InputField::Checkbox
• Date: Flowbite::InputField::Date
• Email: Flowbite::InputField::Email
• File: Flowbite::InputField::File
• Number: Flowbite::InputField::Number
• Password: Flowbite::InputField::Password
• Phone: Flowbite::InputField::Phone
• Radio Button: Flowbite::InputField::RadioButton
• Select: Flowbite::InputField::Select
• Text: Flowbite::InputField::Text
• Textarea: Flowbite::InputField::Textarea
• URL: Flowbite::InputField::Url

• Checkbox: Flowbite::Input::Checkbox
• Date: Flowbite::Input::Date
• Email: Flowbite::Input::Email
• File: Flowbite::Input::File
• Number: Flowbite::Input::Number
• Password: Flowbite::Input::Password
• Phone: Flowbite::Input::Phone
• Radio Button: Flowbite::Input::RadioButton
• Select: Flowbite::Input::Select
• Textarea: Flowbite::Input::Textarea
• URL: Flowbite::Input::Url

• Hint: Flowbite::Input::Hint
• Label: Flowbite::Input::Label
• Validation Error: Flowbite::Input::ValidationError

• Button: Flowbite::Button (default solid button)
• Outline Button: Flowbite::Button::Outline
• Pill Button: Flowbite::Button::Pill

After checking out the repo, run bin/setup to install dependencies.

To run tests:

bundle exec rake test

To check code style:

bundle exec rake standard

To install this gem onto your local machine:

bundle exec rake install

This library includes Lookbook previews for all components. To view them:

1. Add Lookbook to your development dependencies
2. Run rails server
3. Visit /rails/lookbook

Bug reports and pull requests are welcome on GitHub at https://github.com/substancelab/flowbite-components.

• All components should follow Flowbite design system specifications
• Use keyword arguments for component initialization
• Include comprehensive tests for all components
• Follow the existing naming conventions
• Ensure accessibility standards are met

• Flowbite Documentation
• ViewComponent Documentation
• Tailwind CSS Documentation

• https://flowbite-react.com/
• https://flowbite-svelte.com/
• https://flowbite-vue.com/

This project is licensed under the MIT License - see the LICENSE file for details.