### Initialize and Start Development
Source: https://github.com/themesberg/flowbite/blob/main/BUILD-TOOLS.md
Commands to install dependencies and launch the development server.
```bash
yarn install
```
```bash
yarn start
```
--------------------------------
### Install .NET SDK
Source: https://github.com/themesberg/flowbite/blob/main/content/getting-started/blazor.md
Install the .NET SDK using apt-get or HomeBrew.
```bash
sudo apt-get update && \
sudo apt-get install -y dotnet-sdk-7.0
```
```bash
brew install --cask dotnet
```
--------------------------------
### InputCounter Initialization and Usage Example
Source: https://github.com/themesberg/flowbite/blob/main/llms-full.txt
Example demonstrating how to initialize and use the InputCounter object.
```APIDOC
## InputCounter Initialization and Usage
### Description
This example shows how to create a new InputCounter instance and use its methods.
### Initialization
First, select the target element and optionally the increment and decrement elements.
```javascript
// Set the target element of the input field
const $targetEl = document.getElementById('counter-input-example');
// Optionally set the increment and decrement elements
const $incrementEl = document.getElementById('increment-button');
const $decrementEl = document.getElementById('decrement-button');
// Optional options with default values and callback functions
const options = {
minValue: 0,
maxValue: null, // infinite
onIncrement: () => {
console.log('input field value has been incremented');
},
onDecrement: () => {
console.log('input field value has been decremented');
}
};
const instanceOptions = {
id: 'counter-input-example',
override: true
};
```
Next, create a new instance of the InputCounter object.
```javascript
import { InputCounter } from 'flowbite';
/*
* $targetEl: required
* $incrementEl: optional
* $decrementEl: optional
* options: optional
* instanceOptions: optional
*/
const counterInput = new InputCounter($targetEl, $incrementEl, $decrementEl, options, instanceOptions);
```
### Usage
Programmatically interact with the input field using the InputCounter methods.
```javascript
// Get the current value of the input field
const currentValue = counterInput.getCurrentValue();
console.log('Current value:', currentValue);
// Increment the value of the input field
counterInput.increment();
// Decrement the value of the input field
counterInput.decrement();
```
### Response
#### Success Response (200)
- **getCurrentValue()**: Returns the current numeric value of the input field.
- **increment()**: No return value, performs the increment operation.
- **decrement()**: No return value, performs the decrement operation.
#### Response Example
```json
{
"example": "Current value: 5"
}
```
```
--------------------------------
### Install PostgreSQL on Windows
Source: https://github.com/themesberg/flowbite/blob/main/content/getting-started/phoenix.md
Install the PostgreSQL relational database server using Scoop on Windows.
```bash
scoop install postgresql
```
--------------------------------
### Install Tailwind CSS Configuration
Source: https://github.com/themesberg/flowbite/blob/main/content/getting-started/rails.md
Run the Tailwind CSS install command to set up the necessary configuration files for Tailwind CSS in your Rails project. This command initializes the Tailwind CSS setup.
```bash
./bin/rails tailwindcss:install
```
--------------------------------
### Start Qwik development server
Source: https://github.com/themesberg/flowbite/blob/main/content/getting-started/qwik.md
Launch the local development server to view the project at http://localhost:5173/.
```bash
npm run start
```
--------------------------------
### Svelte Footer Component Example
Source: https://github.com/themesberg/flowbite/blob/main/content/getting-started/svelte.md
Construct a footer with copyright information and navigation links. Ensure 'flowbite-svelte' is installed.
```html
```
--------------------------------
### Svelte Navbar Component Example
Source: https://github.com/themesberg/flowbite/blob/main/content/getting-started/svelte.md
Implement a navigation bar with brand, links, and a hamburger menu. Ensure 'flowbite-svelte' is installed.
```html
Flowbite
HomeAboutServicesPricingContact
```
--------------------------------
### Start development server
Source: https://github.com/themesberg/flowbite/blob/main/content/getting-started/solid-js.md
Launch the local development server to view the application.
```bash
npm run dev
```
--------------------------------
### Create a Qwik project
Source: https://github.com/themesberg/flowbite/blob/main/content/getting-started/qwik.md
Initialize a new Qwik project using the official CLI tool.
```bash
npm create qwik@latest
```
--------------------------------
### Default Form Example
Source: https://github.com/themesberg/flowbite/blob/main/content/components/forms.md
A basic form component with email, password, checkbox, and submit button. Use this as a starting point for your forms.
```html
```
--------------------------------
### Initialize Project
Source: https://github.com/themesberg/flowbite/blob/main/content/getting-started/typescript.md
Create a package.json file in the root directory to manage project dependencies.
```bash
npm init
```
--------------------------------
### Gallery with Tag Filters
Source: https://github.com/themesberg/flowbite/blob/main/llms-full.txt
Use this example to show a list of tags and filter the images below based on the actively selected tag. This component requires no additional setup.
```html
```
--------------------------------
### Create and run Blazor project
Source: https://github.com/themesberg/flowbite/blob/main/content/getting-started/blazor.md
Commands to initialize a new Blazor WebAssembly project and start the development server.
```bash
dotnet new blazorwasm
```
```bash
dotnet watch
```
--------------------------------
### Hero Section with Call-to-Action
Source: https://github.com/themesberg/flowbite/blob/main/content/getting-started/phoenix.md
Use this hero section to introduce your product or service and encourage users to get started. It includes a headline, descriptive text, and a prominent call-to-action button.
```html
Let's create more tools and ideas that brings us together.
Flowbite helps you connect with friends and communities of people who share your interests. Connecting with your friends and family as well as discovering new ones is easy with features like Groups.
```
--------------------------------
### Timepicker with Timezone Select
Source: https://github.com/themesberg/flowbite/blob/main/content/forms/timepicker.md
Use this example to show a select input next to the timepicker to select an option like a timezone. This setup is useful for applications dealing with different geographical regions.
```html
```
--------------------------------
### Create New Next.js Project (Manual Setup)
Source: https://github.com/themesberg/flowbite/blob/main/content/getting-started/next-js.md
Use the Vercel CLI to create a new Next.js project. You will be prompted to include Tailwind CSS during the setup process.
```bash
npx create-next-app@latest
```
--------------------------------
### Speed Dial Top Right
Source: https://github.com/themesberg/flowbite/blob/main/content/components/speed-dial.md
Use the `top-{*}` and `right-{*}` utility classes to position the speed dial component to the top right of the document. This example demonstrates the basic setup for a speed dial with multiple action buttons.
```html
Flowbite
