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 installTailwind needs to be able to look through your code in order to generate the final CSS file with the class names you actually use. To allow Tailwind to find CSS class names inside flowbite-components you need to use tailwindcss-rails gem:
gem "tailwindcss-rails", ">= 4.3.0"Install Flowbite as an npm dependency:
yarn add flowbiteAdd Flowbite to your Tailwind CSS configuration. In your app/assets/tailwind/application.css:
@plugin "flowbite/plugin";
@import "flowbite/src/themes/default";
@import "../builds/tailwind/flowbite_components";If you want to use one of the other Flowbite themes, change @import "flowbite/src/themes/default"; accordingly.
<% 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"
) %>A common use case for customizing a component is to add more CSS classes when rendering it, fx to change the size or spacing. flowbite-components is optimized for this case and all you need to do is specify the extra classes:
<%= render(Flowbite::Card.new(class: "w-full my-8")) { "Content" } %>renders
<div class="... all the usual classes... w-full my-8">If you want to fully replace the existing classes, you can pass an entirely new
class attribute via options:
<%= render(Flowbite::Card.new(options: {class: "w-full my-8"})) { "Content" } %>renders
<div class="w-full my-8">- 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
- Card:
Flowbite::Card(default card with content and title)
- Link:
Flowbite::Link(default link styling)
Passing classes via the class argument to a component adds the classes to the
default ones instead of replacing them.
render(Component.new(class: "these are added"))This makes for easier customization of components, where you don't have to recreate the entire classlist, ie in order to increase sizes or add margins or whatever.
If you want to replace the entire class attribute for a component, pass it as part of the options hash, ie
render(Component.new(options: {class: "these replace the classes"}))After checking out the repo, run bin/setup to install dependencies.
To run tests:
bundle exec rake testTo check code style:
bundle exec rake standardTo install this gem onto your local machine:
bundle exec rake installThis library includes a demo application with previews for all components. To view them:
- cd demo
- Run
bundle && npm install - Run
rails server - Visit
http://localhost:3000/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
This project is licensed under the MIT License - see the LICENSE file for details.