### Install Flowbite MCP
Source: https://flowbite.com/docs/getting-started/mcp
Install the Flowbite MCP server using NPX. This is the simplest way to get started.
```bash
npx flowbite-mcp
```
--------------------------------
### Install Symfony
Source: https://flowbite.com/docs/getting-started/symfony
Use the Symfony CLI to create a new project. This is the recommended way to start a new Symfony application.
```bash
symfony new my_project_name --webapp
```
--------------------------------
### Local Development Setup for Flowbite MCP
Source: https://flowbite.com/docs/getting-started/mcp
Follow these steps to clone the repository, install dependencies, build the project, and run the server locally. This setup is recommended for extending or contributing to Flowbite MCP.
```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
```
--------------------------------
### Setup Phoenix Project Dependencies
Source: https://flowbite.com/docs/getting-started/phoenix
Run this command after generating the project to install all necessary dependencies and set up the project environment.
```bash
mix setup
```
--------------------------------
### Create New Meteor.js Project (Manual Setup)
Source: https://flowbite.com/docs/getting-started/meteor-js
Start a new Meteor.js project using the Meteor CLI. Use the --typescript flag for TypeScript projects.
```bash
meteor create meteor-project
cd meteor-project
```
```bash
meteor create meteor-project --typescript
cd meteor-project
```
--------------------------------
### Create New Remix Project (Manual Setup)
Source: https://flowbite.com/docs/getting-started/remix
Use the official CLI to create a new, clean Remix project if you prefer manual configuration.
```bash
npx create-remix@latest
```
--------------------------------
### Jumbotron with Tutorial Callout
Source: https://flowbite.com/docs/components/jumbotron
A Jumbotron component featuring a 'Tutorial' label, a main heading, descriptive text, and a 'Getting started' button. This is useful for introducing a guide or tutorial.
```html
Tutorial
How to quickly deploy a static website
Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence web designers.
Design
Start with Flowbite Design System
Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers.
Static websites are now used to bootstrap lots of websites and are becoming the basis for a variety of tools that even influence both web designers and developers.
```
--------------------------------
### Start Local Development Server
Source: https://flowbite.com/docs/getting-started/qwik
Run this command to start the development server and access your Qwik project locally. The default URL is http://localhost:5173/.
```bash
npm run start
```
--------------------------------
### Create New Next.js Project (Manual Setup)
Source: https://flowbite.com/docs/getting-started/next-js
Use Vercel's CLI to create a new Next.js project. Tailwind CSS will be included if prompted.
```bash
npx create-next-app@latest
```
--------------------------------
### Start PostgreSQL Service
Source: https://flowbite.com/docs/getting-started/phoenix
Start the PostgreSQL service on macOS after installation.
```bash
brew services start postgresql
```
--------------------------------
### Basic Area Chart Example
Source: https://flowbite.com/docs/plugins/charts
This example demonstrates how to create a basic area chart by setting the 'type' option to 'area' in JavaScript. Ensure ApexCharts is installed and configured.
```javascript
const options = {
chart: {
type: "area"
},
series: [{
name: "My First series",
data: [50, 30, 20, 40, 80, 100]
}],
xaxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
}
}
const chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
```
--------------------------------
### Create a New Qwik Project
Source: https://flowbite.com/docs/getting-started/qwik
Use this command to initialize a new Qwik project. The CLI will guide you through the configuration steps.
```bash
npm create qwik@latest
```
--------------------------------
### Initialize Nuxt Project
Source: https://flowbite.com/docs/getting-started/nuxt-js
Create a new Nuxt project and navigate into its directory.
```bash
npx nuxi init flowbite-app
cd flowbite-app
```
--------------------------------
### Basic TypeScript code example
Source: https://flowbite.com/docs/getting-started/typescript
Create an index.ts file within the src/ directory and add this code to verify the TypeScript compiler setup. This example includes a type declaration for a string variable.
```typescript
const text: string = 'Hello TypeScript';
console.log(text);
```
--------------------------------
### Start Local Development Server
Source: https://flowbite.com/docs/getting-started/rails
Run this command to start a local server and build the source files for development.
```bash
./bin/dev
```
--------------------------------
### Time Picker Input for Tuesday
Source: https://flowbite.com/docs/forms/timepicker
This snippet demonstrates the HTML for selecting start and end times for Tuesday. It includes a checkbox for Tuesday and input fields for start and end times, similar to the Monday example.
```html
```
--------------------------------
### Initialize Drawer with Options
Source: https://flowbite.com/docs/components/drawer
Learn how to set up the target element, define options for placement, backdrop, and callbacks, and configure instance options for initializing the Drawer component.
```javascript
// set the drawer menu element
const $targetEl = document.getElementById('drawer-js-example');
// options with default values
const options = {
placement: 'right',
backdrop: true,
bodyScrolling: false,
edge: false,
edgeOffset: '',
backdropClasses:
'bg-dark/50 fixed inset-0 z-30',
onHide: () => {
console.log('drawer is hidden');
},
onShow: () => {
console.log('drawer is shown');
},
onToggle: () => {
console.log('drawer has been toggled');
},
};
// instance options object
const instanceOptions = {
id: 'drawer-js-example',
override: true
};
```
--------------------------------
### Install SvelteKit
Source: https://flowbite.com/docs/getting-started/svelte
Run these commands to create a new SvelteKit application.
```bash
npm create svelte@latest my-app
cd my-app
pnpm i
```
--------------------------------
### Create a new SolidJS project
Source: https://flowbite.com/docs/getting-started/solid-js
Use this command to scaffold a new SolidJS project with Vite. After creation, install dependencies and start the development server.
```bash
npx degit solidjs/templates/js flowbite-app
cd flowbite-app
```
```bash
npm install
```
```bash
npm run dev
```
```bash
npm run build
```
--------------------------------
### Flowbite React Button Component
Source: https://flowbite.com/docs/plugins/wysiwyg
Example of a basic button component using Flowbite React and Tailwind CSS. Ensure 'flowbite-react' is installed and imported.
```javascript
import { Button } from 'flowbite-react';
```
--------------------------------
### Use Flowbite React Button Component
Source: https://flowbite.com/docs/getting-started/gatsby
Example of importing and using the `Button` component from Flowbite React in a Gatsby page. Ensure Flowbite React is installed and configured.
```javascript
// src/pages/index.tsx (or .jsx)
import { Button } from 'flowbite-react';
export default function IndexPage() {
return ;
}
```
--------------------------------
### Initialize Tooltip with Options
Source: https://flowbite.com/docs/components/tooltips
Learn how to set up a tooltip by defining target and trigger elements, configuring options like placement and trigger type, and setting callback functions. This snippet shows the initial setup for a tooltip instance.
```javascript
// set the tooltip content element
const $targetEl = document.getElementById('tooltipContent');
// set the element that trigger the tooltip using hover or click
const $triggerEl = document.getElementById('tooltipButton');
// options with default values
const options = {
placement: 'bottom',
triggerType: 'hover',
onHide: () => {
console.log('tooltip is shown');
},
onShow: () => {
console.log('tooltip is hidden');
},
onToggle: () => {
console.log('tooltip is toggled');
},
};
// instance options with default values
const instanceOptions = {
id: 'tooltipContent',
override: true
};
```
--------------------------------
### Flask Application Setup
Source: https://flowbite.com/docs/getting-started/flask
Set up a basic Flask application with a route for the index page. This Python script initializes the Flask app and defines the main route.
```python
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
@app.route("/index")
def index():
return render_template("index.html")
if __name__ == '__main__':
app.run(debug=True)
```
--------------------------------
### Responsive Navigation Bar
Source: https://flowbite.com/docs/getting-started/phoenix
This HTML snippet implements a responsive navigation bar with a hamburger menu for mobile devices. It includes navigation links and buttons for login and getting started.
```html
```
--------------------------------
### Generate a New Design Skill
Source: https://flowbite.com/docs/getting-started/typeui
Initiate the setup to generate your own design skill files. This command will guide you through setting project design system specifications and choosing an AI provider.
```bash
npx typeui.sh generate
```
--------------------------------
### Timepicker Range Selector
Source: https://flowbite.com/docs/forms/timepicker
This example allows users to select a time interval by providing separate start and end time inputs. It's useful for defining durations or event schedules.
```html
```