Forem: Zoltán Szőgyényi

48 design skills for Claude and other AI coding agents

Zoltán Szőgyényi — Tue, 24 Mar 2026 10:28:33 +0000

If you have used AI coding agents to build a website, you already know the problem. You prompt Claude Code or Cursor to build a landing page, and it looks fine. You prompt it again for a pricing section, and the spacing is off. By the third prompt, the fonts are different, the button styles have drifted, and you are spending more time fixing design inconsistencies than actually building.

Design skills solve this by giving your AI agent a single source of truth for how your interface should look and behave. Instead of describing your design preferences in every prompt, you install a skill file once and the agent follows it across every session.

What are design skills?

A design skill is a structured markdown file that encodes design system rules — typography scales, color tokens, spacing rhythms, component anatomy, interaction states, and accessibility requirements — in a format that AI coding agents can read and follow.

Think of it as a design brief that never gets lost between prompts. When your agent has a design skill loaded, every component it generates inherits the same visual language. Buttons look the same whether the agent creates them on Monday or Friday. Spacing stays consistent whether you are building a hero section or a settings page.

Each skill file covers:

Visual style and brand tone — the overall aesthetic direction
Typography scale and font choices — sizes, weights, and font families
Color palette with semantic tokens — primary, secondary, success, warning, danger
Spacing and density modes — consistent rhythm across all components
Component families — buttons, inputs, cards, tables, navigation, modals, and dozens more
Accessibility standards — WCAG 2.2 AA compliance baked in
Do and don't rules — explicit guardrails so the agent avoids common mistakes

How design skills work with typeui.sh

At typeui.sh, we handcraft each design skill and test it across multiple AI agents. You can browse our entire collection on the design skills page, and pulling one into your project takes a single command:

npx typeui.sh pull [name]

This drops a skill.md file into your project that works with Claude Code, Cursor, Codex CLI, Gemini CLI, and any agent that reads markdown instructions. You can also download or copy-paste the file directly from our website.

Once installed, you do not need to mention the design in your prompts anymore. The agent picks up the skill file automatically and applies the design system to everything it builds.

All 48 design skills

We currently offer 48 distinct design skills, each targeting a different visual style. Below is every skill in our registry with a preview, description, and direct link to its detail page.

Spacious

Spacious design emphasizes generous whitespace, airy layouts, and clear visual separation. If you want your interface to feel calm and breathable without sacrificing structure, this skill keeps everything readable and effortlessly organized. It works well for content-heavy applications where users need room to focus.

View the Spacious design skill →

Neumorphism

Neumorphism creates a soft, extruded look where elements appear to push through or indent into the background surface. This skill gives your UI a tactile, almost physical quality with low-contrast shadows and subtle depth. It is best suited for dashboards, control panels, and apps where a modern yet understated aesthetic matters.

View the Neumorphism design skill →

Professional

A clean, trustworthy design system optimized for business applications and productivity tools. This skill prioritizes legibility and information density without feeling cluttered. If you are building a SaaS dashboard, internal tool, or client-facing portal, Professional gives your agent the right foundation.

View the Professional design skill →

Modern

Modern follows the latest UI trends with soft shadows, rounded corners, and clean interfaces that feel current without chasing fads. This is a versatile all-rounder — if you are unsure which style to pick, Modern is a solid default that works across marketing sites, apps, and documentation.

View the Modern design skill →

Energetic

Energetic is bold and fast-paced, using vivid colors, dynamic shapes, and strong visual movement to create a lively, action-oriented experience. This skill works well for fitness apps, gaming platforms, event sites, and anything where the design should feel like it has momentum.

View the Energetic design skill →

Tetris

A modular, grid-based design system inspired by the classic puzzle game. Interlocking geometric components and vibrant, high-contrast colors make this skill stand out. It is a great choice for portfolio sites, creative agencies, and projects where a playful structural approach adds character.

View the Tetris design skill →

Fantasy

An immersive design system featuring mystical elements, ornate borders, and magical UI interactions. Fantasy works well for gaming interfaces, storytelling platforms, and creative projects that need to transport users into another world. The typography and color palette lean into richness and atmosphere.

View the Fantasy design skill →

Glassmorphism

A modern design system featuring liquid glass effects, frosted backgrounds, and layered translucency. Glassmorphism gives your interface depth and sophistication while keeping the content front and center. It pairs especially well with dark mode and gradient backgrounds.

View the Glassmorphism design skill →

Creative

An imaginative design system that breaks traditional grid boundaries with innovative interactions and dynamic layouts. Creative is for projects where the design itself is part of the message — agency sites, experimental portfolios, and product launches that need to feel different from everything else.

View the Creative design skill →

Expressive

Expressive is personality-driven, using distinctive visuals, rich contrast, and bold typography to communicate emotion and brand character. This skill is ideal for brands with a strong voice — media companies, lifestyle products, and platforms where the interface should feel alive and opinionated.

View the Expressive design skill →

Paper

Paper design is a clean, tactile style inspired by real paper. Soft shadows, subtle layering, and generous whitespace create depth while keeping the interface minimal, readable, and calm. This skill shines in note-taking apps, documentation platforms, and content-first products.

View the Paper design skill →

Corporate

Corporate design is structured and professional, emphasizing clarity, consistency, and trust through clean layouts, restrained color use, and formal typography. It is built for enterprise dashboards, B2B platforms, and applications where visual discipline matters more than visual flair.

View the Corporate design skill →

Dithered

Dithered uses patterned, pixel-like textures and controlled noise to add retro character, depth, and visual grit while keeping layouts clean and intentional. This skill is perfect for indie projects, creative studios, and developers who want their interfaces to have distinctive texture.

View the Dithered design skill →

Storytelling

Storytelling guides users through content with emotion and flow, using visual hierarchy, imagery, and pacing to create a narrative-driven experience. This skill works well for long-form landing pages, case study presentations, and marketing sites where the scroll itself tells a story.

View the Storytelling design skill →

Luxury

An opulent design system utilizing rich textures, metallic accents, and a refined, exclusive visual language. Luxury is built for high-end brands, premium products, and experiences where every pixel should communicate sophistication and taste.

View the Luxury design skill →

Elegant

A graceful and polished design system with generous whitespace, delicate typography, and smooth transitions. Elegant sits between Luxury and Minimal — it is refined without being flashy, making it versatile for fashion brands, portfolios, and upscale service businesses.

View the Elegant design skill →

Cosmic

Cosmic blends deep-space tones, luminous accents, and layered depth to create a futuristic interface that feels immersive and otherworldly. This skill works well for tech products, AI-focused tools, data visualization dashboards, and anything that benefits from a sense of scale and wonder.

View the Cosmic design skill →

Clean

Clean is minimal and distraction-free, using clear structure, ample whitespace, and crisp typography to keep interfaces simple, readable, and focused. If your product is content-first and you want the design to disappear so the content can lead, this skill delivers exactly that.

View the Clean design skill →

Colorful

Colorful uses vibrant, high-energy palettes and bold contrasts to create a lively, expressive interface that feels playful and attention-grabbing. This skill suits children's products, creative platforms, community apps, and marketing sites that want to stand out through sheer visual energy.

View the Colorful design skill →

Levels

Levels is indiehacker-lean and ship-fast. Bold, no-fluff UI with practical layouts, clear metrics, and builder-focused functionality inspired by Pieter Levels' make-it-work ethos. If you are building a SaaS product solo and want a design that values function over decoration, this skill is for you.

View the Levels design skill →

Vibrant

An energetic design system characterized by bold, bright colors, playful gradients, and lively animations. Vibrant brings visual warmth and excitement to interfaces — it works well for social platforms, marketplaces, and consumer apps where approachability and energy matter.

View the Vibrant design skill →

Premium

A high-end, sophisticated design system focused on exclusivity, refined typography, and subtle interactions. Premium shares DNA with Luxury but leans more toward tech and fintech — think banking apps, investment platforms, and subscription products that need to feel worth the price.

View the Premium design skill →

Neon

A dark-mode optimized design system featuring glowing borders, high-contrast fluorescent colors, and cyberpunk aesthetics. Neon is built for gaming interfaces, developer tools, nightlife apps, and anything where a dark background with electric accents creates the right atmosphere.

View the Neon design skill →

Bento

Bento is a clean, modular layout of card-like blocks with clear hierarchy, soft spacing, and subtle visual contrast. Designed to make content feel organized, scannable, and modern, this skill works beautifully for feature pages, dashboards, and product overviews with multiple data points.

View the Bento design skill →

Sleek

Sleek is streamlined and polished, with sharp typography, minimal clutter, and smooth visual rhythm that gives interfaces a fast, premium feel. This skill works well for developer tools, analytics dashboards, and tech products that want to look as performant as they are.

View the Sleek design skill →

Vintage

Vintage evokes nostalgia through classic typography, muted palettes, and timeworn textures, giving interfaces a timeless, character-rich feel. This skill works for artisan brands, restaurants, photography portfolios, and projects where warmth and history are part of the identity.

View the Vintage design skill →

Pacman

A playful, arcade-inspired design system featuring 8-bit aesthetics, vivid primary colors, and classic gaming motifs. Pacman is fun and unapologetically retro — perfect for game studios, hackathon projects, entertainment platforms, and anyone who wants their UI to put a smile on users' faces.

View the Pacman design skill →

Futuristic

A forward-looking design system featuring sleek interfaces, glowing accents, and sci-fi inspired UI elements. Futuristic is built for AI products, space-tech startups, data platforms, and applications where the interface should signal innovation and cutting-edge technology.

View the Futuristic design skill →

Retro

A nostalgic design system that brings back classic web aesthetics, pixelated details, and vintage color palettes. Retro is less polished than Vintage and more playful — it works for personal blogs, indie projects, and developers who miss the early web and want to celebrate it.

View the Retro design skill →

Dramatic

Dramatic uses bold contrast, striking typography, and high-impact visuals to create a powerful, attention-commanding interface. This skill is for product launches, media sites, and landing pages where the first impression needs to hit hard and hold attention.

View the Dramatic design skill →

Minimal

A stripped-down design system that removes all unnecessary noise, focusing purely on content and core functionality. Minimal goes further than Clean — it is the right choice when every element on the page needs to justify its existence. Ideal for personal sites, writing platforms, and single-purpose tools.

View the Minimal design skill →

Perspective

Perspective adds depth and direction through angled layouts, layered elements, and visual foreshortening, creating a dynamic interface with a strong sense of space. This skill is well-suited for architecture firms, 3D product showcases, and creative portfolios that want visual depth.

View the Perspective design skill →

Friendly

Friendly feels warm and approachable, using soft shapes, clear hierarchy, and inviting visuals to make interactions easy and welcoming. This skill is built for onboarding flows, community platforms, healthcare apps, and any product where users need to feel comfortable from the first click.

View the Friendly design skill →

Artistic

A creative and expressive design system blending unique illustrations, unconventional layouts, and organic shapes. Artistic is for projects where the interface is as much a canvas as a tool — galleries, design studios, creative agencies, and experimental web experiences.

View the Artistic design skill →

Editorial

A magazine-inspired design system prioritizing beautiful typography, structured layouts, and high-quality imagery. Editorial is built for publications, blogs, and media companies where the reading experience drives everything. Strong typographic hierarchy and measured whitespace make long-form content shine.

View the Editorial design skill →

Enterprise

A clean, high-contrast, professional design system for enterprise applications. Enterprise is battle-tested for complex interfaces with dense information — admin panels, CRM tools, project management platforms, and internal tools where usability at scale is the priority.

View the Enterprise design skill →

Bold

