Forem: Themesberg

Build apps for ChatGPT, Claude, and Gemini using MCP UI components from Flowbite

Zoltán Szőgyényi — Fri, 06 Feb 2026 14:07:46 +0000

MCP UI is the standard SDK that you can use to deliver MCP apps which can be used as applications for ChatGPT, Gemini, Claude, and other MCP clients like Cursor or Windsurf. Model Context Protocol (MCP) is part of the Agentic AI Foundation donated by Anthropic in 2025 and it is one of the fastest growing open-source projects in the AI category with over 100 million monthly SDK downloads.

// Detect dark theme var iframe = document.getElementById('tweet-2019769870036980057-385'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=2019769870036980057&theme=dark" }

In this guide you will learn how to create an MCP app using Flowbite and Skybridge and start developing application for ChatGPT, Claude, Gemini and any other AI client that uses the MCP standard. After setting up the project you'll be able to integrate any UI component and theme from the Flowbite documentation inside your MCP application.

We decided to use the Skybridge framework to build MCP apps and we are using the UI components from Flowbite.

Create new MCP app

The first step is to create a new MCP application and start developing locally:

Download or clone the MCP UI Starter repository:

git clone https://github.com/themesberg/mcp-ui-starter.git

Install dependencies using NPM, PNPM, Yarn or Bun:

npm install

Run a local development server:

npm run dev --use-forwarded-host

This command will run a local server on http://localhost:3000 and will create the following:

the main MCP server on the /mcp endpoint
a collection of widgets built with Flowbite and React used as tools

Connect with NGROK

In order to expose the server to AI clients such as ChatGPT, Gemini or Claude we need to host the MCP server.

Install ngrok on your computer using Homebrew and run the following command:

ngrok http 3000

This will host the MCP server on a URL similar to this one:

# this is just an example
https://3785c5ddc4b6.ngrok-free.app/mcp

You will now be able to use this URL to create an application for ChatGPT, Claude, Gemini, and for any MCP clients.

Don't forget to add the /mcp endpoint to the URL generated by NGROK.

Install on AI providers

Use the following guides to connect your MCP app to major AI providers like ChatGPT, Claude, and Gemini.

ChatGPT apps

Make sure that you have a paid plan to create an application on ChatGPT.

Go to Settings > Connectors
Scroll down and click on "Advanced Settings"
Enable Developer mode
Go back to the Settings > Connectors page, and click on "Create in the Browser Connectors"
Add a custom connector with the MCP Server URL: [NGROK_FORWARDING_URL]/mcp
Click on "Create to add the MCP server as a Connector"
To use your connector in the chat, click "+"" then "More" and select it.

Claude Web

Make sure that you have a paid plan to create an application on Claude.

Go to Settings > Connectors
Find the "Connectors" section
Click on "Add custom connector" at the bottom of the section
Add your connector's remote MCP server URL: [NGROK_FORWARDING_URL]/mcp
Finish configuring your connector and click "Add"
To enable connectors, use the "Search and tools button" on the lower left of the chat interface.

Gemini CLI

Run the following command in your terminal:

gemini mcp add --transport http <server-name> "[NGROK_FORWARDING_URL]/mcp"

Use /mcp in the Gemini CLI terminal to view your recently added MCP server status and discovered tools.

Cursor

Add your MCP server to Cursor by opening the mcp.json file and configure it using mcpServers.

{
  "mcpServers": {
    "<server-name>": {
      "type": "http",
      "url": "[NGROK_FORWARDING_URL]/mcp"
    }
  }
}

VS Code

To add your MCP server to VS Code you need to open the .vscode/mcp.json file and configure servers.

{
  "servers": {
    "<server-name>": {
      "type": "http",
      "url": "[NGROK_FORWARDING_URL]/mcp"
    }
  }
}

Claude Code

MCP servers are stored at ~/.claude.json in Claude Code. Use the CLI to add your MCP app:

claude mcp add --transport http <server-name> "[NGROK_FORWARDING_URL]/mcp"

Mistral AI

Open the side panel and expand Intelligence > Connectors
Click "+ Add Connector" on the right side of the page
In the MCP Connectors directory, click the "Custom MCP Connector tab"
Enter a name for the connector and the following server URL: [NGROK_FORWARDING_URL]/mcp
Finish configuring your connector and click "Create"
To use the connector, click the "Tools" button below the chat input and enable it in the "Connectors" section.

Codex

MCP servers in Codex are located at ~/.codex/config.toml and you can install your MCP app using the CLI:

codex mcp add <server-name> --url "[NGROK_FORWARDING_URL]/mcp"

Create a widget

Creating a new widget means setting up the server side where we can set up the input data that comes from the AI client (which is the user prompt itself) and the web component which is the front-end widget where we show the output (such as a chart, data table, or just text).

Server component

