Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/substancelab/flowbite-components

UI component library for Rails, built using ViewComponents, Flowbite, and Tailwind CSS.
https://github.com/substancelab/flowbite-components

flowbite rails tailwindcss ui viewcomponent

Last synced: 20 days ago
JSON representation

UI component library for Rails, built using ViewComponents, Flowbite, and Tailwind CSS.

Awesome Lists containing this project

README 

          
# Flowbite Components



[![Gem Version](https://badge.fury.io/rb/flowbite-components.svg)](https://rubygems.org/gems/flowbite-components)

[![Ruby Tests](https://github.com/substancelab/flowbite-components/workflows/Ruby/badge.svg)](https://github.com/substancelab/flowbite-components/actions)



Unofficial, open source implementation of [Flowbite](https://flowbite.com/) components for Rails applications, built using [ViewComponent](https://viewcomponent.org/).



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.



Preview the components at https://flowbite-components.substancelab.com/lookbook/



## Features



- **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



## Installation



Add the gem to your application's Gemfile:



```ruby

gem "flowbite-components"

```



Then execute:



```bash

bundle install

```



### tailwindcss-rails



Tailwind 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](https://github.com/rails/tailwindcss-rails) gem:



```ruby

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

```



### Flowbite Setup



Install Flowbite as an npm dependency:



```bash

yarn add flowbite

```



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



```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](https://flowbite.com/docs/customize/theming/), change `@import "flowbite/src/themes/default";` accordingly.



## Usage examples



### Basic Form Field



```erb

<% 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 %>

```



See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/inputfield.



### Button Examples



```erb



<%= render Flowbite::Button.new do %>

  Click me

<% end %>



<%= render Flowbite::Button::Outline.new(style: :success) do %>

  Outline Button

<% end %>



<%= render Flowbite::Button::Pill.new(style: :danger) do %>

  Pill Button

<% end %>

```



See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/button/default.



### Custom Input Options



```erb

<%= render Flowbite::InputField::Text.new(

  attribute: :username,

  form: form,

  size: :lg,

  input: {

    options: {

      placeholder: "Enter username",

      maxlength: 50,

      class: "custom-class"

    }

  }

) %>

```



See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/inputfield.



### Custom Labels



```erb

<%= render Flowbite::InputField::Email.new(

  attribute: :email,

  form: form,

  label: {

    content: "Email Address",

    options: {class: "font-bold"}

  }

) %>

```



See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_label/inputlabel.



### Disabled and Error States



```erb



<%= render Flowbite::InputField::Text.new(

  attribute: :name,

  form: form,

  disabled: true

) %>



<%= render Flowbite::InputField::Password.new(

  attribute: :password,

  form: form,

  hint: "Must be at least 8 characters long"

) %>

```



See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/disabled_state.



## How to customize components



### Add specific CSS classes



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:



```erb

<%= render(Flowbite::Card.new(class: "w-full my-8")) { "Content" } %>

```

renders

```html



```



If you want to fully replace the existing classes, you can pass an entirely new

`class` attribute via options:



```erb

<%= render(Flowbite::Card.new(options: {class: "w-full my-8"})) { "Content" } %>

```

renders

```html



```



## Available Components



### Form Components



#### Input Fields (Complete form fields with labels, hints, and error handling)

- **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`



#### Basic Input Components (Input elements without labels or wrappers)

- **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`



#### Form Utilities

- **Hint**: `Flowbite::Input::Hint`

- **Label**: `Flowbite::Input::Label`

- **Validation Error**: `Flowbite::Input::ValidationError`



### UI Components



#### Buttons

- **Button**: `Flowbite::Button` (default solid button)

- **Outline Button**: `Flowbite::Button::Outline`

- **Pill Button**: `Flowbite::Button::Pill`



#### Cards

- **Card**: `Flowbite::Card` (default card with content and title)



#### Navigation

- **Link**: `Flowbite::Link` (default link styling)



## Principles



### CSS classes are additive



Passing classes via the `class` argument to a component adds the classes to the

default ones instead of replacing them.



```ruby

render(Component.new(class: "these are added"))

```



This makes for easier customization of components, where you don't have to

recreate the entire classlist, i.e. 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



```ruby

render(Component.new(options: {class: "these replace the classes"}))

```



## Development



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



To run tests:



```bash

bundle exec rake test

```



To check code style:



```bash

bundle exec rake standard

```



To install this gem onto your local machine:



```bash

bundle exec rake install

```



### Component Previews



This library includes a demo application with previews for all components. To view them:



1. cd demo

2. Run `bundle && npm install`

3. Run `rails server`

4. Visit `http://localhost:3000/lookbook`



## Contributing



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



### Development Guidelines



- 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



## Support



- [Flowbite Documentation](https://flowbite.com/docs/)

- [ViewComponent Documentation](https://viewcomponent.org/)

- [Tailwind CSS Documentation](https://tailwindcss.com/docs)



## Other ViewComponent-based libraries



If Flowbite isn't your preference, perhaps one of these other component libraries suits you better?



* [GOV.UK Components](https://govuk-components.netlify.app/introduction/get-started/)

* [Primer Product UI for Rails](https://primer.style/product/getting-started/rails/)



## Other Flowbite component libraries



* https://flowbite-react.com/

* https://flowbite-svelte.com/

* https://flowbite-vue.com/



## License



This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.