<!doctype html>
<html lang="en">
  <head><script initial="">if (!('CSSLayerBlockRule' in window)) {
    window.location.search='v-r=oldbrowser';
}
</script><script initial="">window.Vaadin = window.Vaadin || {};window.Vaadin.TypeScript= {};</script><script initial="">window.Vaadin = window.Vaadin || {};
window.Vaadin.featureFlagsUpdaters = window.Vaadin.featureFlagsUpdaters || [];
window.Vaadin.featureFlagsUpdaters.push((activator) => {
});</script><base href="./../../.."><script type="text/javascript">window.JSCompiler_renameProperty = function(a) { return a;}</script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Vaadin Add-on Directory</title>

    <!--CSSImport end--><!--Stylesheet end--><link rel="canonical" href="https://vaadin.com/directory/">

    <meta name="description" content="Find open-source widgets, add-ons, themes, and integrations for your Vaadin application.">

    <meta property="og:type" content="article">
    <meta property="og:url" content="https://vaadin.com/directory/">
    <meta property="og:title" content="Vaadin Add-on Directory">
    <meta property="og:description" content="Find open-source widgets, add-ons, themes, and integrations for your Vaadin application.">
    <meta property="og:image" content="https://website.vaadin.com/hubfs/Logos/vaadin_symbol_RGB_500x500.png">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@vaadindirectory">
    <meta name="twitter:creator" content="@vaadindirectory">
    <meta name="twitter:title" content="Vaadin Add-on Directory">
    <meta name="twitter:description" content="Find open-source widgets, add-ons, themes, and integrations for your Vaadin application.">
    <meta name="twitter:image" content="https://website.vaadin.com/hubfs/Logos/vaadin_symbol_RGB_500x500.png">

    <link rel="alternate" type="application/atom+xml" href="https://vaadin.com/directory/feed">

    <link rel="preload" as="style" href="https://cdn.vaadin.com/website/hubspot-theme/v2/haas/css/haas.css">
    <link rel="preload" as="style" href="https://cdn.vaadin.com/website/antlers/v2/assets/fonts/nbinternationalpro/stylesheet.css">
    <link rel="preload" as="style" href="https://cdn.vaadin.com/website/antlers/v2/assets/icons/css/line-awesome.min.css">

    <link rel="stylesheet" href="https://cdn.vaadin.com/website/hubspot-theme/v2/haas/css/haas.css">
    <link rel="stylesheet" href="https://cdn.vaadin.com/website/antlers/v2/assets/fonts/nbinternationalpro/stylesheet.css">
    <link rel="stylesheet" href="https://cdn.vaadin.com/website/antlers/v2/assets/icons/css/line-awesome.min.css" media="none" onload="if(media!=='all')media='all'">
    <style>
      html {
        /* Needed for the loading indicator */
        --lumo-primary-color: var(--blue-500);
      }
      /* Prevent the svg from showing up huge before styles load */
      .icon svg {
        width: 16px;
      }
    </style>

    <!-- index.ts is included here automatically (either by the dev server or during the build) -->
    <script type="module" crossorigin src="./VAADIN/build/indexhtml-D4jn7j2i.js"></script>
    <link rel="modulepreload" crossorigin href="./VAADIN/build/commonjsHelpers-Cpj98o6Y.js">
    <link rel="stylesheet" crossorigin href="./VAADIN/build/indexhtml-j-wBjo59.css">
  <style>.v-reconnect-dialog,.v-system-error {position: absolute;color: black;background: white;top: 1em;right: 1em;border: 1px solid black;padding: 1em;z-index: 10000;max-width: calc(100vw - 4em);max-height: calc(100vh - 4em);overflow: auto;} .v-system-error {color: indianred;pointer-events: auto;} .v-system-error h3, .v-system-error b {color: red;}</style><style>[hidden] { display: none !important; }</style></head>
  <body>
    <header>
      <section id="haas-container" class="haas"></section>
      <section class="directory-header">
        <section>
          <section class="directory-title">
            <h1>Add-on Directory</h1>
          </section>
          <nav class="directory-support-nav" aria-label="support">
            <p id="myaddons"></p>
            <ul>
              <li><a href="https://vaadin.com/directory-edit/my-components" router-ignore>Publish component</a></li>
              <li><a target="dgithub" href="https://github.com/vaadin/directory/issues">Report issues</a></li>
              <li><a href="https://vaadin.com/directory-help">Help</a></li>
              <li>
                <a href="https://twitter.com/vaadindirectory" class="twitter" title="Follow Vaadin Directory on Twitter">
                  <span class="icon"></span>
                  <span class="sr-only">Follow Vaadin Directory on Twitter</span>
                </a>
              </li>
            </ul>
          </nav>
          <span style="display: none;" class="build-label"></span>
        </section>
      </section>
    </header>
    <main>
      <article>
        <section id="outlet"></section>
        <section id="placeholder">
          <h1>Vaadin Add-on Directory</h1>
          <span>Find open-source widgets, add-ons, themes, and integrations for your Vaadin application.</span>
          <img src="https://website.vaadin.com/hubfs/Logos/vaadin_symbol_RGB_500x500.png" alt="Vaadin Add-on Directory">
          <div>The channel for finding, promoting, and distributing Vaadin add-ons.</div>
          <section id="links"></section>
        </section>
      </article>
    </main>
  </body>
</html>
