flowbite-mcp 1.1.2 → 1.1.5

package/README.md

@@ -38,55 +38,12 @@ An [MCP server](https://flowbite.com/docs/getting-started/mcp/) that enables AI
 The simplest way to use Flowbite MCP Server:
 
 ```bash
-# Run directly with npx (no installation needed)
 npx flowbite-mcp
-
-# Show help and options
-npx flowbite-mcp --help
-
-# Run in HTTP server mode for production
-npx flowbite-mcp --mode http --port 3000
 ```
 
-## Local Transport Modes
-
-### Standard I/O (stdio)
-
-The default mode for local development and CLI integrations:
-
-```bash
-# Start in stdio mode (default)
-node build/index.js
-
-# Configure in MCP client (ie. Cursor, Windsurf, Claude)
-{
-  "mcpServers": {
-    "flowbite": {
-      "command": "node",
-      "args": ["/path/to/flowbite-mcp/build/index.js"],
-      "env": {
-        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
-      }
-    }
-  }
-}
-```
-
-Learn how to get the [Figma personal access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) to enable the Figma to code generation tool.
-
-### HTTP server
-
-HTTP-based transport for production and multi-client scenarios:
-
-```bash
-node build/index.js --mode http --port 3000
-```
-
-This will make the MCP server available at 'http://localhost:3000/mcp'.
-
 ### Environment variables
 
-Currently you only need the Figma personal access token if you want to enable the [Figma to code generation tool](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens). You set this variable in your MCP client configuration file.
+Currently you only need the [Figma personal access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) if you want to enable the Figma to code generation tool. 
 
 ```bash
 // other options
@@ -95,27 +52,11 @@ Currently you only need the Figma personal access token if you want to enable th
 }
 ```
 
-### Hosting variables
-
-Configure the server behavior with these environment variables:
-
-```bash
-# Transport mode: stdio (default) or http
-MCP_TRANSPORT_MODE=http
-
-# Server port for HTTP mode
-MCP_PORT=3000
-
-# Host binding for HTTP mode
-MCP_HOST=0.0.0.0
-
-# CORS origins (comma-separated)
-MCP_CORS_ORIGINS=http://localhost:3000,https://myapp.com
-```
+You set this variable in your MCP client configuration file.
 
 ## Integration examples
 
-Use the following configuration examples to install the Flowbite MCP server in popular clients such as Cursor, Claude, Windsurf, and more.
+Use the following configuration examples to install the Flowbite MCP server in popular clients such as Cursor, Claude, Windsurf, and others.
 
 ### Claude desktop
 
@@ -179,6 +120,41 @@ Update the `mcp_config.json` file and add the following configuration:
   <img width="380" height="200" src="https://glama.ai/mcp/servers/@zoltanszogyenyi/flowbite-mcp/badge" />
 </a>
 
+## Local Transport Modes
+
+### Standard I/O (stdio)
+
+The default mode for local development and CLI integrations:
+
+```bash
+# Start in stdio mode (default)
+node build/index.js
+
+{
+  "mcpServers": {
+    "flowbite": {
+      "command": "node",
+      "args": ["/path/to/flowbite-mcp/build/index.js"],
+      "env": {
+        "FIGMA_ACCESS_TOKEN": "YOUR_PERSONAL_FIGMA_ACCESS_TOKEN"
+      }
+    }
+  }
+}
+```
+
+Learn how to get the [Figma personal access token](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) to enable the Figma to code generation tool.
+
+### HTTP server
+
+HTTP-based transport for production and multi-client scenarios:
+
+```bash
+node build/index.js --mode http --port 3000
+```
+
+This will make the MCP server available at 'http://localhost:3000/mcp'.
+
 ### Local development
 
 ```bash
@@ -217,23 +193,22 @@ docker-compose up -d
 curl http://localhost:3000/health
 ```
 
-## Development Scripts
+### Hosting variables
 
-```bash
-# Build TypeScript to JavaScript
-npm run build
+Configure the server behavior with these environment variables:
 
-# Watch mode for development
-npm run watch
+```bash
+# Transport mode: stdio (default) or http
+MCP_TRANSPORT_MODE=http
 
-# Development with auto-reload
-npm run dev
+# Server port for HTTP mode
+MCP_PORT=3000
 
-# Run MCP Inspector for debugging
-npm run inspector
+# Host binding for HTTP mode
+MCP_HOST=0.0.0.0
 
-# Start production server
-npm start
+# CORS origins (comma-separated)
+MCP_CORS_ORIGINS=http://localhost:3000,https://myapp.com
 ```
 
 ## Docker Configuration

package/build/index.js

@@ -15,17 +15,17 @@ const args = process.argv.slice(2);
 if (args.includes('--version') || args.includes('-v')) {
     try {
         const packageJson = JSON.parse(readFileSync(join(__dirname, '../package.json'), 'utf-8'));
-        console.log(`Flowbite MCP Server v${packageJson.version}`);
+        console.error(`Flowbite MCP Server v${packageJson.version}`);
         process.exit(0);
     }
     catch (error) {
-        console.log('Flowbite MCP Server (version unknown)');
+        console.error('Flowbite MCP Server (version unknown)');
         process.exit(0);
     }
 }
 // Handle --help flag
 if (args.includes('--help') || args.includes('-h')) {
-    console.log(`
+    console.error(`
 Flowbite MCP Server - AI-powered Flowbite component and theme generation
 
 Usage:
@@ -57,7 +57,7 @@ const modeIndex = args.indexOf('--mode');
 const portIndex = args.indexOf('--port');
 const TRANSPORT_MODE = modeIndex !== -1 ? args[modeIndex + 1] : process.env.MCP_TRANSPORT_MODE || 'stdio';
 const PORT = portIndex !== -1 ? parseInt(args[portIndex + 1]) : parseInt(process.env.MCP_PORT || '3000');
-console.log(`Initializing Flowbite MCP Server in ${TRANSPORT_MODE} mode${TRANSPORT_MODE === 'http' ? ` on port ${PORT}` : ''}`);
+console.error(`Initializing Flowbite MCP Server in ${TRANSPORT_MODE} mode${TRANSPORT_MODE === 'http' ? ` on port ${PORT}` : ''}`);
 const COMPONENT_FILES = [
     {
         name: 'flowbite_accordion',
@@ -879,35 +879,19 @@ Look at the rendered image below and the node structure data to understand:
 - Component patterns that match Flowbite components
 
 ### Step 2: Use Flowbite MCP Resources
-Before writing code, fetch the relevant Flowbite component documentation using the MCP resources. Based on the design, you may need:
-
-**Common Components to Check:**
-- \`flowbite://components/buttons\` - For button styles
-- \`flowbite://components/card\` - For card layouts
-- \`flowbite://components/navbar\` - For navigation bars
-- \`flowbite://components/modal\` - For modal dialogs
-- \`flowbite://components/forms\` - For form layouts
-- \`flowbite://forms/input-field\` - For input fields
-- \`flowbite://components/avatar\` - For user avatars
-- \`flowbite://components/badge\` - For badges/tags
-- \`flowbite://components/tables\` - For data tables
-- \`flowbite://components/tabs\` - For tab navigation
-- \`flowbite://components/dropdowns\` - For dropdown menus
-- \`flowbite://components/sidebar\` - For sidebar navigation
-- \`flowbite://components/footer\` - For footer sections
-- \`flowbite://typography/headings\` - For heading styles
-- \`flowbite://typography/text\` - For text styles
+Before writing code, fetch the relevant Flowbite component documentation using the MCP resources. 
 
 ### Step 3: Write the Code
 Generate clean, semantic HTML with Tailwind CSS classes following these guidelines:
 
 1. **Use Flowbite Components**: Match the Figma design to Flowbite components whenever possible
-2. **Tailwind CSS Classes**: Use Tailwind utility classes for styling
-3. **Responsive Design**: Include responsive breakpoints (sm:, md:, lg:, xl:)
-4. **Semantic HTML**: Use proper HTML5 semantic elements
-5. **Accessibility**: Include ARIA attributes and proper alt texts
-6. **Match Colors**: Use Flowbite variables and secondly Tailwind color classes that best match the Figma design colors
-7. **Match Spacing**: Use Tailwind spacing utilities (p-*, m-*, gap-*) to match the design
+2. **Flowbite variables** - Use Flowbite variable utility classes when possible (e.g. text-brand, rounded-base, etc.)
+3. **Tailwind CSS Classes**: Use Tailwind utility classes for styling
+4. **Responsive Design**: Include responsive breakpoints (sm:, md:, lg:, xl:)
+5. **Semantic HTML**: Use proper HTML5 semantic elements
+6. **Accessibility**: Include ARIA attributes and proper alt texts
+7. **Match Colors**: Use Flowbite variables and secondly Tailwind color classes that best match the Figma design colors
+8. **Match Spacing**: Use Tailwind spacing utilities (p-*, m-*, gap-*) to match the design
 
 ### Step 4: Output Format - IMPORTANT
 
@@ -1281,7 +1265,7 @@ Example usage:
 // Start server based on transport mode
 if (TRANSPORT_MODE === 'stdio') {
     // Standard I/O mode for local development and CLI integrations
-    console.log('Starting Flowbite MCP Server in stdio mode...');
+    console.error('Starting Flowbite MCP Server in stdio mode...');
     const server = new McpServer({
         name: "flowbite-mcp",
         version: "1.0.0",
@@ -1297,19 +1281,19 @@ if (TRANSPORT_MODE === 'stdio') {
         console.error('Failed to connect stdio transport:', error);
         process.exit(1);
     });
-    console.log('Flowbite MCP Server running in stdio mode');
-    console.log('Ready to accept requests via standard I/O');
+    console.error('Flowbite MCP Server running in stdio mode');
+    console.error('Ready to accept requests via standard I/O');
 }
 else if (TRANSPORT_MODE === 'http') {
     // HTTP Streamable mode for server/production deployments
-    console.log(`Starting Flowbite MCP Server in HTTP mode on port ${PORT}...`);
+    console.error(`Starting Flowbite MCP Server in HTTP mode on port ${PORT}...`);
     ExpressHttpStreamableMcpServer({
         name: "flowbite-mcp",
     }, setupServer);
-    console.log(`Flowbite MCP Server running in HTTP mode`);
-    console.log(`Server listening on http://localhost:${PORT}`);
-    console.log(`Health check: http://localhost:${PORT}/health`);
-    console.log(`MCP endpoint: http://localhost:${PORT}/mcp`);
+    console.error(`Flowbite MCP Server running in HTTP mode`);
+    console.error(`Server listening on http://localhost:${PORT}`);
+    console.error(`Health check: http://localhost:${PORT}/health`);
+    console.error(`MCP endpoint: http://localhost:${PORT}/mcp`);
 }
 else {
     console.error(`Invalid transport mode: ${TRANSPORT_MODE}`);

package/data/components/accordion.md

@@ -1,17 +1,3 @@
----
-layout: docs
-title: Tailwind CSS Accordion - Flowbite
-description: Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options
-group: components
-toc: true
-requires_js: true
-
-previous: RTL (Right-To-Left)
-previousLink: customize/rtl/
-next: Alerts
-nextLink: components/alerts/
----
-
 The accordion component is a collection of vertically collapsing header and body elements that can be used to show and hide information based on the Tailwind CSS utility classes and JavaScript from Flowbite.
 
 A popular use case would be the "Frequently Asked Questions" section of a website or page when you can show questions and answers for each child element.
@@ -27,7 +13,7 @@ Don't forget to set the `data-accordion-target="{selector}"` data attribute to t
 
 Use the `data-accordion="collapse"` to collapse every other child element when expanding a single one.
 
-{{< example github="components/accordion.md" show_dark=true >}}
+```html
 <div id="accordion-collapse" data-accordion="collapse" class="rounded-base border border-default overflow-hidden shadow-xs">
   <h2 id="accordion-collapse-heading-1">
     <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body rounded-t-base border border-t-0 border-x-0 border-b-default hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-collapse-body-1" aria-expanded="true" aria-controls="accordion-collapse-body-1">
@@ -50,7 +36,7 @@ Use the `data-accordion="collapse"` to collapse every other child element when e
   <div id="accordion-collapse-body-2" class="hidden border border-s-0 border-e-0 border-t-0 border-b-default" aria-labelledby="accordion-collapse-heading-2">
     <div class="p-4 md:p-5">
       <p class="mb-2 text-body">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-body">Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+      <p class="text-body">Check out the <a href="https://flowbite.com/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
     </div>
   </div>
   <h2 id="accordion-collapse-heading-3">
@@ -65,19 +51,19 @@ Use the `data-accordion="collapse"` to collapse every other child element when e
       <p class="mb-2 text-body">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
       <p class="mb-2 text-body">Learn more about these technologies:</p>
       <ul class="ps-5 text-body list-disc">
-        <li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
+        <li><a href="https://flowbite.com/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
         <li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
       </ul>
     </div>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## Separated cards
 
 Use this example of an accordion with space delimitation between the accordion items.
 
-{{< example github="components/accordion.md" show_dark=true >}}
+```html
 <div id="accordion-card" data-accordion="collapse">
   <h2 id="accordion-card-heading-1">
     <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body rounded-base shadow-xs border border-default hover:text-heading hover:bg-neutral-secondary-medium gap-3 [&[aria-expanded='true']]:rounded-b-none [&[aria-expanded='true']]:shadow-none" data-accordion-target="#accordion-card-body-1" aria-expanded="true" aria-controls="accordion-card-body-1">
@@ -100,7 +86,7 @@ Use this example of an accordion with space delimitation between the accordion i
   <div id="accordion-card-body-2" class="hidden border border-t-0 border-default rounded-b-base shadow-xs" aria-labelledby="accordion-card-heading-2">
     <div class="p-4 md:p-5">
       <p class="mb-2 text-body">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-body">Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+      <p class="text-body">Check out the <a href="https://flowbite.com/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
     </div>
   </div>
   <h2 id="accordion-card-heading-3" class="mt-4">
@@ -115,19 +101,19 @@ Use this example of an accordion with space delimitation between the accordion i
       <p class="mb-2 text-body">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
       <p class="mb-2 text-body">Learn more about these technologies:</p>
       <ul class="ps-5 text-body list-disc">
-        <li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
+        <li><a href="https://flowbite.com/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
         <li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
       </ul>
     </div>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## Always open
 
 Use the `data-accordion="open"` option to keep previously opened accordion elements unchanged.
 
-{{< example github="components/accordion.md" show_dark=true >}}
+```html
 <div id="accordion-open" data-accordion="open" class="rounded-base border border-default overflow-hidden shadow-xs">
   <h2 id="accordion-open-heading-1">
     <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body rounded-t-base border border-t-0 border-x-0 border-b-default hover:text-heading hover:bg-neutral-secondary-medium gap-3" data-accordion-target="#accordion-open-body-1" aria-expanded="true" aria-controls="accordion-open-body-1">
@@ -150,7 +136,7 @@ Use the `data-accordion="open"` option to keep previously opened accordion eleme
   <div id="accordion-open-body-2" class="hidden border border-s-0 border-e-0 border-t-0 border-b-default" aria-labelledby="accordion-open-heading-2">
     <div class="p-4 md:p-5">
       <p class="mb-2 text-body">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-body">Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+      <p class="text-body">Check out the <a href="https://flowbite.com/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
     </div>
   </div>
   <h2 id="accordion-open-heading-3">
@@ -165,13 +151,13 @@ Use the `data-accordion="open"` option to keep previously opened accordion eleme
       <p class="mb-2 text-body">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
       <p class="mb-2 text-body">Learn more about these technologies:</p>
       <ul class="ps-5 text-body list-disc">
-        <li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
+        <li><a href="https://flowbite.com/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
         <li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
       </ul>
     </div>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## Color options
 
@@ -179,7 +165,7 @@ Use the `data-active-classes` and `data-inactive-classes` to set the active and
 
 Here's an example where we apply the blue colors instead of gray:
 
-{{< example github="components/accordion.md" show_dark=true >}}
+```html
 <div id="accordion-color" data-accordion="collapse" class="rounded-base border border-default overflow-hidden shadow-xs">
   <h2 id="accordion-color-heading-1">
     <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body rounded-t-base border border-t-0 border-x-0 border-b-default hover:text-fg-brand hover:bg-brand-softer gap-3" data-accordion-target="#accordion-color-body-1" aria-expanded="true" aria-controls="accordion-color-body-1">
@@ -202,7 +188,7 @@ Here's an example where we apply the blue colors instead of gray:
   <div id="accordion-color-body-2" class="hidden border border-s-0 border-e-0 border-t-0 border-b-default" aria-labelledby="accordion-color-heading-2">
     <div class="p-4 md:p-5">
       <p class="mb-2 text-body">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-body">Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+      <p class="text-body">Check out the <a href="https://flowbite.com/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
     </div>
   </div>
   <h2 id="accordion-color-heading-3">
@@ -217,19 +203,19 @@ Here's an example where we apply the blue colors instead of gray:
       <p class="mb-2 text-body">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
       <p class="mb-2 text-body">Learn more about these technologies:</p>
       <ul class="ps-5 text-body list-disc">
-        <li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
+        <li><a href="https://flowbite.com/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
         <li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
       </ul>
     </div>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## Flush accordion
 
 Use this example to remove the background color and rounded borders from the accordion component.
 
-{{< example github="components/accordion.md" show_dark=true >}}
+```html
 <div id="accordion-flush" data-accordion="collapse" data-active-classes="bg-neutral-primary text-heading" data-inactive-classes="text-body">
   <h2 id="accordion-flush-heading-1">
     <button type="button" class="flex items-center justify-between w-full py-5 font-medium rtl:text-right text-body border-b border-default gap-3" data-accordion-target="#accordion-flush-body-1" aria-expanded="true" aria-controls="accordion-flush-body-1">
@@ -252,7 +238,7 @@ Use this example to remove the background color and rounded borders from the acc
   <div id="accordion-flush-body-2" class="hidden" aria-labelledby="accordion-flush-heading-2">
     <div class="py-5 border-b border-default text-body">
       <p class="mb-2">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p>Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+      <p>Check out the <a href="https://flowbite.com/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
     </div>
   </div>
   <h2 id="accordion-flush-heading-3">
@@ -267,19 +253,19 @@ Use this example to remove the background color and rounded borders from the acc
       <p class="mb-2">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
       <p class="mb-2">Learn more about these technologies:</p>
       <ul class="ps-5 list-disc">
-        <li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
+        <li><a href="https://flowbite.com/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
         <li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
       </ul>
     </div>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## Arrow style
 
 Use the `data-accordion-icon` data attribute to optionally set an element to rotate 180 degrees when the accordion element is expanded. If the data attribute is not set, then it will not rotate.
 
-{{< example github="components/accordion.md" show_dark=true >}}
+```html
 <div id="accordion-arrow" data-accordion="collapse" data-active-classes="bg-neutral-primary text-heading" data-inactive-classes="text-body">
   <h2 id="accordion-arrow-heading-1">
     <button type="button" class="flex items-center justify-between w-full py-5 font-medium rtl:text-right text-body border-b border-default gap-3" data-accordion-target="#accordion-arrow-body-1" aria-expanded="true" aria-controls="accordion-arrow-body-1">
@@ -303,7 +289,7 @@ Use the `data-accordion-icon` data attribute to optionally set an element to rot
   <div id="accordion-arrow-body-2" class="hidden" aria-labelledby="accordion-arrow-heading-2">
     <div class="py-5 border-b border-default text-body">
       <p class="mb-2">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p>Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+      <p>Check out the <a href="https://flowbite.com/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
     </div>
   </div>
   <h2 id="accordion-arrow-heading-3">
@@ -318,13 +304,13 @@ Use the `data-accordion-icon` data attribute to optionally set an element to rot
       <p class="mb-2">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
       <p class="mb-2">Learn more about these technologies:</p>
       <ul class="ps-5 list-disc">
-        <li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
+        <li><a href="https://flowbite.com/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
         <li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
       </ul>
     </div>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## Nesting accordions
 
@@ -332,7 +318,7 @@ Accordions can be nested. All of the mentioned options are supported.
 
 To enable nested accordions you need to wrap the nested accordion in an element with the `data-accordion` attribute and don't accidentally initialize an accordion with nested accordions' items (e.g. by using `$accordionBodyEl.querySelectorAll`), when using <a href="#javascript-behaviour">custom JavaScript</a>.
 
-{{< example github="components/accordion.md" show_dark=true >}}
+```html
 
 <div id="accordion-collapse-2" data-accordion="collapse" class="rounded-base border border-default overflow-hidden shadow-xs">
   <h2 id="accordion-collapse-heading-6">
@@ -408,7 +394,7 @@ To enable nested accordions you need to wrap the nested accordion in an element
     </div>
   </div>
 </div>
-{{< /example >}}
+```
 
 ## JavaScript behaviour
 
@@ -653,7 +639,7 @@ To get started you need to create an array of accordion item objects including a
 
 Additionally, you can also set some options to change the default behaviour of the accordion, customize the styles, and set callback functions.
 
-{{< code lang="javascript" file="accordion.js" icon="file" >}}
+```javascript
 const accordionElement = document.getElementById('accordion-example');
 
 // create an array of objects with the id, trigger element (eg. button), and the content element
@@ -702,11 +688,11 @@ const instanceOptions = {
     id: 'accordion-example',
     override: true
 };
-{{< /code >}}
+```
 
 Create a new Accordion object using the options set above as the parameters.
 
-{{< code lang="javascript" file="accordion.js" icon="file" >}}
+```javascript
 import { Accordion } from 'flowbite';
 
 /*
@@ -716,11 +702,11 @@ import { Accordion } from 'flowbite';
 * instanceOptions (optional)
 */
 const accordion = new Accordion(accordionElement, accordionItems, options, instanceOptions);
-{{< /code >}}
+```
 
 Now you can access the object methods to programmatically open, close, and toggle the accordion items based on the unique identifier.
 
-{{< code lang="javascript" file="accordion.js" icon="file" >}}
+```javascript
 // open accordion item based on id
 accordion.open('accordion-example-heading-2');
 
@@ -729,13 +715,13 @@ accordion.close('accordion-example-heading-2');
 
 // toggle visibility of item based on id
 accordion.toggle('accordion-example-heading-3');
-{{< /code >}}
+```
 
 ### HTML Markup
 
 Use the following HTML markup example for the JavaScript script above.
 
-{{< code lang="html" file="accordion.html" icon="file" >}}
+```html
 <div id="accordion-example">
   <h2 id="accordion-example-heading-1">
     <button type="button" class="flex items-center justify-between w-full p-5 font-medium rtl:text-right text-body border border-b-0 border-default rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800" aria-expanded="true" aria-controls="accordion-example-body-1">
@@ -758,7 +744,7 @@ Use the following HTML markup example for the JavaScript script above.
   <div id="accordion-example-body-2" class="hidden" aria-labelledby="accordion-example-heading-2">
     <div class="p-5 border border-b-0 border-default dark:border-gray-700">
       <p class="mb-2 text-body">Flowbite is first conceptualized and designed using the Figma software so everything you see in the library has a design equivalent in our Figma file.</p>
-      <p class="text-body">Check out the <a href="{{< param homepage >}}/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
+      <p class="text-body">Check out the <a href="https://flowbite.com/figma/" class="text-fg-brand hover:underline">Figma design system</a> based on the utility classes from Tailwind CSS and components from Flowbite.</p>
     </div>
   </div>
   <h2 id="accordion-example-heading-3">
@@ -773,21 +759,21 @@ Use the following HTML markup example for the JavaScript script above.
       <p class="mb-2 text-body">However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as there is no technical reason stopping you from using the best of two worlds.</p>
       <p class="mb-2 text-body">Learn more about these technologies:</p>
       <ul class="ps-5 text-body list-disc dark:text-gray-400">
-        <li><a href="{{< param homepage >}}/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
+        <li><a href="https://flowbite.com/pro/" class="text-fg-brand hover:underline">Flowbite Pro</a></li>
         <li><a href="https://tailwindui.com/" rel="nofollow" class="text-fg-brand hover:underline">Tailwind UI</a></li>
       </ul>
     </div>
   </div>
 </div>
-{{< /code >}}
+```
 
 ### TypeScript
 
-If you're using the <a href="{{< ref "getting-started/typescript" >}}">TypeScript configuration</a> from Flowbite then you can import the types for the Accordion object, parameters and its options.
+If you're using the TypeScript configuration from Flowbite then you can import the types for the Accordion object, parameters and its options.
 
 Here's an example that applies the types from Flowbite to the code above:
 
-{{< code lang="typescript" file="accordion.ts" icon="file" >}}
+```typescript
 import { Accordion } from "flowbite";
 import type { AccordionOptions, AccordionItem, AccordionInterface } from "flowbite";
 import type { InstanceOptions } from 'flowbite';
@@ -857,4 +843,4 @@ accordion.destroy();
 
 // re-initialize accordion
 accordion.init();
-{{< /code >}}
+```