If you want to create a new widget yourself, then first create a new file inside the server/src/widgets folder and add the following code that creates a basic server side tool which returns a string as output:

import { z } from "zod";

// Basic Answer widget configuration
export const basicTextWidget = {
  name: "basic-text" as const,
  metadata: {
    description: "Basic Text",
  },
  toolConfig: {
    description: "Show a text message based on a question.",
    inputSchema: {
      question: z.string().describe("The user's question."),
    },
  },
  handler: async () => {
    try {
      const answer = "Hello, world!";
      return {
        structuredContent: { answer },
        content: [],
        isError: false,
      };
    } catch (error) {
      return {
        content: [{ type: "text" as const, text: `Error: ${error}` }],
        isError: true,
      };
    }
  },
};

Web component

Then create the front-end part of the widget inside the web/src/widgets folder where you can use React code to create the markup of the widget and use the server data, which in this case is a basic text coming from our server component:

import "@/index.css";

import { mountWidget } from "skybridge/web";
import { useToolInfo } from "../helpers";

function BasicTextWidget() {
  const { input, output } = useToolInfo<"basic-text">();
  if (!output) {
    return (
      <div role="status">
          <svg aria-hidden="true" className="w-8 h-8 text-neutral-tertiary animate-spin fill-brand" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
              <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
          </svg>
          <span className="sr-only">Loading...</span>
      </div>
    );
  }

  return (
    <div className="p-4 space-y-2">
      <p className="text-body"><strong>Question:</strong> {input.question}</p>
      <p className="text-body"><strong>Answer:</strong> {output.answer}</p>
    </div>
  );
}

export default BasicTextWidget;

mountWidget(<BasicTextWidget />);

Finally, register the widget in the server.ts file:

import { McpServer } from "skybridge/server";
import { basicTextWidget } from "./widgets/basic-text-server.js";

const server = new McpServer(
  {
    name: "mcp-ui-components",
    version: "0.0.1",
  },
  { capabilities: {} }
)
  .registerWidget(
    basicTextWidget.name,
    basicTextWidget.metadata,
    basicTextWidget.toolConfig,
    basicTextWidget.handler
  )

Customize theming

Flowbite allows you to easily customize the appearance of the UI components from the MCP apps by using the theming options based on CSS variables from Tailwind.

Select one of the predefined themes from Flowbite or customize the variables yourself in the index.css file:

/* choose one of the following */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import "flowbite/src/themes/default";

/* MINIMAL THEME
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/minimal";
*/

/* ENTERPRISE THEME
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/enterprise";
*/

/* PLAYFUL THEME
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Code:ital,wght@0,300..800;1,300..800&display=swap');
@import "flowbite/src/themes/playful";
*/

/* MONO THEME
@import "flowbite/src/themes/mono";
*/

Resources

Convert Figma layers to code in Tailwind CSS with Flowbite MCP

Zoltán Szőgyényi — Thu, 11 Dec 2025 12:43:36 +0000

In this guide you will learn how to install the Flowbite MCP server and convert Figma design files in your MCP client such as Cursor, Windsurf or Claude and generate code in Tailwind CSS and based on the Flowbite Design System.

Short demo before getting into the guide:

Step 1: Select Figma layer

Step 2: Tell the AI to convert it to code using Flowbite MCP

Step 3: Add the code to your Tailwind CSS + Flowbite project

You can create this development flow yourself by creating a Flowbite project with Tailwind CSS installed and follow this MCP guide.

Introduction

MCP (Model-Context-Protocol) is a new way to structure a communication protocol between MCP servers (Flowbite MCP) and MCP clients (ie. Windsurf, Cursor). It enables adding additional context to your AI development workflow by integrating resources and tools specific to your project.

Flowbite MCP is an open-source server that adds the right amount of context to the LLM providers which improves the quality of UI generation in code - whether it's HTML, React, Svelte, or other frameworks.

Additionally, we also developed tools to convert Figma layers to code relevant to your codebase using Flowbite and Tailwind CSS and also other tools such as generating theme files based on branded colors.

Install Flowbite MCP

The easiest way to install the Flowbite MCP is using NPX:

npx flowbite-mcp

You can also run npx flowbite-mcp --help to show a list of helpful options.

Requirements

If you want to use the Figma to code converter tool, you need to get a personal access token from Figma and set it as an environment variable. Otherwise, Flowbite MCP is specifically built for a project that would use Tailwind CSS, Flowbite and optionally Figma for prototyping.

Configuring MCP client

An MCP client is a software tool such as Cursor, Windsurf or Claude Code that you use for AI development.

Most of these tools supports MCP servers out of the box and you need to update a JSON file that contains the configuration for the MCP servers.

Cursor

Install in Cursor

Cursor is one of the most popular IDEs for AI development for software engineers and web development.

