Flowbite MCP
Official Flowbite MCP server: access 60+ Tailwind CSS components, generate branded themes, and convert Figma to code.
Add to your client
Copy the config for your MCP client and paste it into its config file.
npx flowbite-mcpPaste into ~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"flowbite-mcp": {
"command": "npx",
"args": [
"-y",
"flowbite-mcp"
],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
}
}
}
}Step-by-step guides: Add to Claude Desktop · Add to Cursor · Add to Windsurf
Before you start
- Node.js with npx (to run `npx flowbite-mcp`)
- An MCP-compatible client (Claude Desktop, Cursor, Windsurf, etc.)
- Optional: a Figma personal access token (FIGMA_ACCESS_TOKEN) to enable the Figma-to-code tool
About Flowbite MCP
An official MCP server from Themesberg (the makers of Flowbite) that lets AI assistants leverage the Flowbite Tailwind CSS component library to build UI, generate custom branded themes, and convert Figma designs into code. It serves 60+ Flowbite UI components as MCP resources and ships two tools (theme generation and Figma-to-code), running over stdio for local editors or HTTP Streamable for production deployments with Docker and health checks.
Tools & capabilities (2)
Figma to codeConvert a Figma design into code by copying the Figma node URL and generating corresponding Flowbite component code. Requires a Figma personal access token.
Theme file generatorCreate custom branded theme files from any branded hex color, producing Flowbite/Tailwind theme variables for custom designs.
When to use it
- Generate Flowbite-based UI using 60+ Tailwind CSS components directly inside AI-driven development environments
- Create a custom branded theme from a single brand hex color
- Convert a Figma design (via node URL) into ready-to-use Flowbite component code
- Deploy as an HTTP Streamable server with Docker for multi-client production scenarios
Security notes
The Figma-to-code tool requires a Figma personal access token (FIGMA_ACCESS_TOKEN) supplied via your MCP client configuration. The token is optional and only needed to enable Figma-to-code generation; component access and theme generation work without it. Store the token securely and avoid committing it to source control.
Flowbite MCP FAQ
Do I need a Figma access token to use the server?
No. The Figma personal access token (FIGMA_ACCESS_TOKEN) is only required to enable the Figma-to-code generation tool. Accessing components and generating themes works without it.
Which transports are supported?
Two: Standard I/O (stdio), the default mode for local CLI and editor integrations, and HTTP Streamable for production and multi-client deployments (e.g. `npx flowbite-mcp --mode http --port 3000`).
Which MCP clients are supported?
The README provides ready-made configuration for Claude Desktop, Cursor, and Windsurf, plus a Cursor one-click install deeplink and Glama.ai listing.
Alternatives to Flowbite MCP
Compare all alternatives →
Control Blender from Claude and other LLMs for prompt-assisted 3D modeling, scene creation, and asset generation.
Popular community server that feeds Figma layout data to coding agents via a Figma API token.
Generate beautiful, modern UI components from natural-language descriptions inside your IDE.
Compare Flowbite MCP with: