Flowbite Components

https://github.com/substancelab/flowbite-components
Admin
An unofficial, open-source implementation of Flowbite components for Rails applications, built using...
Tokens:4,459
Snippets:14
Trust Score:7
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Development Setup and Testing

Source: https://github.com/substancelab/flowbite-components/blob/main/README.md

Provides essential commands for setting up the Flowbite Components gem, running tests, checking code style, and installing the gem locally. These commands are executed using the `bundle exec rake` utility.

```Bash
bundle exec rake test
bundle exec rake standard
bundle exec rake install
```

--------------------------------

### Install flowbite-components Gem

Source: https://github.com/substancelab/flowbite-components/blob/main/README.md

Instructions for adding the flowbite-components gem to your Rails application's Gemfile and installing it.

```Ruby
gem 'flowbite-components'
```

```Bash
bundle install
```

--------------------------------

### Button Component Examples

Source: https://github.com/substancelab/flowbite-components/blob/main/README.md

Showcases different styles of buttons available in the Flowbite Components library, including default, outline, and pill buttons with color variations.

```HTML
<!-- 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 %>
```

--------------------------------

### Basic Form Field Example

Source: https://github.com/substancelab/flowbite-components/blob/main/README.md

Demonstrates how to render basic form input fields like text and email using Flowbite components within a Rails form.

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

--------------------------------

### Disabled and Error State Input Fields

Source: https://github.com/substancelab/flowbite-components/blob/main/README.md

Provides examples of rendering input fields in a disabled state and with hint text for validation or guidance.

```HTML
<!-- 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"
) %>
```

--------------------------------

### Customizing Component CSS Classes

Source: https://github.com/substancelab/flowbite-components/blob/main/README.md

Explains how to add or replace CSS classes on Flowbite components for custom styling, showing examples for adding classes and completely replacing them.

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

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

--------------------------------

### Configure Tailwind CSS and Flowbite

Source: https://github.com/substancelab/flowbite-components/blob/main/README.md

Steps to set up Tailwind CSS using the tailwindcss-rails gem and integrate Flowbite by adding it as an npm dependency and importing its styles and plugins into your Tailwind CSS configuration.

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

```Bash
npm install flowbite
```

```CSS
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@import "../builds/tailwind/flowbite_components";
```

--------------------------------

### Customizing Input Field Options

Source: https://github.com/substancelab/flowbite-components/blob/main/README.md

Illustrates how to pass custom options to input fields, such as placeholder text, maxlength, and additional CSS classes.

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

--------------------------------

### Basic Error Page Styling

Source: https://github.com/substancelab/flowbite-components/blob/main/demo/public/400.html

This CSS code provides the fundamental styling for a 400 Bad Request error page. It sets up basic resets, font styles, layout for the body, and specific styles for links, bold text, and italic text. It also includes styles for the main content area, header, and article, ensuring a centered and readable layout.

```CSS
*, *::before, *::after { box-sizing: border-box; } 
* { margin: 0; }

html { font-size: 16px; }

body {
  background: #FFF;
  color: #261B23;
  display: grid;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: clamp(1rem, 2.5vw, 2rem);
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: 400;
  letter-spacing: -0.0025em;
  line-height: 1.4;
  min-height: 100vh;
  place-items: center;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.0925em;
}

b, strong { font-weight: 700; }

i, em { font-style: italic; }

main {
  display: grid;
  gap: 1em;
  padding: 2em;
  place-items: center;
  text-align: center;
}

main header {
  width: min(100%, 12em);
}

main header svg {
  height: auto;
  max-width: 100%;
  width: 100%;
}

main article {
  width: min(100%, 30em);
}

main article p {
  font-size: 75%;
}

main article br {
  display: none;
}

@media(min-width: 48em) {
  main article br {
    display: inline;
  }
}
```

--------------------------------

### 404 Page Stylesheet

Source: https://github.com/substancelab/flowbite-components/blob/main/demo/public/404.html

This CSS code defines the styling for a 404 Not Found page, including layout, typography, and responsive design elements for the Flowbite Components project.

```CSS
*, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { font-size: 16px; } body { background: #FFF; color: #261B23; display: grid; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-size: clamp(1rem, 2.5vw, 2rem); -webkit-font-smoothing: antialiased; font-style: normal; font-weight: 400; letter-spacing: -0.0025em; line-height: 1.4; min-height: 100vh; place-items: center; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; } a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.0925em; } b, strong { font-weight: 700; } i, em { font-style: italic; } main { display: grid; gap: 1em; padding: 2em; place-items: center; text-align: center; } main header { width: min(100%, 12em); } main header svg { height: auto; max-width: 100%; width: 100%; } main article { width: min(100%, 30em); } main article p { font-size: 75%; } main article br { display: none; @media(min-width: 48em) { display: inline; } }
```

--------------------------------

### Flowbite Form Utilities

Source: https://github.com/substancelab/flowbite-components/blob/main/README.md

Offers utility classes for enhancing form elements, including components for hints, labels, and validation errors. These utilities help in structuring and presenting form feedback effectively.

```Ruby
Flowbite::Input::Hint
Flowbite::Input::Label
Flowbite::Input::ValidationError
```

--------------------------------

### Customizing Input Field Labels

Source: https://github.com/substancelab/flowbite-components/blob/main/README.md

Demonstrates how to customize the label for an input field, including adding custom CSS classes for styling.

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

--------------------------------

### Flowbite Input Components

Source: https://github.com/substancelab/flowbite-components/blob/main/README.md

Provides a collection of basic input elements for forms, including checkboxes, date pickers, email fields, file uploads, number inputs, password fields, phone inputs, radio buttons, select dropdowns, textareas, and URL fields. Each component is represented by a class within the Flowbite::Input namespace.

```Ruby
Flowbite::Input::Checkbox
Flowbite::Input::Date
Flowbite::Input::Email
Flowbite::Input::File
Flowbite::Input::Number
Flowbite::Input::Password
Flowbite::Input::Phone
Flowbite::Input::RadioButton
Flowbite::Input::Select
Flowbite::Input::Textarea
Flowbite::Input::Url
```

--------------------------------

### Flowbite UI Button Components

Source: https://github.com/substancelab/flowbite-components/blob/main/README.md

Defines various button styles for the Flowbite UI, including a default solid button, an outline button, and a pill-shaped button. These components are designed to be easily integrated into Rails applications.

```Ruby
Flowbite::Button
Flowbite::Button::Outline
Flowbite::Button::Pill
```
Tokens:
Raw