What is Flowbite MCP?
Flowbite MCP is the official MCP server from the Flowbite team. It exposes the Flowbite library of Tailwind CSS components as resources, adds a theme file generator that starts from any brand hex color, and includes a Figma to code tool that needs a personal access token.
Flowbite MCP is the official server for Flowbite, the Tailwind CSS component library. It lets an AI assistant read the library's UI elements, forms, typography and plugins, and it adds a theme generator for custom branded designs.
The repository ships its docs as markdown under data/, with 60 plus component files, form and typography references, a theme variable reference and a quickstart. The agent reads those instead of guessing class names.
The two tools and the resources
- Figma to code: copy a Figma node URL and the tool generates code from it. It needs
FIGMA_ACCESS_TOKEN. - Theme file generator: give it any brand hex color and it creates a custom branded theme.
- Resources: the 60 plus Flowbite UI components, available without any token.
Run it over stdio or HTTP
Standard I/O is the default and suits Cursor, Windsurf and desktop clients. For shared setups, HTTP mode serves the endpoint at /mcp, and the README includes a Docker Compose file with a health check.
Who it is for
Best for
- Projects already on Flowbite and Tailwind CSS that want agents to use the real component markup. Related: tailwind-design-system.
- Teams turning a Figma frame into code, who can also compare Framelink or the Figma MCP page.
- Builders who want a registry style source. Related: shadcn-mcp.
Not for
- Flowbite Pro blocks. The roadmap lists that integration, with license authentication, as not done yet.
- Component search and filtering, real time previews and extra theme options. All three are unchecked roadmap items.
Use it with UiChemy
Flowbite gives you Tailwind markup in a code project. UiChemy covers the WordPress side: Figma to WordPress converts a design, and Composer edits the result inside Elementor or Gutenberg. Click Get Started on uichemy.com.
Connect Flowbite MCP Server: Tailwind Components and Figma to Code to your AI client
npx flowbite-mcpAdd the server
Paste the JSON into your client config:
claude_desktop_config.json, Cursor'smcp.jsonor Windsurf'smcp_config.json.Add a token only if needed
The Figma personal access token is the only environment variable, and it is needed only for Figma to code.
Optional HTTP mode
Run
npx flowbite-mcp --mode http --port 3000for a multi client setup, or start it withdocker-compose up -d.Debug with the inspector
Run
npm run inspectorfrom a source checkout to test the tools interactively.
Client configuration
{
"mcpServers": {
"flowbite": {
"command": "npx",
"args": ["-y", "flowbite-mcp"],
"env": {
"FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
}
}
}
}Endpoints and ports
http://localhost:3000/mcpHTTP modehttp://localhost:3000/healthUsed by the Docker setupMCP_PORTDefaults to 3000 in HTTP modeMCP_TRANSPORT_MODEstdio by default, or httpWhat you can do with it
- 60 plus UI componentsComponent documentation for the Flowbite library is served as resources, covering UI elements, forms, typography and plugins.
- Theme generation from one colorA single brand hex color is enough to produce a custom theme file.
- Figma to codeA copied node URL becomes generated code when a personal access token is configured.
- Dual transportRun over stdio for local clients or Streamable HTTP for shared server deployments.
- Docker supportThe repo includes Docker Compose, a health check route and CORS origin settings for hosted use.
- Plain data folderComponents, forms, typography, plugins, a theme reference and a quickstart are kept as markdown in
data/.
Tools it exposes
Figma to code
Takes a copied Figma node URL and generates code. Requires FIGMA_ACCESS_TOKEN.
Theme file generator
Creates a custom branded theme from any brand hex color.
Frequently asked questions
What is Flowbite MCP?
Flowbite MCP is the official MCP server for the Flowbite Tailwind CSS library. It gives an AI assistant access to 60 plus UI components as resources, a theme file generator driven by a brand hex color, and a Figma to code tool.
How do I install Flowbite MCP?
Run npx flowbite-mcp, or add a server entry with npx -y flowbite-mcp to your client configuration. Add FIGMA_ACCESS_TOKEN to the env block if you want Figma to code. Without a token, resources and the theme generator still work.
Do I need a Figma token?
Only for the Figma to code tool. The README says the personal access token is the single environment variable you currently need, and only if you enable that tool. Component resources and the theme generator work without one.
Which clients does it work with?
The README gives configuration for Claude Desktop, Cursor and Windsurf, and notes that other MCP clients work too. Standard I/O is the default, and an HTTP Streamable mode exists for server deployments with several clients.
Can I self host it for a team?
Yes. Start it with --mode http --port 3000 or docker-compose up -d and it serves at /mcp with a /health route. Hosting variables cover port, host binding and a comma separated list of CORS origins.
Does it include Flowbite Pro blocks?
Not yet. The roadmap lists Flowbite Pro blocks with license authentication as an open item. Today the server covers the open component library, the theme generator and the Figma to code tool, all under the MIT license.
How does it compare with other component servers?
Flowbite MCP is tied to one library and adds a theme generator. Its data covers the Flowbite component library, with 60 plus UI components served as resources, and a single brand hex color is enough to produce a custom theme file. Related: shadcn-mcp and Magic UI.