Fluxbit ViewComponents is a collection of UI components for Ruby on Rails applications, inspired by the Flowbite component library and built using Tailwind CSS. These components are designed to help developers create modern, responsive, and accessible web applications with ease.
This library includes a variety of interactive elements such as buttons, modals, dropdowns, and more, all styled with Tailwind CSS utility classes and optimized for seamless integration into Rails projects.
Current Situation
This library is open source and is a work in progress. Below we have the situation of each component. Fell free to contribute with us! :)
Component Development Philosophy
Some components from Flowbite will not be implemented in this library. We focus on creating reusable, generic components that provide a solid foundation for building user interfaces. Components that are highly application-specific or require extensive content customization (like Jumbotron, Footer, Navbar, Mega Menu, and Sidebar) are intentionally excluded, as they are better implemented directly in your application where you have full control over the structure and content.
Additionally, certain components may not provide significant value as ViewComponents. For example:
- Layout components (Jumbotron, Footer, Sidebar) - These are typically unique to each application and benefit from being implemented directly in your views
- Simple wrappers (Ratings, Video, Images, Lists) - These add minimal abstraction over standard HTML and are better handled with Tailwind utility classes
- Highly customizable elements (Navbar, Gallery, Mega Menu) - The flexibility needed often outweighs the benefits of abstraction
This approach keeps the library focused on truly reusable components while giving you the flexibility to build custom solutions where it makes sense.
Components
| Element | Code | Tests | Previews | Documentation |
|---|---|---|---|---|
| Accordion |  | | | |
| Alert | | | | |
| Avatar | | | | |
| AvatarGroup | | | | |
| Badge | | | | |
| Banner | | | | |
| Bottom Navigation | | | | |
| Breadcrumb | | | | |
| Button | | | | |
| ButtonGroup | | | | |
| Card | | | | |
| Carousel | | | | |
| Chat Bubble |  | | | |
| Clipboard | | | | |
| Device Mockups | | | | |
| Drawer | | | | |
| Dropdowns | | | | |
| Flex | | | | |
| Gravatar | | | | |
| Indicators | | | | |
| KBD | | | | |
| Link | | | | |
| List Group | | | | |
| Modal | | | | |
| Pagination | | | | |
| Popover | | | | |
| Progress | | | | |
| Skeleton | | | | |
| Speed Dial | | | | |
| Spinner | | | | |
| SpinnerPercent | | | | |
| Stepper | | | | |
| Tab | | | | |
| Table | | | | |
| ThemeButton | | | | |
| Timeline | | | | |
| Toast | | | | |
| Tooltip | | | | |
Form
| Element | Code | Tests | Previews | Documentation |
|---|---|---|---|---|
| Checkbox Input | | | | |
| Datepicker | | | | |
| Dropzone | | | | |
| Form Builder | | | | |
| HelpText | | | | |
| Label | | | | |
| Radio Input | | | | |
| Range Input | | | | |
| Select Input | | | | |
| Text Input | | | | |
| Textarea Input | | | | |
| Toggle Input | | | | |
| Upload Input | | | | |
Typography
| Element | Code | Tests | Previews | Documentation |
|---|---|---|---|---|
| Blockquote | | | | |
| Heading | | | | |
| HR | | | | |
| Text | | | | |