To set up Flowbite MCP with Cursor, open the mcp.json and add the following configuration:

{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Windsurf

Windsurf is the second most popular IDE for AI development and the configuration is similar to Cursor.

Update the mcp_config.json file with the following configuration:

{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

Claude Code

To install Flowbite MCP in Claude Desktop you need to configure the claude_desktop_config.json file:

{
  "mcpServers": {
    "flowbite": {
      "command": "npx",
      "args": ["-y", "flowbite-mcp"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
      }
    }
  }
}

If you'd like to request a new integration or have any questions, please open an issue on our GitHub repository.

Flowbite MCP tools

Use the tools from Flowbite MCP to enhance your AI development workflow.

Convert Figma to code

With Flowbite MCP you can now convert Figma layers to code by prompting any AI provider.

Currently, we recommend either Gemini 3, GPT 5 or Sonnet 4.5 for the highest quality code conversions and based on the complexity of the designs, you need to follow up with "reparation prompts".

Here's a prompt example that you can use to convert Figma design to code:

use flowbite mcp to convert this figma <FIGMA_NODE_LINK> to code

Note: to get the node link from Figma, all you need to do is:

Select the Figma layer in your project
Right click and select Copy/paste as
Select Copy link to selection

We recommend using the offical Flowbite Design System as a solid foundation for your UI generation.

Generate theme file

Since we released theming support for Flowbite by providing a better way to customize UI using variables we also built a tool in Flowbite MCP to generate a theme file based on a brand color and a general description of the UI that you'd like to use in your project.

Here's a prompt example that you can use:

use flowbite mcp to generate a theme file using the "#0000FF" brand color
and create a professional, enterprise, clean looking UI (ie. Jira, Facebook)

Local development

If you'd like to extend Flowbite MCP or contribute to the project, you can run it locally as a server.

We recommend cloning the repository from GitHub, installing the dependencies, building and then running the server.

Using the native MCP inspector tool can also be a great way to debug and test the server.

# 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

Transport modes

Flowbite MCP supports both stdio and http transport modes if you want to run it locally as a server.

Use the --mode option to set either http or stdio transport mode.

# Run in HTTP server mode for production
npx flowbite-mcp --mode http --port 3000

Additionally, you can also set the --port option to choose a different port for the HTTP server.

Docker configuration

Flowbite MCP also has a Docker configuration file that you can use to run it as a container.

# Build and run with Docker Compose (recommended)
docker-compose up -d

# Check health
curl http://localhost:3000/health

# View logs
docker-compose logs -f

# Stop
docker-compose down

Contributing

Flowbite MCP is open-source under the MIT license and contributions are more than welcome to the project.

Free and open-source collection of SVG illustrations for Flowbite

Zoltán Szőgyényi — Mon, 17 Feb 2025 12:24:28 +0000

Today I would like to show you a project that we have been working on for over a year and that we are finally launching to the world. It's a collection of over 50 SVG illustrations designed in 3D style available in dark and light mode.

🔗 Check them out here: https://flowbite.com/illustrations/

All of these illustrations are open-source under the MIT license and they are free to use in your projects. This comes roughly one year after we have launched our Flowbite Icons collection, to which we keep adding new icons every month.

These illustrations are available in SVG, but they can also be downloaded in PNG format using our coded interface where you can also filter and search for any illustrations.

Let me show you some of the features of these new illustrations.

Available in dark mode

All of the illustrations have a dark mode variant which slightly changes the colors to accompany darker interfaces. Flowbite inherently has light and dark mode UI components so it made a lot of sense to accommodate illustrations too.

To copy the dark mode variant of the illustration, all you need to do is switch the light/dark mode of the Flowbite website and the source code or PNG will automatically switch.

Customize colors

You can easily set your own color by using the color switcher from the settings bar or adding your own colors by using the Figma source files if you want more control.

Figma file

We have also created a Figma file for the illustrations so that you can use these as a designer or have more control over the source files that we ourselves have worked on.

These are also open-source and you can use them in your projects, but if you're building templates please mention in the credits that Flowbite has been used as a source link.

Updates

We'll add about 4-5 illustrations every month so if you want to request your own, then please reach out to us via the GitHub repository and create an issue.

Support us

If you are using our open-source collection and you're wondering how you can be supporting us, we have a pro version of Flowbite that you can get to access many UI components, templates, blocks, and an advanced Figma design system to build and designe websites faster and more efficiently.

References

Open-source WYSIWYG text editor component built with Tailwind CSS and Flowbite

Zoltán Szőgyényi — Sun, 29 Sep 2024 10:16:37 +0000

The WYSIWYG text editor from Flowbite is open-source under the MIT license based on the Tip Tap library and allows you to easily edit complex text data with typography styles, links, images, videos, and more.

The markup and styles provided by Flowbite are all built with the utility classes from Tailwind CSS and the styles for the content inside the WYSIWYG text editor are based on the Flowbite Typography plugin.

All examples provided on this page have support for dark mode, RTL (right-to-left) styles, responsiveness on mobile devices and you can easily add your own functionality using JavaScript and the Flowbite API.

Getting started

Before continuing make sure that you have Tailwind CSS, Flowbite, and Tip Tap installed in your project.

Follow the quickstart guide from Flowbite to enable the interactive elements

Install the Flowbite Typography plugin to format the content of text inside the WYSYIWYG editor preview:

npm i flowbite-typography

Require the plugin inside the tailwind.config.js file:

  theme: {
    // ...
  },
  plugins: [
    require('flowbite-typography'),
    // ...
  ],
}

Set the wysiwyg field from the Flowbite plugin to true to enable pseudo styles:

plugins: [
  require('flowbite/plugin')({
      wysiwyg: true,
  }),
  // ... other plugins
]

Finally, install Tip Tap either via NPM or skip this step if you're using CDN:

npm install @tiptap/core @tiptap/pm @tiptap/starter-kit

Now you're ready to use the examples below by copying the HTML markup and the JavaScript code.

Default text editor

Use this example of a WYSIWYG text editor to enable basic typography styling and formatting, adding lists, links, images, videos, code blocks, aligning text, blockquotes, setting headers and paragraphs and more.

Get source code and example

Text formatting

Use this example of a WYSIWYG text editor to enable typography styling, formatting and marking such as underline, bold, italic, strikethrough, code, highlight and also selecting text size, color, font family and more using the utility classes from Tailwind CSS.

Get source code and example

Text alignment

Enable text alignment to the left, center, right, and justify for the content inside of the WYSIWYG component.

Get source code and example

Typography elements

Use this example to create typography elements like bullet lists, ordered lists, blockquotes, horizontal rules, paragraphs, headings, code blocks based on Tailwind CSS utility classees and the Flowbite API.

Get source code and examples

Configuring links

Use this example to add and remove anchor links for the content inside of the WYSIWYG text editor.

Get source code and examples

Using images

Use this example to learn how to add images inside of the WYSIWYG text editor and configure settings such as the image URL, image alt attribute which is important for SEO and accessibility and the image title.

Get source code and examples

Adding videos

Use this example to embed videos inside the WYSIWYG text editor based on a YouTube URL source and set the width and height of the video by using the Flowbite modal component API.

Get source code and examples

Editing tables

Use this example to edit table data inside the WYSIWYG text editor by adding and removing table column, rows, and cells and use other features to navigate through the table data for a convenient editing process.

Get source code and examples

Undo and redo

Use the history functionality from the WYSIWYG text editor component to integrate undo and redo actions.

Get source code and examples

Exporting data

Use the editor.getJSON() and the editor.getHTML() functions to export the text content inside of the WYSIWYG text editor in JSON or raw HTML format to persist into your database or API structure.

Get source code and examples

Javascript behaviour

Learn more about how you can programmatically use the WYSIWYG editor using Javascript by creating a new instance of the object, setting options, method, event listeners, and more to integrate with your code base.

After you have installed Tip Tap via NPM or CDN you can create a new Editor object:

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';

new Editor({
  element: document.getElementById('wysiwyg'),
  extensions: [StarterKit],
  content: '<p>Welcome to Flowbite!</p>',
})

Make sure that you also have an empty div element with the appropiate ID:

<div id="wysiwyg"></div>

This code will automatically set up the markup needed inside of the WYSIWYG component. Please note the fact that the Tip Tap library is headless so you need to style the elements yourself, but you can copy-paste the examples from Flowbite on this page.

Content styling

We also recommend adding custom typography classes from the Flowbite Typography package so that the content inside of the text editor will be correctly styled:

new Editor({
  element: document.getElementById('wysiwyg'),
  extensions: [StarterKit],
  content: '<p>Welcome to Flowbite!</p>',
  editorProps: {
        attributes: {
            class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
        },
    }
})

Extensions

Tip Tap is a modular library meaning that if you want to introduce images, videos, links and other elements inside the WYSIWYG component you need to specifically import that resources from the library and set it as an extension when initialising the Editor object.

Here is one example where we add the link extension:

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import Link from '@tiptap/extension-link';

const editor = new Editor({
    element: document.querySelector('#wysiwyg-links-example'),
    extensions: [
        StarterKit,
        Link.configure({
            openOnClick: false,
            autolink: true,
            defaultProtocol: 'https',
        })
    ],
    content: '<p>Flowbite is an <strong>open-source library of UI components</strong> based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.</p><p>It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.</p><p>Learn more about all components from the <a href="https://flowbite.com/docs/getting-started/introduction/">Flowbite Docs</a>.</p>',
    editorProps: {
        attributes: {
            class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
        },
    }
});

Methods

You can easily call the methods from the Editor object to set text styles, links, images, and more. Here is one example where based upon a click event on a button you will be prompted with the URL of the link and it will add it to the currently selected text:

// set up custom event listeners for the buttons
document.getElementById('toggleLinkButton').addEventListener('click', () => {
    const url = window.prompt('Enter image URL:', 'https://flowbite.com');
    editor.chain().focus().toggleLink({ href: url }).run();
});

And here's another example where you can unset a link:

// unset the links based on a button click
document.getElementById('removeLinkButton').addEventListener('click', () => {
    editor.chain().focus().unsetLink().run()
});

Examples from this page have functional elements so you can check the JavaScript tab for the source code.

License

Resources from this page are licensed under the MIT License, including the Flowbite examples and Tip Tap.

Credits

These examples could not have been done without the usage of the following open-source resources:

Storefront hero sections for e-commerce built with Tailwind CSS and Flowbite

Zoltán Szőgyényi — Mon, 26 Aug 2024 13:38:57 +0000

Hey devs 👋

Today I would like to show you a couple of new components that we have built using Tailwind CSS and the Flowbite Library for e-commerce websites and these are the hero sections (aka. storefront) as the first and primary parts of the website.

You can use these to show promotions, search inputs, CTA buttons, campaigns, the primary categories of your store and a whole lot more.

All of the components are built with Tailwind CSS, support dark mode, have RTL direction enabled and the first example is also open-source under the MIT license.

Let's check them out!

Default storefront section

Use this section to show a hero section as the storefront page of your e-commerce website featuring a heading, description, CTA button, an illustration and a list of logos of the products that your store is selling.

Get the source code and example

Storefront hero section with categories

This section can be used as the first section of your e-commerce websites by showing the most popular product categories using cards alongside a heading with two CTA buttons and brand logos below.

Get the source code and example

Storefront categories grid view

Use this example to show a complex grid view of the primary and secondary highlighted categories from your e-commerce website.

Get the source code and example

Storefront hero with background image

This section can be used as the hero section of an e-commerce website with a full background image where you show a heading, paragraph, CTA button and a list of the primary categories.

Get the source code and example

Storefront with CTA and categories list

Use this section to show a list of categories in a sidebar and a hero section with a heading, description and CTA button to increase sales and conversion rates.

Get the source code and example

Storefront hero with carousel and search

Use this example to show an advanced storefront hero section with a carousel component featuring limited deals and a search bar for your e-commerce website.

Get the source code and example

Credits

These components could not have been built without the usage of the following awesome open-source resources:

Open-source datatable components built with Tailwind CSS and Flowbite

Zoltán Szőgyényi — Tue, 06 Aug 2024 15:40:25 +0000

Hey devs!

The day has finally come and after many weeks of designing and coding I'm happy to show you a new component that we've just launched here at the Flowbite community: the datatables.

It is an essential, but at the same time very complex component that has the regular table HTML markup as the foundation, but supercharges it with important UX features like searching, filtering, sorting, pagination, and more.

What is important to note here is that the table is built for best usage with Tailwind CSS and Flowbite and has stuff like dark mode, RTL, responsive design, and a general care for modern design integrated.

It is easy to get started and unlike other datatable integrations, wrappers, and plugins, this one does not require you to install jQuery - all you need is good old JavaScript, which the browser thankfully already has by default.

Now without further ado, let's check these out.

Getting started

Before continuing make sure that you have Tailwind CSS, Flowbite, and Simple Datables in your project.

Install Tailwind CSS and follow our quickstart guide to install Flowbite and the official plugin
Set the field datatables to the value true inside the tailwind.config.js file:

plugins: [
  require('flowbite/plugin')({
      datatables: true,
  }),
  // ... other plugins
]

Install the simple-datatables library using NPM:

npm install simple-datatables --save

Alternatively, you can also include it in your project using CDN:

<script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.0.3"></script>

Now that you have installed all libraries you can start copy-pasting the datatable components from Flowbite.

Make sure that in addition to the HTML markup you also copy the JavaScript code to initialize the component.

Default datatable

Use this example to show table data with default sorting and pagination functionalities.

Get the HTML and JS code from here

Table search

Set the searchable option to true to enable the search functionality for all table data.

Get the HTML and JS code from here

Filtering data

To enable filtering data based on a search query for each column you need to copy the custom code from the JavaScript tab and the HTML structure of the table. Enabling search for each individual data column is an advanced way of letting users browse complex data.

Get the HTML and JS code from here

Sorting data

By setting the value sortable to true you'll enable all data rows from the datatable to be sortable by clicking on the table column heading. You can also disable it by setting the same option to false.

Get the HTML and JS code from here

Table pagination

Pagination is enabled by default for all datatables from Flowbite, however, you can disable it by setting the option paging to false. Use the perPage option to specify how many data rows to show by default.

You can also set the perPageSelect option to set the selection options of the table.

Get the HTML and JS code from here

Selecting rows

Use this example to enable the selection of rows by clicking anywhere one of the table row elements by copying setting the multiselect option to true and copying the JavaScript configuration from Flowbite.

Use the datatable.selectrow event to write your own code and get the data from the selected table row.

Get the HTML and JS code from here

Export files

If you want to enable the export of the table data, you can use the simpleDatatables.exportCSV function to export the data as a CSV file. The option is also available for TXT, JSON, and SQL formats.

Get the HTML and JS code from here

JavaScript behaviour

Learn more about how you can customize the DataTables plugin such as changing the default options, customizing the table appearance, dynamically loading data, and more by checking the examples below.

After installing the DataTables plugin either via NPM or CDN you can initialize by calling the DataTable constructor and passing the table selector as the first argument.

// if you installed via CDN
const dataTable = new simpleDatatables.DataTable("#default-table");

// if you installed via NPM
import { DataTable } from "simple-datatables";
const dataTable = DataTable("#default-table");

You can pass an object of options as the second argument to customize the table appearance and behavior.

const dataTable = new simpleDatatables.DataTable("#default-table", options);

After initializing the DataTable, you can access the instance methods and properties.

Options

Check out some of the more commonly used options that you can pass to the DataTable instance.

Injecting data

Use the data option to pass data from an array of arrays to the table using JavaScript.

const customData = {
    "headings": [
        "Name",
        "Company",
        "Date",
    ],
    "data": [
        [
            "Flowbite",
            "Bergside",
            "05/23/2023",
        ],
        [
            "Next.js",
            "Vercel",
            "03/12/2024",
    ],
};

const dataTable = new DataTable("#default-table", { data: customData });

This is a useful feature where instead of a hard coded array you can pass data from an API or a JSON file.

Appearance

Use the following options to customize the appearance of the table such as adding a caption, custom classes, footer, header, updating the HTML rendering template, and enabling vertical scrolling, and more.

const dataTable = new DataTable("#default-table", {
    caption: "Flowbite is an open-source library",
    classes: {
        // add custom HTML classes, full list: https://fiduswriter.github.io/simple-datatables/documentation/classes
        // we recommend keeping the default ones in addition to whatever you want to add because Flowbite hooks to the default classes for styles
    },
    footer: true, // enable or disable the footer
    header: true, // enable or disable the header
    labels: {
        // add custom text for the labels, full list: https://fiduswriter.github.io/simple-datatables/documentation/labels
    },
    template: (options, dom) => {
        // add custom HTML template for the table, full list: https://fiduswriter.github.io/simple-datatables/documentation/template
    },
    scrollY: "300px", // enable vertical scrolling
});

These options are useful if you want to add your own HTML elements inside the dynamically generated table header or footer as we used in the export a file example above.

Pagination

Use these options to enable pagination, set the number of rows per page, and customize the appearance.

const dataTable = new DataTable("#default-table", {
    paging: true, // enable or disable pagination
    perPage: 10, // set the number of rows per page
    perPageSelect: [5, 10, 20, 50], // set the number of rows per page options
    firstLast: true, // enable or disable the first and last buttons
    nextPrev: true, // enable or disable the next and previous buttons
});

Pagination is a useful feature when you have a large dataset and you want to split it into multiple pages.

Searching

These options can be used to enable searching, set the search placeholder, and customize the appearance.

const dataTable = new DataTable("#default-table", {
    searchable: true, // enable or disable searching
    sensitivity: "base" // set the search sensitivity (base, accent, case, variant)
    searchQuerySeparator: " ", // set the search query separator
});

The searching feature is great when you have a large dataset and you want to search for a specific row.

Sorting

Use these options to enable sorting, set the default sort column, and customize the sort appearance.

const dataTable = new DataTable("#default-table", {
    sortable: true, // enable or disable sorting
    locale: "en-US", // set the locale for sorting
    numeric: true, // enable or disable numeric sorting
    caseFirst: "false", // set the case first for sorting (upper, lower)
    ignorePunctuation: true // enable or disable punctuation sorting
});

The sorting feature is useful when you want to sort the table rows based on a specific column.

Methods

Check out some of the common methods that you can use to interact with the DataTable instance.

// programatically search the table where the "term" variable is the query string
dataTable.search(term, columns);

// add a new table row data to the table (considering you have four columns)
dataTable.insert({
    "Heading 1": "Cell 1",
    "Heading 2": "Cell 2",
    "Heading 3": "Cell 3",
    "Heading 4": "Cell 4",
});

// updates the DOM of the table
dataTable.update();

Credits

These components could not have been built without the usage of the following awesome and open-source resources:

Product card components built with Tailwind CSS and Flowbite

Zoltán Szőgyényi — Mon, 24 Jun 2024 11:20:33 +0000

One of the most important sections and components of an e-commerce website is listing the products on the homepage or category page of a certain type of product. Within these cards you show images, names of the product, the price, reviews, buttons to add to the cart and more.

Web development has grown a lot in the past years and e-commerce is an area that is crucial to know and understand as a developer since more and more people resort to purchasing online compared to traditional methods in shopping malls and stores.

These components are all built only with the classes from Tailwind CSS and they leverage the design system and JS interactivity from the Flowbite framework and UI library.

Without further ado, let's check these components!

Default list of product cards

Use this example to show a list of product cards that feature a title, image, promotion badge, add to favorites and cart buttons, price, and list of reviews.

This example is free and open-source.

Source code and example

Product cards with carousel

Use this example to show two product cards inside of a carousel component that features product images, description, reviews, pricing, color and quantity selection and add to cart buttons.

Source code and example

Product cards with sidebar filters

This example can be used to show a sidebar with filters next to the product cards that feature size and color selection, images, prices, add to cart buttons, and more.

Source code and example

Product cards with grid view

Use this example to show product cards within a grid layout and use filter options inside of a drawer component where you can search based on price, rating, color, size, and more.

Source code and example

Advanced product cards with filters

Use this example to show an advanced settings bar with filter and sorting options and then a list of product cards with images inside a carousel, product title, pricing, CTA buttons, and more.

Source code and example

Credits

These components could not have been built without the usage of the following awesome open-source frameworks, UI libraries, and resources:

Mega footer component examples coded with Tailwind CSS and Flowbite

Zoltán Szőgyényi — Thu, 20 Jun 2024 11:17:50 +0000

Hey developers!

Today I want to show you a couple of components and website sections that we've designed and developed over at Flowbite for e-commerce websites that are called mega footers... because they're huge!

These kind of footers are usually added for large websites with sitemaps, many categories, businesses that have mobile applications too and more. There are actually not a lot of these footer components available on the internet from UI frameworks.

These examples are all coded exclusively with Tailwind CSS classes and we leveraged the JavaScript and styles from Flowbite to power interactive components like dropdowns.

The first example is open-source and free under the MIT license and it includes almost everything that you need for such a large footer.

Default mega footer

Use this example to show a footer with the a list of sitemap links, a CTA link to create an account, subscribe to the newsletter, buttons to download the mobile application and the trademark notice.

Source code and example

Mega footer with language dropdown

This example can be used to show a footer with sitemap links, a language dropdown menu, company logo, featured links and the trademark notice.

Source code and example

Mega footer with featured links

Use this example of a footer section to show featured information, mobile app download buttons, certification links, sitemap links, a newsletter sign-up form, and more.

Source code and example

Mega footer with company logos

This example can be used to showcase partnership company logos for social proof inside the footer together with sitemap links and trademark content.

Source code and example

Advanced mega footer

Use this advanced example of a footer section to show a newsletter sign-up form, social media accounts, sitemap links, company logos, language selector and the trademark notice.

Source code and example

Conclusion and credits

We've done a lot of research and work to build these components and we could not have done them without the following awesome open-source frameworks and libraries:

Navbar components built for e-commerce with Tailwind CSS and Flowbite

Zoltán Szőgyényi — Tue, 18 Jun 2024 09:37:34 +0000

Hey devs!

Today I want to show you a couple of navbar components that we've designed and coded for the Flowbite ecosystem which are specifically thought out for e-commerce websites - which means that there's a focus on stuff like shopping carts, user dropdowns, categories and links, and more.

E-commerce is an important and growing industry in the web area and even though there are more and more resources in this area like CMS's and frameworks, on the UI part resources are still lacking.

All of the examples are built exclusively with Tailwind CSS which means that other than having Tailwind and Flowbite (for the JS) installed in your project you don't need anything else.

Let's check these examples!

Default e-commerce navbar

Use this example to show a navigation bar for e-commerce websites including a list of menu items, a shopping cart dropdown, a my account dropdown and a hamburger menu.

Source code and example

Centered e-commerce navbar

Use this example to show a double layered navigation bar with the logo centered and with a secondary menu, shopping cart dropdown and user account menu.

Source code and example

Navbar with modal search

Use this example to show an advanced search modal for e-commerce products inside of a navbar with a mega menu, shopping cart and user dropdown.

Source code and example

Navbar with search bar and submenu

Use this example to show a navbar for e-commerce websites with a search bar, dropdown menus, delivery location selectors, language selectors and a submenu list.

Source code and example

Navbar with advanced user dropdown

Use this example to show three levels inside of a navbar component including a promotional banner, shopping cart and user dropdowns, a search bar and a mega menu with categories.

Source code and example

Advanced navigation bar with mega menu

Use this example to show a four layered navigation that includes an announcement banner, dropdown menus for language, shopping cart, user settings, a search bar and a mega menu.

Source code and example

Conclusion and credits

These UI components and examples could not have been built without the usage of the following awesome and open-source libraries and frameworks:

Tailwind CSS Refund Form Component Examples

Zoltán Szőgyényi — Wed, 12 Jun 2024 09:49:09 +0000

Hey developers!

In this article I want to show you a collection of refund form components coded with Tailwind CSS based on the Flowbite UI library that you can use in your e-commerce projects to receive refund requests and collect as much information as you can.

E-commerce is an important part of the internet and it has been an area in web development that has been expanding quite a lot with frameworks, CMS systems and the need for UI components has been growing.

All of these components are coded only with Tailwind CSS components and we used the Flowbite UI Library as the baseline for these examples and the icons from the Flowbite Icons collection.

Let's get started!

Product refund selection form

Use this component to select one or multiple products that you've ordered for a refund request and follow the next steps from the stepper form.

View source code and example

Refund reason selection

This example can be used to collect data for the reasoning of the refund which is a necessary step in the request of the returning of a product.

View source code and example

Refund shipment method

This example can be used to provide shipping methods for the returning of the product based on the refund requested by the client.

View source code and example

Refund payment options

Use this example to show multiple payment options using checkbox elements for the user to choose from the refund request form.

View source code and example

Refund request success

This example can be used to show the final step of the refund request process by showing a success message and a CTA button that links to the status page.

View source code and example

Credits and conclusion

These components could not have been created without the usage of the following open-source frameworks, libraries, and collections:

Payment form components coded with Tailwind CSS and Flowbite

Zoltán Szőgyényi — Wed, 22 May 2024 10:19:32 +0000

E-commerce is a growing part of the modern web and we as developers and designers need to find solutions and the best UI resources to build these kind of pages and components.

The payment form is a complex and crucial part of the checkout process where you need to ensure a smooth experience for the user and also offer as many payment options as possible.

We've coded a collection of components using Tailwind CSS and the UI library from Flowbite that allows you to directly copy-paste these sections and components into your project and choose which section matches best with your project.

The examples include input fields for credit cards, crypto payments, direct wire transfers, and a lot more leveraging Tailwind CSS and Flowbite.

Let's check them out!

Default payment form

Use this component to make a purchase using a credit card by show input fields like the card number, full name, card expiration using a datepicker and the security code.

Source code and examples

Payment form with stepper

Use this example to show the last step from the checkout process by indicating a stepper timeline and also show a list of alternative payment methods using buttons.

Source code and examples

Payment form with options

Use this example of a payment form to select a previously used credit card and show a sidebar with an order summary and commercial information.

Source code and examples

Payment form with tabs

Use this component to show multiple payment methods with tabs including credit card, monthly fees, crypto and PayPal transfers.

Source code and examples

Payment form with wire transfer

Use this example to send a wire transfer by completing payment data such as the IBAN address, payment amount, bank address and more using input fields.

Source code and examples

Payment form with copy to clipboard inputs

Use this example to copy the value of predefined input fields where you can get the beneficiary name, address, currency, amount, and account number.

Source code and examples

Payment form with drawer

Use this component to show all the payment methods and actions for an e-commerce website inside of a drawer component that can be shown or hidden based on the click of a button.

Source code and examples

Payment form with modal

This example can be used to select a payment method or add the credit card details using input fields inside of a modal component.

Source code and examples

Credits

Big thanks to all of the following open-source frameworks and libraries that were used to build these components:

E-commerce checkout components built with Tailwind CSS and Flowbite

Zoltán Szőgyényi — Tue, 07 May 2024 15:55:40 +0000

The e-commerce web industry has been growing in the past several years and it is one of the important types of products that we as web developers and designers have to work one. These websites require special attention when it comes to conversion rates and user experience.

In this article I'll show you a couple of checkout UI components built with the utility-first framework called Tailwind CSS and we also leverage the components and JS from Flowbite.

You can copy-paste these components and they will work out of the box as long as you have both Tailwind CSS and Flwobite installed in your project.

Default checkout page

Use this component to show a form element with inputs to add delivery and payment information and a table with an overview of the final price.

Source code and preview

Checkout page with accordion

Use this example to show delivery information, payment methods and the list of products inside of an accordion component.

Source code and preview

Checkout page with products

Use this example to show a list of products on the checkout page and a toggle selector for individual and company details.

Source code and preview

Order checkout with drawer

This example can be used to add all checkout related details such as the order summary, shipping details and payment information inside a drawer component.

Source code and preview

Order checkout with modal

Use this example to show the checkout details inside of a modal component such as the price breakdown, delivery details and payment information.

Source code and preview

Credits

These components could not have been built without the usage of the following awesome and open-source UI libraries and frameworks: