{"id":30716706,"url":"https://github.com/substancelab/flowbite-components","last_synced_at":"2026-03-09T18:41:41.212Z","repository":{"id":290413113,"uuid":"974281854","full_name":"substancelab/flowbite-components","owner":"substancelab","description":"UI component library for Rails, built using ViewComponents, Flowbite, and Tailwind CSS. ","archived":false,"fork":false,"pushed_at":"2026-02-27T10:36:07.000Z","size":648,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2026-02-27T15:46:52.267Z","etag":null,"topics":["flowbite","rails","tailwindcss","ui","viewcomponent"],"latest_commit_sha":null,"homepage":"https://flowbite-components.substancelab.com","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/substancelab.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-04-28T14:30:48.000Z","updated_at":"2026-02-27T11:04:32.000Z","dependencies_parsed_at":"2025-07-29T15:05:57.832Z","dependency_job_id":"7462786e-6442-42e5-b5ad-04bb070c570c","html_url":"https://github.com/substancelab/flowbite-components","commit_stats":null,"previous_names":["substancelab/flowbite-view_components","substancelab/flowbite-components"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/substancelab/flowbite-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substancelab%2Fflowbite-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substancelab%2Fflowbite-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substancelab%2Fflowbite-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substancelab%2Fflowbite-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/substancelab","download_url":"https://codeload.github.com/substancelab/flowbite-components/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/substancelab%2Fflowbite-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30307552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-09T17:35:44.120Z","status":"ssl_error","status_checked_at":"2026-03-09T17:35:43.707Z","response_time":61,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flowbite","rails","tailwindcss","ui","viewcomponent"],"created_at":"2025-09-03T08:13:35.940Z","updated_at":"2026-03-09T18:41:41.203Z","avatar_url":"https://github.com/substancelab.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flowbite Components\n\n[![Gem Version](https://badge.fury.io/rb/flowbite-components.svg)](https://rubygems.org/gems/flowbite-components)\n[![Ruby Tests](https://github.com/substancelab/flowbite-components/workflows/Ruby/badge.svg)](https://github.com/substancelab/flowbite-components/actions)\n\nUnofficial, open source implementation of [Flowbite](https://flowbite.com/) components for Rails applications, built using [ViewComponent](https://viewcomponent.org/).\n\nFlowbite 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.\n\nPreview the components at https://flowbite-components.substancelab.com/lookbook/\n\n## Features\n\n- **Full Flowbite Design System**: Faithful implementation of Flowbite components\n- **Rails Native**: Built specifically for Rails using ViewComponent\n- **Tailwind CSS Integration**: Seamless integration with Tailwind CSS\n- **Dark Mode Support**: Built-in dark theme variants\n- **Form Helpers**: Comprehensive form input components with validation states\n- **Accessibility First**: ARIA attributes and semantic HTML\n- **Type Safety**: Comprehensive test coverage and input validation\n\n## Installation\n\nAdd the gem to your application's Gemfile:\n\n```ruby\ngem \"flowbite-components\"\n```\n\nThen execute:\n\n```bash\nbundle install\n```\n\n### tailwindcss-rails\n\nTailwind 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:\n\n```ruby\ngem \"tailwindcss-rails\", \"\u003e= 4.3.0\"\n```\n\n### Flowbite Setup\n\nInstall Flowbite as an npm dependency:\n\n```bash\nyarn add flowbite\n```\n\nAdd Flowbite to your Tailwind CSS configuration. In your `app/assets/tailwind/application.css`:\n\n```css\n@plugin \"flowbite/plugin\";\n@import \"flowbite/src/themes/default\";\n@import \"../builds/tailwind/flowbite_components\";\n```\n\nIf you want to use one of the other [Flowbite themes](https://flowbite.com/docs/customize/theming/), change `@import \"flowbite/src/themes/default\";` accordingly.\n\n## Usage examples\n\n### Basic Form Field\n\n```erb\n\u003c% form_with model: @user do |form| %\u003e\n  \u003c%= render Flowbite::InputField::Text.new(\n    attribute: :name,\n    form: form,\n    label: {content: \"Full Name\"},\n    hint: {content: \"Enter your full name\"}\n  ) %\u003e\n\n  \u003c%= render Flowbite::InputField::Email.new(\n    attribute: :email,\n    form: form\n  ) %\u003e\n\n  \u003c%= render Flowbite::Button.new(\n    type: :submit,\n    content: \"Save User\"\n  ) %\u003e\n\u003c% end %\u003e\n```\n\nSee more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/inputfield.\n\n### Button Examples\n\n```erb\n\u003c!-- Default button --\u003e\n\u003c%= render Flowbite::Button.new do %\u003e\n  Click me\n\u003c% end %\u003e\n\n\u003c!-- Outline button with color --\u003e\n\u003c%= render Flowbite::Button::Outline.new(style: :success) do %\u003e\n  Outline Button\n\u003c% end %\u003e\n\n\u003c!-- Pill button --\u003e\n\u003c%= render Flowbite::Button::Pill.new(style: :danger) do %\u003e\n  Pill Button\n\u003c% end %\u003e\n```\n\nSee more examples at https://flowbite-components.substancelab.com/lookbook/inspect/button/default.\n\n### Custom Input Options\n\n```erb\n\u003c%= render Flowbite::InputField::Text.new(\n  attribute: :username,\n  form: form,\n  size: :lg,\n  input: {\n    options: {\n      placeholder: \"Enter username\",\n      maxlength: 50,\n      class: \"custom-class\"\n    }\n  }\n) %\u003e\n```\n\nSee more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/inputfield.\n\n### Custom Labels\n\n```erb\n\u003c%= render Flowbite::InputField::Email.new(\n  attribute: :email,\n  form: form,\n  label: {\n    content: \"Email Address\",\n    options: {class: \"font-bold\"}\n  }\n) %\u003e\n```\n\nSee more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_label/inputlabel.\n\n### Disabled and Error States\n\n```erb\n\u003c!-- Disabled field --\u003e\n\u003c%= render Flowbite::InputField::Text.new(\n  attribute: :name,\n  form: form,\n  disabled: true\n) %\u003e\n\n\u003c!-- Field with hint --\u003e\n\u003c%= render Flowbite::InputField::Password.new(\n  attribute: :password,\n  form: form,\n  hint: \"Must be at least 8 characters long\"\n) %\u003e\n```\n\nSee more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/disabled_state.\n\n## How to customize components\n\n### Add specific CSS classes\n\nA common use case for customizing a component is to add more CSS classes when\nrendering it, fx to change the size or spacing. flowbite-components is optimized\nfor this case and all you need to do is specify the extra classes:\n\n```erb\n\u003c%= render(Flowbite::Card.new(class: \"w-full my-8\")) { \"Content\" } %\u003e\n```\nrenders\n```html\n\u003cdiv class=\"... all the usual classes... w-full my-8\"\u003e\n```\n\nIf you want to fully replace the existing classes, you can pass an entirely new\n`class` attribute via options:\n\n```erb\n\u003c%= render(Flowbite::Card.new(options: {class: \"w-full my-8\"})) { \"Content\" } %\u003e\n```\nrenders\n```html\n\u003cdiv class=\"w-full my-8\"\u003e\n```\n\n## Available Components\n\n### Form Components\n\n#### Input Fields (Complete form fields with labels, hints, and error handling)\n- **Checkbox**: `Flowbite::InputField::Checkbox`\n- **Date**: `Flowbite::InputField::Date`\n- **Email**: `Flowbite::InputField::Email`\n- **File**: `Flowbite::InputField::File`\n- **Number**: `Flowbite::InputField::Number`\n- **Password**: `Flowbite::InputField::Password`\n- **Phone**: `Flowbite::InputField::Phone`\n- **Radio Button**: `Flowbite::InputField::RadioButton`\n- **Select**: `Flowbite::InputField::Select`\n- **Text**: `Flowbite::InputField::Text`\n- **Textarea**: `Flowbite::InputField::Textarea`\n- **URL**: `Flowbite::InputField::Url`\n\n#### Basic Input Components (Input elements without labels or wrappers)\n- **Checkbox**: `Flowbite::Input::Checkbox`\n- **Date**: `Flowbite::Input::Date`\n- **Email**: `Flowbite::Input::Email`\n- **File**: `Flowbite::Input::File`\n- **Number**: `Flowbite::Input::Number`\n- **Password**: `Flowbite::Input::Password`\n- **Phone**: `Flowbite::Input::Phone`\n- **Radio Button**: `Flowbite::Input::RadioButton`\n- **Select**: `Flowbite::Input::Select`\n- **Textarea**: `Flowbite::Input::Textarea`\n- **URL**: `Flowbite::Input::Url`\n\n#### Form Utilities\n- **Hint**: `Flowbite::Input::Hint`\n- **Label**: `Flowbite::Input::Label`\n- **Validation Error**: `Flowbite::Input::ValidationError`\n\n### UI Components\n\n#### Buttons\n- **Button**: `Flowbite::Button` (default solid button)\n- **Outline Button**: `Flowbite::Button::Outline`\n- **Pill Button**: `Flowbite::Button::Pill`\n\n#### Cards\n- **Card**: `Flowbite::Card` (default card with content and title)\n\n#### Navigation\n- **Link**: `Flowbite::Link` (default link styling)\n\n\n## Principles\n\n### CSS classes are additive\n\nPassing classes via the `class` argument to a component adds the classes to the\ndefault ones instead of replacing them.\n\n```ruby\nrender(Component.new(class: \"these are added\"))\n```\n\nThis makes for easier customization of components, where you don't have to\nrecreate the entire classlist, i.e. in order to increase sizes or add margins or\nwhatever.\n\nIf you want to replace the entire class attribute for a component, pass it as part of the `options` hash, ie\n\n```ruby\nrender(Component.new(options: {class: \"these replace the classes\"}))\n```\n\n## Development\n\nAfter checking out the repo, run `bin/setup` to install dependencies.\n\nTo run tests:\n\n```bash\nbundle exec rake test\n```\n\nTo check code style:\n\n```bash\nbundle exec rake standard\n```\n\nTo install this gem onto your local machine:\n\n```bash\nbundle exec rake install\n```\n\n### Component Previews\n\nThis library includes a demo application with previews for all components. To view them:\n\n1. cd demo\n2. Run `bundle \u0026\u0026 npm install`\n3. Run `rails server`\n4. Visit `http://localhost:3000/lookbook`\n\n## Contributing\n\nBug reports and pull requests are welcome on GitHub at [https://github.com/substancelab/flowbite-components](https://github.com/substancelab/flowbite-components).\n\n### Development Guidelines\n\n- All components should follow Flowbite design system specifications\n- Use keyword arguments for component initialization\n- Include comprehensive tests for all components\n- Follow the existing naming conventions\n- Ensure accessibility standards are met\n\n## Support\n\n- [Flowbite Documentation](https://flowbite.com/docs/)\n- [ViewComponent Documentation](https://viewcomponent.org/)\n- [Tailwind CSS Documentation](https://tailwindcss.com/docs)\n\n## Other ViewComponent-based libraries\n\nIf Flowbite isn't your preference, perhaps one of these other component libraries suits you better?\n\n* [GOV.UK Components](https://govuk-components.netlify.app/introduction/get-started/)\n* [Primer Product UI for Rails](https://primer.style/product/getting-started/rails/)\n\n## Other Flowbite component libraries\n\n* https://flowbite-react.com/\n* https://flowbite-svelte.com/\n* https://flowbite-vue.com/\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstancelab%2Fflowbite-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsubstancelab%2Fflowbite-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsubstancelab%2Fflowbite-components/lists"}