Flowbite

https://flowbite.com/docs/
Admin
Flowbite is an open-source library of interactive UI components built with Tailwind CSS utility...
Tokens:107,137
Snippets:908
Trust Score:9.3
Update:1 week ago
Show doc for...
Tokens:
Raw
### Create Qwik project and install Flowbite

Source: https://flowbite.com/docs/getting-started/qwik

Commands to create a new Qwik project, install Flowbite, and start the development server.

```bash
npm create qwik@latest
```

```bash
cd qwik-app
```

```bash
npm install flowbite
```

```bash
npm run dev
```

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

### Install PostgreSQL on Windows with Scoop

Source: https://flowbite.com/docs/getting-started/phoenix

Install PostgreSQL on Windows using Scoop. After installation, start the server with `brew services start postgresql` (if using Homebrew) or the appropriate service command.

```bash
scoop install postgresql
```

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

### Start PostgreSQL server

Source: https://flowbite.com/docs/getting-started/phoenix

Start the PostgreSQL server after installation using Homebrew services.

```bash
brew services start postgresql
```

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

### Install PostgreSQL on macOS with Homebrew

Source: https://flowbite.com/docs/getting-started/phoenix

Install PostgreSQL on macOS using Homebrew. After installation, start the server with `brew services start postgresql`.

```bash
brew install postgresql
```

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

### Install Flowbite MCP with npx

Source: https://flowbite.com/docs/getting-started/mcp

Run this command in your terminal to install and start the Flowbite MCP server using npx. Use `npx flowbite-mcp --help` to see available options.

```bash
npx flowbite-mcp
```

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

### Run Django development server

Source: https://flowbite.com/docs/getting-started/django

Starts the Django development server. Expect an error about the missing output.css file until Tailwind CSS is installed.

```bash
python manage.py runserver
```

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

### Install django-compressor

Source: https://flowbite.com/docs/getting-started/django

Run this command in the terminal to install the django-compressor package.

```bash
python -m pip install django-compressor
```

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

### Install .NET SDK via Homebrew

Source: https://flowbite.com/docs/getting-started/blazor

Install the .NET SDK on macOS using Homebrew.

```bash
brew install --cask dotnet
```

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

### Start Phoenix server

Source: https://flowbite.com/docs/getting-started/phoenix

Starts a local Phoenix server, making the project available at http://localhost:4000.

```bash
mix phx.server
```

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

### Install Elixir on Windows with Scoop

Source: https://flowbite.com/docs/getting-started/phoenix

Use Scoop to install Erlang and Elixir on Windows. Verify the installation with `elixir -v`.

```bash
scoop install erlang
scoop install elixir
```

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

### Generate a design skill with npx typeui.sh generate

Source: https://flowbite.com/docs/getting-started/typeui

Starts an interactive setup to generate your own SKILL.md file. After answering the questions, you choose an AI provider, and the CLI creates the file in the current working directory.

```bash
npx typeui.sh generate
```

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

### Install .NET SDK 7.0 on Ubuntu

Source: https://flowbite.com/docs/getting-started/blazor

Install the .NET SDK version 7.0 on Ubuntu using apt-get.

```bash
sudo apt-get update && \
sudo apt-get install -y dotnet-sdk-7.0
```

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

### Install Microsoft package repository on Ubuntu

Source: https://flowbite.com/docs/getting-started/blazor

Install the Microsoft package repository on Ubuntu 20.04, which contains the package signing key required for installing the .NET SDK.

```bash
wget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb
sudo dpkg -i packages-microsoft-prod.deb
rm packages-microsoft-prod.deb
```

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

### Install Symfony CLI on Windows with Scoop

Source: https://flowbite.com/docs/getting-started/symfony

Installs the Symfony CLI using Scoop on Windows.

```bash
scoop install symfony-cli
```

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

### Run Flowbite MCP locally for development

Source: https://flowbite.com/docs/getting-started/mcp

Clone the repository, install dependencies, build, and run the server locally. Use `npm run start inspector` to launch the MCP inspector for debugging.

```bash
# Clone the repository
git clone https://github.com/themesberg/flowbite-mcp.git
cd flowbite-mcp
# Install dependencies
npm install
# Build the project
npm run build
# Run in stdio mode (for Claude Desktop, Cursor)
npm start
# Run inspector
npm run start inspector
```

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

### Install Hex package manager

Source: https://flowbite.com/docs/getting-started/phoenix

Install or upgrade the Hex package manager using `mix local.hex`.

```bash
mix local.hex
```

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

### Install flowbite-typography with npm

Source: https://flowbite.com/docs/components/typography

Install the Flowbite Typography plugin as a development dependency using npm.

```bash
npm i -D flowbite-typography
```

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

### Install Rails gem

Source: https://flowbite.com/docs/getting-started/rails

Installs the Rails gem globally. Run this before creating a new Rails application.

```bash
gem install rails
```

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

### Install SvelteKit with npm create svelte

Source: https://flowbite.com/docs/getting-started/svelte

Creates a new SvelteKit application in the my-app directory and installs dependencies with pnpm.

```bash
npm create svelte@latest my-app
cd my-app
pnpm i
```

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

### Start Laravel development server

Source: https://flowbite.com/docs/getting-started/laravel

Starts the Laravel development server. The application will be accessible at http://localhost:8000.

```bash
composer run dev
```

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

### Run ./bin/dev

Source: https://flowbite.com/docs/getting-started/rails

Start a local server and build the source files.

```bash
./bin/dev
```

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

### Start the local development server

Source: https://flowbite.com/docs/getting-started/qwik

Run this command to start a local development server. You can then access the boilerplate Qwik project at http://localhost:5173/.

```bash
npm run start
```

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

### Setup Phoenix project

Source: https://flowbite.com/docs/getting-started/phoenix

Sets up the generated Phoenix project. If the project includes database configurations, ensure a postgres SUPERUSER and postgres database exist.

```bash
mix setup
```

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

### Install Tailwind CSS via Qwik starter

Source: https://flowbite.com/docs/getting-started/qwik

Run this command to automatically set up Tailwind CSS in your Qwik project. It installs Tailwind CSS and its dependencies and modifies src/global.css to import the Tailwind module.

```bash
npm run qwik add tailwind
```

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

### Basic Button Usage

Source: https://flowbite.com/docs/getting-started/remix

Shows a minimal example of using the Button component in a React component. This is the starting point for using Flowbite React components.

```tsx
export default function Index() {
    return <Button>Click me</Button>;
}
```

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

### Custom spacing variable with @theme

Source: https://flowbite.com/docs/customize/theming

Adds a custom spacing value '10px' that can be used with utility classes like p-custom or w-custom. The example shows the required imports and plugin setup.

```css
/* input.css file */
@import "tailwindcss";

@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

@theme {
   --spacing-custom: 10px;
}
```

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

### Clone, build, and run Flowbite MCP in stdio mode

Source: https://flowbite.com/docs/getting-started/mcp

Clone the Flowbite MCP repository, install dependencies, build the project, run it in stdio mode for Claude Desktop or Cursor, and start the inspector.

```bash
git clone https://github.com/themesberg/flowbite-mcp.git
cd flowbite-mcp

# Install dependencies
npm install

# Build the project
npm run build

# Run in stdio mode (for Claude Desktop, Cursor)
npm start

# Run inspector
npm run start inspector
```

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

### Run HUGO development server

Source: https://flowbite.com/docs/getting-started/hugo

Start a local development server with draft content enabled.

```bash
hugo server -D
```

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

### Create a new Remix project with Flowbite React using CLI

Source: https://flowbite.com/docs/getting-started/remix

Run this command to create a new Remix project with Flowbite React, Tailwind CSS v4, and dark mode support. It installs all dependencies and sets up example components.

```bash
npx create-flowbite-react@latest -t remix
```

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

### Start Astro development server

Source: https://flowbite.com/docs/getting-started/astro

Run this command to start a local development server. The project will be accessible at http://localhost:3000.

```bash
npm run dev
```

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

### Create a new Qwik project

Source: https://flowbite.com/docs/getting-started/qwik

Run this command in your terminal to create a new Qwik project. The Qwik CLI will prompt you with configuration questions.

```bash
npm create qwik@latest
```

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

### Install Elixir on macOS with Homebrew

Source: https://flowbite.com/docs/getting-started/phoenix

Use Homebrew to install Elixir on macOS. Verify the installation with `elixir -v`.

```bash
brew install elixir
```

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

### Verify .NET SDK installation

Source: https://flowbite.com/docs/getting-started/blazor

Command to verify the .NET SDK installation. The expected output is the usage information shown in the next snippet.

```bash
-$ dotnet
```

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

### Install Tailwind CSS with NPM

Source: https://flowbite.com/docs/getting-started/flask

Installs Tailwind CSS and the Tailwind CLI as dev dependencies using NPM. Requires Node.js and NPM to be installed.

```bash
npm install tailwindcss @tailwindcss/cli --save-dev
```

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

### Install Phoenix application generator

Source: https://flowbite.com/docs/getting-started/phoenix

Install the Phoenix application generator using `mix archive.install hex phx_new`. Press 'Yes' to all prompts.

```bash
mix archive.install hex phx_new
```

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

### Tooltip component example

Source: https://flowbite.com/docs/getting-started/rails

Example tooltip component to copy into home.html.erb.

```html
<button data-tooltip-target="tooltip-default" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default tooltip</button>
<div id="tooltip-default" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-xs opacity-0 tooltip dark:bg-gray-700">
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>
```

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

### Install Tailwind CLI

Source: https://flowbite.com/docs/getting-started/phoenix

Installs the official Tailwind CLI and generates a tailwind.config.js file. May require running mix deps.get if the command doesn't install Tailwind CSS right away.

```bash
mix tailwind.install
```

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

### Build Astro project for production

Source: https://flowbite.com/docs/getting-started/astro

Run this command to create a production build. Astro's small build size helps the website load faster when deployed.

```bash
npm run build
```

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

### Install Tailwind CSS and Vite plugin

Source: https://flowbite.com/docs/getting-started/laravel

Installs Tailwind CSS and the Vite plugin as dev dependencies. Skip this step if using Laravel 12 or later, as Tailwind v4 is installed by default.

```bash
npm install tailwindcss @tailwindcss/vite --save-dev
```

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

### Install Laravel Installer globally

Source: https://flowbite.com/docs/getting-started/laravel

Installs the Laravel Installer globally using Composer. Ensure the vendor bin directory is in your PATH (macOS: export PATH="$PATH:$HOME/.composer/vendor/bin", Windows: set PATH=%PATH%;%USERPROFILE%\AppData\Roaming\Composer\vendor\bin, Linux: export PATH="~/.config/composer/vendor/bin:$PATH").

```bash
composer global require laravel/installer
```

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

### Install Flowbite as dependency

Source: https://flowbite.com/docs/getting-started/astro

Run this command to install Flowbite as a dependency using NPM.

```bash
npm install flowbite --save
```

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

### Create a Nuxt project with nuxi init

Source: https://flowbite.com/docs/getting-started/nuxt-js

Creates a new Nuxt project named flowbite-app and navigates into its directory. Requires Node.js and NPM to be installed.

```bash
npx nuxi init flowbite-app
cd flowbite-app
```

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

### Install Flowbite Svelte packages

Source: https://flowbite.com/docs/getting-started/svelte

Installs Flowbite Svelte and its required dependencies using pnpm.

```bash
pnpm i flowbite flowbite-svelte tailwind-merge @popperjs/core
```
Tokens:
Raw