A high-impact design system featuring strong typography, stark contrasts, and unapologetic visual elements. Bold is for brands that want to make a statement — startup landing pages, campaign sites, and products that lead with confidence and refuse to blend in.

View the Bold design skill →

Neobrutalism

Neobrutalism is chunky shapes, hard edges, loud colors, and unapologetically simple layouts — raw, playful, and intentionally unpolished. This skill has become a favorite for indie hackers, developer tools, and creative projects that want a distinct anti-corporate aesthetic.

View the Neobrutalism design skill →

Shadcn

A highly customizable, accessible, and modern design system built on utility-first principles and clean components. If you are already familiar with shadcn/ui conventions and want your AI agent to generate components in that style, this skill keeps everything aligned.

View the Shadcn design skill →

Claymorphism

Claymorphism uses soft, rounded surfaces with subtle inner and outer shadows to create a playful, tactile interface that feels modern and touch-friendly. This skill is ideal for mobile-first apps, children's products, and any project that benefits from a friendly, 3D-like appearance.

View the Claymorphism design skill →

Gradient

Gradient uses smooth color transitions to create depth, energy, and visual focus, giving interfaces a modern, vibrant feel without heavy visual clutter. This skill works across marketing sites, AI products, and creative tools where color itself becomes a design element.

View the Gradient design skill →

Agentic

Agentic design feels proactive and intelligent, emphasizing guided actions, adaptive feedback, and clear next steps to help users accomplish goals faster. This skill is purpose-built for AI-native products, chatbot interfaces, automation dashboards, and tools where the interface anticipates what the user needs.

View the Agentic design skill →

Mono

A playful, matrix-inspired monospaced design system where every character occupies the same width and the entire interface leans into terminal aesthetics. Mono works for developer portfolios, CLI documentation, hacker-themed projects, and anyone who thinks monospace fonts are underused in web design.

View the Mono design skill →

Refined

Refined is elegant and understated, using precise spacing, subtle contrast, and polished details to create a premium, professional interface. This skill sits between Elegant and Professional — less decorative than the former, warmer than the latter. A strong choice for fintech, legal, and consulting products.

View the Refined design skill →

Simple

A minimalist design system focused on clarity, essential UI elements, and highly intuitive user experiences. Simple strips away everything that is not necessary and keeps what remains well-organized. It is a good starting point for MVPs, prototypes, and products where speed of development matters.

View the Simple design skill →

Contemporary

Contemporary blends clean structure with bold, current aesthetics — crisp typography, balanced spacing, and subtle visual accents for a fresh, modern feel. This skill is for teams that want something that feels of-the-moment without committing to a specific trend.

View the Contemporary design skill →

Publication

Publication is editorial and content-first, combining strong typography, structured grids, and measured spacing to deliver clear, readable, long-form information. This skill is built for news sites, research platforms, documentation hubs, and any product where the written word takes center stage.

View the Publication design skill →

Cafe

Cafe is warm and inviting, with earthy tones, cozy textures, and relaxed typography that create a handcrafted, welcoming atmosphere. This skill is perfect for restaurant sites, coffee shop apps, bakery brands, and local businesses that want their digital presence to feel as comfortable as their physical space.

View the Cafe design skill →

How to pick the right design skill

With 48 options, choosing the right one depends on what you are building:

SaaS and business tools — start with Enterprise, Professional, or Corporate
Marketing and landing pages — try Bold, Dramatic, or Modern
Creative and portfolio sites — look at Artistic, Creative, or Expressive
Content and publishing — consider Editorial, Publication, or Paper
Indie hacker projects — Levels, Neobrutalism, or Simple will get you moving fast
AI-native products — Agentic, Futuristic, or Sleek match the vibe
Playful and experimental — Pacman, Tetris, or Neon for something different

You can always switch skills between projects or even combine ideas from multiple skills by customizing the downloaded file.

What we do at typeui.sh

At typeui.sh, we build tools that help AI coding agents produce better design. Every skill in our registry is handcrafted, tested across multiple agents, and maintained as the AI ecosystem evolves.

Our design skills work with the tools you already use — Claude Code, Cursor, Codex CLI, Gemini CLI, and any agent that reads markdown files. You do not need to change your workflow. Just pull a skill and start building.

We believe that design quality should not depend on whether you remembered to describe your spacing scale in the prompt. It should be encoded once and followed everywhere. That is what design skills give you — a persistent design memory for your AI agent.

Browse all 48 skills on our design skills page, or pull one right now:

npx typeui.sh pull modern

Generate design skill files for your agentic tools with TypeUI

Zoltán Szőgyényi — Sat, 07 Mar 2026 21:33:04 +0000

We’ve all been there. You’re using Cursor, Claude Code, or Copilot, and you ask it to whip up a quick dashboard component. The logic is flawless, the state management is perfect, and then... you look at the UI.

Suddenly, your app has three new shades of blue that don't exist in your Tailwind config, the padding is completely arbitrary, and the AI has decided to invent its own design system on the fly.

AI models are absolute wizards at writing logic, but without strict constraints, they hallucinate design tokens like crazy.

That’s why I want to talk about typeui.sh — an awesome open-source CLI tool that acts as a dedicated design layer for your agentic tooling.

What exactly is typeui.sh?

Think of typeui.sh as a strict design manager for your AI assistants.

It’s a CLI tool that generates and manages skill.md files right inside your project. These files act as the ultimate source of truth for your design system and style guide.

By feeding these highly curated instructions to your AI, you force the LLM to actually respect your design tokens, component structures, and styling rules.

No more fighting over CSS classes. You just get polished, production-ready UI components that actually match your brand.

The 4 Commands You Need to Know

The CLI is super intuitive and stays out of your way. Here is the core workflow:

1. generate

npx typeui.sh generate

This is where the magic starts. Instead of writing a massive, 500-line system prompt explaining what a "primary button" looks like in your app, this command scaffolds the provider skill files directly in your current project. Your AI assistant reads this file and instantly understands your design constraints.

2. update

npx typeui.sh update

Design systems aren't static. When you tweak your spacing scales or add a new brand color, you just run update. It refreshes your existing provider skill files so your AI is always working with the latest guidelines, without nuking your custom configurations.

3. list

npx typeui.sh list

Don't want to build a design system from scratch? I don't blame you. Running list lets you browse a registry of pre-built design system specifications.

It’s perfect for hackathons or when you just want to bootstrap a new project with a gorgeous, proven design language.

4. pull

npx typeui.sh pull [name]

Once you spot a design system you like in the registry, just pull it. For example, pulling a "modern" spec will download that specific markdown file directly into your workspace. It comes pre-loaded with comprehensive design tokens, instantly teaching your AI how to design within that specific aesthetic.

Open source

The best part? The core CLI is open-source under the MIT license. You can use it for your local workflows entirely for free.

If you're a freelancer or an agency looking for access to our curated premium design systems and priority support, they also offer one-time payment licenses (which is a breath of fresh air in today's subscription-fatigued world).

Wrapping up

As we rely more on AI to write our code, controlling the output is becoming just as important as the generation itself. If you're tired of playing CSS whack-a-mole with your LLM, give this a try.

Check out the docs and try it out here: typeui.sh

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

[Boost]

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

Zoltán Szőgyényi for Themesberg

Dec 11 '25

Convert Figma layers to code in Tailwind CSS with Flowbite MCP

#ai #mcp #tailwindcss #opensource

Comments

4 min read

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.

How to install HUGO with Tailwind CSS and Flowbite

Zoltán Szőgyényi — Thu, 27 Mar 2025 16:08:10 +0000

In this guide I want to show you how you can create a new HUGO project and install Tailwind CSS (v4) together with Flowbite so that you can start building websites and blog pages much faster with this tech stack.

Introduction

HUGO is a popular and open-source static site generator framework that makes it easy to organize your files and assets where you can also leverage a taxonomy system, multilingual support, fast assets pipeline, and more. HUGO is used by millions of developers and by websites such as Bootstrap, Litecoin, Smashing Magazine, and even Flowbite.

Check out this guide to learn how to install and set up a HUGO project together with Tailwind CSS and the UI components from Flowbite to start building websites with a stack that enhances your front-end development workflow.

Requirements

Make sure that you have both HUGO and Node.js installed locally on your computer.

Create a HUGO project

Follow the next steps to learn how to create a new HUGO project after you've installed the dependencies.

Run the following CLI command to create a new HUGO application:

hugo new site flowbite-app
cd flowbite-app

The next step is to create a local custom theme:

hugo new theme flowbite-theme

This command will create a new scaffolded theme directory that we can extend with our HUGO app.

Next, add the theme to the config.toml file:

theme = ["flowbite-theme"]

Run a local server using the following command:

hugo server -D

Now you should see a basic HUGO website running at a generated localhost server.

Congratulations! You have now successfully installed and configured HUGO.

Install Tailwind CSS

Tailwind CSS is a popular utility-first CSS framework that allows better control over the styling of your website and makes it easier to work together with other team members within your organization.

Go to the flowbite-theme/ directory and run the following command:

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

Inside your main.css file from the flowbite-theme/ directory add the following:

@import "tailwindcss";

Compile the CSS code for Tailwind CSS by running this command inside of your theme directory:

npx @tailwindcss/cli -i ./assets/css/main.css  -o ./assets/css/output.css --watch

Update the css.html file from the flowbite-theme/ directory with the following:

{{- with resources.Get "css/output.css" }}
  {{- if eq hugo.Environment "development" }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{- else }}
    {{- with . | minify | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{- end }}
  {{- end }}
{{- end }}

In order to test out Tailwind CSS, add a utility class inside the single.html file:

{{ define "main" }}
  <h1 class="text-blue-500">{{ .Title }}</h1>

  {{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
  {{ $dateHuman := .Date | time.Format ":date_long" }}
  <time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>

  {{ .Content }}
  {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
{{ end }}

By browsing to one of the post pages, you should now see the text updated in blue.

Install Flowbite

Now that you have a working HUGO project configured with Tailwind CSS, you can now install Flowbite.

Please make sure that you install the dependency, just as with Tailwind CSS, inside your flowbite-theme directory.

Install Flowbite as a dependency using NPM by running the following command:

npm install flowbite --save

Import the default theme variables from Flowbite inside your main main.css CSS file:

@import "flowbite/src/themes/default";

Import the Flowbite plugin file in your CSS:

@plugin "flowbite/plugin";

Configure the source files of Flowbite in your CSS:

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

Add the Flowbite JavaScript inside your js.html file:

<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>

{{- with resources.Get "js/main.js" }}
  {{- if eq hugo.Environment "development" }}
    {{- with . | js.Build }}
      <script src="{{ .RelPermalink }}"></script>
    {{- end }}
  {{- else }}
    {{- $opts := dict "minify" true }}
    {{- with . | js.Build $opts | fingerprint }}
      <script src="{{ .RelPermalink }}" integrity="{{- .Data.Integrity }}" crossorigin="anonymous"></script>
    {{- end }}
  {{- end }}
{{- end }}

Let's now test out Flowbite by updating our menu.html file from the theme directory:

{{- /*
Renders a menu for the given menu ID.

@context {page} page The current page.
@context {string} menuID The menu ID.

@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
*/}}

{{- $page := .page }}
{{- $menuID := .menuID }}

{{- with index site.Menus $menuID }}
<nav class="bg-white border-gray-200 dark:bg-gray-900">
  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
    <a href="https://flowbite.com/" class="flex items-center space-x-3 rtl:space-x-reverse">
        <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="Flowbite Logo" />
        <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
    </a>
    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
        <span class="sr-only">Open main menu</span>
        <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
        </svg>
    </button>
    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
      <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
        {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
      </ul>
    </div>
  </div>
</nav>
{{- end }}

{{- define "partials/inline/menu/walk.html" }}
  {{- $page := .page }}
  {{- range .menuEntries }}
    {{- $attrs := dict "href" .URL }}
    {{- if $page.IsMenuCurrent .Menu . }}
      {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }}
    {{- else if $page.HasMenuCurrent .Menu .}}
      {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }}
    {{- end }}
    {{- $name := .Name }}
    {{- with .Identifier }}
      {{- with T . }}
        {{- $name = . }}
      {{- end }}
    {{- end }}
    <li>
      <a
      class="block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent"
        {{- range $k, $v := $attrs }}
          {{- with $v }}
            {{- printf " %s=%q" $k $v | safeHTMLAttr }}
          {{- end }}
        {{- end -}}
      >{{ $name }}</a>
      {{- with .Children }}
        <ul>
          {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
        </ul>
      {{- end }}
    </li>
  {{- end }}
{{- end }}

After you reload the server, the pages from the menu should now be rendered inside the navbar component.

UI components

Now that you have everything installed and set up you can start using the UI components from Flowbite to build up your website with HUGO much faster and easier with hero sections, navigation bars, admin CRUD layouts, and more.

HUGO starter theme

We have developed a free and open-source HUGO starter theme that you can use to build up your website as a starting point or use it directly as a personal blog website that already has HUGO, Tailwind CSS and Flowbite configured.

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

Tailwind v4 is here! Learn how to upgrade your current project and explore the new features with Flowbite

Zoltán Szőgyényi — Sun, 24 Nov 2024 15:06:00 +0000

A few days ago the developers from Tailwind officially announced the v4-beta which means that you can now officially start playing around with the new version of Tailwind which brings a couple of new features, better performance, and a small switch of the CSS-in-JS paradigm to native CSS layers and variables.

But don't worry, Tailwind is still Tailwind and all of the utility classes that we all love will still work and the way you work with them remains unchanged – configuration of colors, fonts and other theme related settings will now be recommended to be added as CSS variables which is a good change in my opinion.

Here's a list of the highlighted features and changes:

3x better performance compilation time
deprecating tailwind.config.js in favor of CSS configuration
better source detection (no more content paths in config)
a couple of new utility classes and renaming others

I suggest you take a look at the official Tailwind v4-beta guide and you'll learn about the new features and changes from the source directly. Going onwards in this article I'll show you how to upgrade your current Flowbite project which most likely uses the current stable version of Tailwind CSS which is v3.x.

Upgrading to Tailwind v4-beta

For the sake of simplicity we're going to use as an example one of our open-source projects that uses Flowbite and Tailwind and that is our admin dashboard from GitHub which I definitely recommend you using for your projects.

The first thing you need to do is open up the terminal and using the next tag of both the Tailwind CSS and Flowbite packages using NPM:

npm install tailwindcss@next @tailwindcss/postcss@next flowbite@next

Next thing is that you have to update your postcss.config.js file and remove the old plugins which are no longer needed such as the autoprefixer:

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  },
};

After that you should go to your main CSS file where previously you have imported the Tailwind directives and you should delete those and only import one unique Tailwind module:

@import "tailwindcss";

The easiest way to upgrade a Tailwind v3 project to v4 is to simply just import the configuration file called tailwind.config.js inside your main CSS file:

@import "tailwindcss";

/* add this to copy the configuration settings from your project */
@config "./../tailwind.config.js";

Lastly, compile the source files:

npx @tailwindcss/cli -i main.css -o styles.css

That's it! Hopefully you had a pixel-perfect upgrade for your project as we did.

The full upgrade guide for Flowbite from Tailwind v3 to v4 can also be checked on the Flowbite quickstart guide from our official documentation website.

Please remember that this is still in beta version so it's subject to changes and that is why we still recommend using the stable v3.x of Tailwind CSS until further notice – have fun using the new features!

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: