| <!doctype html><html lang=en dir=ltr class="docs-wrapper plugin-docs plugin-id-developer_docs docs-version-current docs-doc-page docs-doc-id-extensions/components/index" data-has-hydrated=false><head><meta charset=UTF-8><meta name=generator content="Docusaurus v3.10.1"><title data-rh=true>Extension Components | Superset</title><meta data-rh=true name=viewport content="width=device-width, initial-scale=1.0"/><meta data-rh=true property=og:url content=https://superset.apache.org/developer-docs/extensions/components/ /><meta data-rh=true property=og:locale content=en /><meta data-rh=true name=docusaurus_locale content=en /><meta data-rh=true name=docsearch:language content=en /><meta data-rh=true name=keywords content="data visualization, business intelligence, BI, dashboards, SQL, analytics, open source, Apache, charts, reporting"/><meta data-rh=true property=og:type content=website /><meta data-rh=true property=og:site_name content="Apache Superset"/><meta data-rh=true property=og:image content=https://superset.apache.org/img/superset-og-image.png /><meta data-rh=true property=og:image:width content=1200 /><meta data-rh=true property=og:image:height content=630 /><meta data-rh=true name=twitter:card content=summary_large_image /><meta data-rh=true name=twitter:image content=https://superset.apache.org/img/superset-og-image.png /><meta data-rh=true name=twitter:site content=@ApacheSuperset /><meta data-rh=true name=docusaurus_version content=current /><meta data-rh=true name=docusaurus_tag content=docs-developer_docs-current /><meta data-rh=true name=docsearch:version content=current /><meta data-rh=true name=docsearch:docusaurus_tag content=docs-developer_docs-current /><meta data-rh=true property=og:title content="Extension Components | Superset"/><meta data-rh=true name=description content="<!--"/><meta data-rh=true property=og:description content="<!--"/><link data-rh=true rel=icon href=/img/favicon.ico /><link data-rh=true rel=canonical href=https://superset.apache.org/developer-docs/extensions/components/ /><link data-rh=true rel=alternate href=https://superset.apache.org/developer-docs/extensions/components/ hreflang=en /><link data-rh=true rel=alternate href=https://superset.apache.org/developer-docs/extensions/components/ hreflang=x-default /><link data-rh=true rel=preconnect href=https://WR5FASX5ED-dsn.algolia.net crossorigin=anonymous /><link rel=search type=application/opensearchdescription+xml title=Superset href=/opensearch.xml><script type=application/ld+json>{"@context":"https://schema.org","@type":"SoftwareApplication","applicationCategory":"BusinessApplication","author":{"@type":"Organization","logo":"https://www.apache.org/foundation/press/kit/asf_logo.png","name":"Apache Software Foundation","url":"https://www.apache.org/"},"description":"Apache Superset is a modern, enterprise-ready business intelligence web application for data exploration and visualization.","featureList":["Interactive dashboards","SQL IDE","40+ visualization types","Semantic layer","Role-based access control","REST API"],"license":"https://www.apache.org/licenses/LICENSE-2.0","name":"Apache Superset","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"operatingSystem":"Cross-platform","url":"https://superset.apache.org"}</script><script type=application/ld+json>{"@context":"https://schema.org","@type":"WebSite","name":"Apache Superset","potentialAction":{"@type":"SearchAction","query-input":"required name=search_term_string","target":{"@type":"EntryPoint","urlTemplate":"https://superset.apache.org/search?q={search_term_string}"}},"url":"https://superset.apache.org"}</script><link rel=preconnect href=https://WR5FASX5ED-dsn.algolia.net crossorigin=anonymous><link rel=preconnect href=https://analytics.apache.org><script src=https://widget.kapa.ai/kapa-widget.bundle.js async data-website-id=c6a8a8b8-3127-48f9-97a7-51e9e10d20d0 data-project-name="Apache Superset" data-project-color=#FFFFFF data-project-logo=https://superset.apache.org/img/superset-logo-icon-only.png data-modal-override-open-id=ask-ai-input data-modal-override-open-class=search-input data-modal-disclaimer="This is a custom LLM for Apache Superset with access to all [documentation](superset.apache.org/docs/intro/), [GitHub Open Issues, PRs and READMEs](github.com/apache/superset).&#10;&#10;Companies deploy assistants like this ([built by kapa.ai](https://kapa.ai)) on docs via [website widget](https://docs.kapa.ai/integrations/website-widget) (Docker, Reddit), in [support forms](https://docs.kapa.ai/integrations/support-form-deflector) for ticket deflection (Monday.com, Mapbox), or as [Slack bots](https://docs.kapa.ai/integrations/slack-bot) with private sources." data-modal-example-questions="How do I install Superset?,How can I contribute to Superset?" data-button-text-color=rgb(81,166,197) data-modal-header-bg-color=#ffffff data-modal-title-color=rgb(81,166,197) data-modal-title="Apache Superset AI" data-modal-disclaimer-text-color=#000000 data-consent-required=true data-consent-screen-disclaimer="By clicking "I agree, let's chat", you consent to the use of the AI assistant in accordance with kapa.ai's [Privacy Policy](https://www.kapa.ai/content/privacy-policy). This service uses reCAPTCHA, which requires your consent to Google's [Privacy Policy](https://policies.google.com/privacy) and [Terms of Service](https://policies.google.com/terms). By proceeding, you explicitly agree to both kapa.ai's and Google's privacy policies."></script><link rel=stylesheet href=/assets/css/styles.c802b717.css /><script src=/assets/js/runtime~main.d3cd9308.js defer></script><script src=/assets/js/main.198cbbee.js defer></script></head><body><svg style="display: none;"><defs> |
| <symbol id=theme-svg-external-link viewBox="0 0 24 24"><path fill=currentColor d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"/></symbol> |
| </defs></svg> |
| <script>!function(){var t=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return window.localStorage.getItem("theme")}catch(t){}}();document.documentElement.setAttribute("data-theme",t||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.setAttribute("data-theme-choice",t||"system")}(),function(){try{for(var[t,e]of new URLSearchParams(window.location.search).entries())if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id=__docusaurus><div role=region aria-label="Skip to main content"><a class=skipToContent_fXgn href=#__docusaurus_skipToContent_fallback>Skip to main content</a></div><nav aria-label=Main class="theme-layout-navbar navbar navbar--fixed-top"><div class=navbar__inner><div class="theme-layout-navbar-left navbar__items"><button aria-label="Toggle navigation bar" aria-expanded=false class="navbar__toggle clean-btn" type=button><svg width=30 height=30 viewBox="0 0 30 30" aria-hidden=true><path stroke=currentColor stroke-linecap=round stroke-miterlimit=10 stroke-width=2 d="M4 7h22M4 15h22M4 23h22"/></svg></button><a class=navbar__brand href=/><div class=navbar__logo><img src=/img/superset-logo-horiz.svg alt="Superset Logo" class="themedComponent_mlkZ themedComponent--light_NVdE"/><img src=/img/superset-logo-horiz-dark.svg alt="Superset Logo" class="themedComponent_mlkZ themedComponent--dark_xIcU"/></div></a><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/user-docs/>Users</a><ul class=dropdown__menu><li><a class=dropdown__link href=/user-docs/>Overview</a><li><a class=dropdown__link href=/user-docs/quickstart>Quickstart</a><li><a class=dropdown__link href=/user-docs/using-superset/creating-your-first-dashboard>Using Superset</a><li><a class=dropdown__link href=/user-docs/databases/>Connecting to Databases</a><li><a class=dropdown__link href=/user-docs/faq>FAQ</a></ul></div><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/admin-docs/>Admins</a><ul class=dropdown__menu><li><a class=dropdown__link href=/admin-docs/>Overview</a><li><a class=dropdown__link href=/admin-docs/installation/installation-methods>Installation</a><li><a class=dropdown__link href=/admin-docs/configuration/configuring-superset>Configuration</a><li><a class=dropdown__link href=/user-docs/databases/>Database Drivers</a><li><a class=dropdown__link href=/admin-docs/security/>Security</a></ul></div><div class="navbar__item dropdown dropdown--hoverable"><a aria-current=page class="navbar__link active" aria-haspopup=true aria-expanded=false role=button href=/developer-docs/>Developers</a><ul class=dropdown__menu><li><a class=dropdown__link href=/developer-docs/>Overview</a><li><a class=dropdown__link href=/developer-docs/contributing/overview>Contributing</a><li><a aria-current=page class="dropdown__link dropdown__link--active" href=/developer-docs/extensions/overview>Extensions</a><li><a class=dropdown__link href=/developer-docs/testing/overview>Testing</a><li><a class=dropdown__link href=/developer-docs/components/>UI Components</a><li><a class=dropdown__link href=/developer-docs/api>API Reference</a></ul></div><div class="navbar__item dropdown dropdown--hoverable"><a class=navbar__link aria-haspopup=true aria-expanded=false role=button href=/community>Community</a><ul class=dropdown__menu><li><a class=dropdown__link href=/community>Resources</a><li><a href=https://github.com/apache/superset target=_blank rel="noopener noreferrer" class=dropdown__link>GitHub<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a href=http://bit.ly/join-superset-slack target=_blank rel="noopener noreferrer" class=dropdown__link>Slack<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a href=https://lists.apache.org/list.html?dev@superset.apache.org target=_blank rel="noopener noreferrer" class=dropdown__link>Mailing List<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a href=https://stackoverflow.com/questions/tagged/apache-superset target=_blank rel="noopener noreferrer" class=dropdown__link>Stack Overflow<svg width=12 height=12 aria-label="(opens in new tab)" class=iconExternalLink_nPIU><use href=#theme-svg-external-link /></svg></a><li><a class=dropdown__link href=/community#superset-community-calendar>Community Calendar</a><li><a class=dropdown__link href=/inTheWild>In the Wild</a></ul></div></div><div class="theme-layout-navbar-right navbar__items navbar__items--right"><style data-emotion="css kad2tq">.css-kad2tq{z-index:2;border-radius:10px;align-items:stretch;width:176px;margin-right:20px;font-size:18px;font-weight:700;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;overflow:hidden}.css-kad2tq .split-main{color:#fff;-webkit-flex:1;-ms-flex:1;flex:1;justify-content:center;align-items:center;min-width:0;padding:7px 8px;-webkit-text-decoration:none;text-decoration:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.css-kad2tq .split-main:hover{color:#fff}.css-kad2tq .split-divider{background:#ffffff61;-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;align-self:stretch;width:1px;margin:6px 0}.css-kad2tq .split-dropdown-trigger{cursor:pointer;color:#fff;background:0 0;border:none;-ms-flex-negative:0;-webkit-flex-shrink:0;flex-shrink:0;justify-content:center;align-items:center;width:38px;margin:0;padding:0;font-size:10px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.css-kad2tq .split-dropdown-trigger:hover{color:#fff}</style><div class="default-button-theme get-started-split get-started-button css-kad2tq"><a class=split-main href=/user-docs/>Get Started</a><span class=split-divider aria-hidden=true></span><button type=button class="ant-dropdown-trigger split-dropdown-trigger" aria-haspopup=menu aria-label="Choose documentation: Users, Admins, or Developers"><span role=img aria-label=down class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable=false data-icon=down width=1em height=1em fill=currentColor aria-hidden=true><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"/></svg></span></button></div><a href=https://github.com/apache/superset target=_blank rel="noopener noreferrer" class="navbar__item navbar__link github-button"></a><div class="toggle_vylO colorModeToggle_DEke"><button class="clean-btn toggleButton_gllP toggleButtonDisabled_aARS" type=button disabled title="system mode" aria-label="Switch between dark and light mode (currently system mode)"><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP lightToggleIcon_pyhR"><path fill=currentColor d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP darkToggleIcon_wfgR"><path fill=currentColor d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg><svg viewBox="0 0 24 24" width=24 height=24 aria-hidden=true class="toggleIcon_g3eP systemToggleIcon_QzmC"><path fill=currentColor d="m12 21c4.971 0 9-4.029 9-9s-4.029-9-9-9-9 4.029-9 9 4.029 9 9 9zm4.95-13.95c1.313 1.313 2.05 3.093 2.05 4.95s-0.738 3.637-2.05 4.95c-1.313 1.313-3.093 2.05-4.95 2.05v-14c1.857 0 3.637 0.737 4.95 2.05z"/></svg></button></div><div class=navbarSearchContainer_Bca1><button type=button class="DocSearch DocSearch-Button" aria-label="Search (Meta+k)" aria-keyshortcuts=Meta+k><span class=DocSearch-Button-Container><svg width=20 height=20 class=DocSearch-Search-Icon viewBox="0 0 24 24" aria-hidden=true><circle cx=11 cy=11 r=8 stroke=currentColor fill=none stroke-width=1.4 /><path d="m21 21-4.3-4.3" stroke=currentColor fill=none stroke-linecap=round stroke-linejoin=round /></svg><span class=DocSearch-Button-Placeholder>Search</span></span><span class=DocSearch-Button-Keys></span></button></div></div></div><div role=presentation class=navbar-sidebar__backdrop></div></nav><div id=__docusaurus_skipToContent_fallback class="theme-layout-main main-wrapper mainWrapper_z2l0"><div class=docsWrapper_hBAB><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_sjWU" type=button></button><div class=docRoot_UBD9><main class="docMainContainer_TBSr docMainContainerEnhanced_lQrH"><div class="container padding-top--md padding-bottom--lg"><div class=row><div class="col docItemCol_xLCN"><div class="theme-doc-version-banner alert alert--warning margin-bottom--md" role=alert><div>This is unreleased documentation for <!-- -->Superset<!-- --> <b>Next</b> version.</div><div class=margin-top--md>For up-to-date documentation, see the <b><a href=/developer-docs/extensions/components/>latest version</a></b> (<!-- -->Next<!-- -->).</div></div><div class=docItemContainer_jfFK><article><span class=versionBadge_QOso>Version:<!-- --> <a class="ant-dropdown-trigger versionSelector_oOvN">Next<!-- --> <span role=img aria-label=down class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable=false data-icon=down width=1em height=1em fill=currentColor aria-hidden=true><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"/></svg></span></a></span><div class="tocCollapsible_ETCw theme-doc-toc-mobile tocMobile_ITEo"><button type=button class="clean-btn tocCollapsibleButton_TO0P">On this page</button></div><div class="theme-doc-markdown markdown"><div class=row><div class="col col--12 markdown"><header><h1>Extension Components</h1></header> |
| <p>These UI components are available to Superset extension developers through the <code>@apache-superset/core/components</code> package. They provide a consistent look and feel with the rest of Superset and are designed to be used in extension panels, views, and other UI elements.</p> |
| <h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=available-components>Available Components<a href=#available-components class=hash-link aria-label="Direct link to Available Components" title="Direct link to Available Components" translate=no></a></h2> |
| <ul> |
| <li class=""><a class="" href=/developer-docs/extensions/components/alert>Alert</a></li> |
| </ul> |
| <h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=usage>Usage<a href=#usage class=hash-link aria-label="Direct link to Usage" title="Direct link to Usage" translate=no></a></h2> |
| <p>All components are exported from the <code>@apache-superset/core/components</code> package:</p> |
| <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#9CDCFE;--prism-background-color:#1E1E1E><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style=color:#9CDCFE;background-color:#1E1E1E><code class=codeBlockLines_e6Vv><div class=token-line style=color:#9CDCFE><span class="token keyword" style="color:rgb(86, 156, 214)">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token imports"> </span><span class="token imports maybe-class-name">Alert</span><span class="token imports"> </span><span class="token imports punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(86, 156, 214)">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">'@apache-superset/core/components'</span><span class="token punctuation" style="color:rgb(212, 212, 212)">;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"></span><span class="token keyword" style="color:rgb(86, 156, 214)">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(86, 156, 214)">function</span><span class="token plain"> </span><span class="token function" style="color:rgb(220, 220, 170)">MyExtensionPanel</span><span class="token punctuation" style="color:rgb(212, 212, 212)">(</span><span class="token punctuation" style="color:rgb(212, 212, 212)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> </span><span class="token keyword" style="color:rgb(86, 156, 214)">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">(</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(212, 212, 212)"><</span><span class="token tag class-name" style="color:rgb(78, 201, 176)">Alert</span><span class="token tag" style="color:rgb(78, 201, 176)"> </span><span class="token tag attr-name" style="color:rgb(156, 220, 254)">type</span><span class="token tag attr-value punctuation attr-equals" style="color:rgb(212, 212, 212)">=</span><span class="token tag attr-value punctuation" style="color:rgb(212, 212, 212)">"</span><span class="token tag attr-value" style="color:rgb(206, 145, 120)">info</span><span class="token tag attr-value punctuation" style="color:rgb(212, 212, 212)">"</span><span class="token tag punctuation" style="color:rgb(212, 212, 212)">></span><span class="token plain-text"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain-text"> Welcome to my extension!</span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain-text"> </span><span class="token tag punctuation" style="color:rgb(212, 212, 212)"></</span><span class="token tag class-name" style="color:rgb(78, 201, 176)">Alert</span><span class="token tag punctuation" style="color:rgb(212, 212, 212)">></span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">)</span><span class="token punctuation" style="color:rgb(212, 212, 212)">;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"></span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><br/></div></code></pre></div></div> |
| <h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=adding-new-components>Adding New Components<a href=#adding-new-components class=hash-link aria-label="Direct link to Adding New Components" title="Direct link to Adding New Components" translate=no></a></h2> |
| <p>Components in <code>@apache-superset/core/components</code> are automatically documented here. To add a new extension component:</p> |
| <ol> |
| <li class="">Add the component to <code>superset-frontend/packages/superset-core/src/ui/components/</code></li> |
| <li class="">Export it from <code>superset-frontend/packages/superset-core/src/ui/components/index.ts</code></li> |
| <li class="">Create a Storybook story with an <code>Interactive</code> export:</li> |
| </ol> |
| <div class="language-tsx codeBlockContainer_Ckt0 theme-code-block" style=--prism-color:#9CDCFE;--prism-background-color:#1E1E1E><div class=codeBlockContent_QJqH><pre tabindex=0 class="prism-code language-tsx codeBlock_bY9V thin-scrollbar" style=color:#9CDCFE;background-color:#1E1E1E><code class=codeBlockLines_e6Vv><div class=token-line style=color:#9CDCFE><span class="token keyword" style="color:rgb(86, 156, 214)">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(86, 156, 214)">default</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> title</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">'Extension Components/MyComponent'</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> component</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token maybe-class-name">MyComponent</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> parameters</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> docs</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> description</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> component</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">'Description of the component...'</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"></span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"></span><span class="token keyword" style="color:rgb(86, 156, 214)">export</span><span class="token plain"> </span><span class="token keyword" style="color:rgb(86, 156, 214)">const</span><span class="token plain"> </span><span class="token function-variable function" style="color:rgb(220, 220, 170)">InteractiveMyComponent</span><span class="token plain"> </span><span class="token operator" style="color:rgb(212, 212, 212)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">(</span><span class="token plain">args</span><span class="token punctuation" style="color:rgb(212, 212, 212)">)</span><span class="token plain"> </span><span class="token arrow operator" style="color:rgb(212, 212, 212)">=></span><span class="token plain"> </span><span class="token tag punctuation" style="color:rgb(212, 212, 212)"><</span><span class="token tag class-name" style="color:rgb(78, 201, 176)">MyComponent</span><span class="token tag" style="color:rgb(78, 201, 176)"> </span><span class="token tag spread punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token tag spread operator" style="color:rgb(212, 212, 212)">...</span><span class="token tag spread" style="color:rgb(78, 201, 176)">args</span><span class="token tag spread punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token tag" style="color:rgb(78, 201, 176)"> </span><span class="token tag punctuation" style="color:rgb(212, 212, 212)">/></span><span class="token punctuation" style="color:rgb(212, 212, 212)">;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"></span><span class="token maybe-class-name">InteractiveMyComponent</span><span class="token punctuation" style="color:rgb(212, 212, 212)">.</span><span class="token property-access">args</span><span class="token plain"> </span><span class="token operator" style="color:rgb(212, 212, 212)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> variant</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">'primary'</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token boolean">false</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"></span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">;</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain" style=display:inline-block></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"></span><span class="token maybe-class-name">InteractiveMyComponent</span><span class="token punctuation" style="color:rgb(212, 212, 212)">.</span><span class="token property-access">argTypes</span><span class="token plain"> </span><span class="token operator" style="color:rgb(212, 212, 212)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> variant</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> control</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"> type</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">'select'</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> options</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">[</span><span class="token string" style="color:rgb(206, 145, 120)">'primary'</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">'secondary'</span><span class="token punctuation" style="color:rgb(212, 212, 212)">]</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> disabled</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> control</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">{</span><span class="token plain"> type</span><span class="token operator" style="color:rgb(212, 212, 212)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(206, 145, 120)">'boolean'</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"> </span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">,</span><span class="token plain"></span><br/></div><div class=token-line style=color:#9CDCFE><span class="token plain"></span><span class="token punctuation" style="color:rgb(212, 212, 212)">}</span><span class="token punctuation" style="color:rgb(212, 212, 212)">;</span><br/></div></code></pre></div></div> |
| <ol start=4> |
| <li class="">Run <code>yarn start</code> in <code>docs/</code> - the page generates automatically!</li> |
| </ol> |
| <h2 class="anchor anchorTargetStickyNavbar_Vzrq" id=interactive-documentation>Interactive Documentation<a href=#interactive-documentation class=hash-link aria-label="Direct link to Interactive Documentation" title="Direct link to Interactive Documentation" translate=no></a></h2> |
| <p>For interactive examples with controls, run Storybook locally — see the <a class="" href=/developer-docs/testing/storybook>Storybook documentation</a>.</div></div></div><div class=row><div class="col col--12"><footer class="theme-doc-footer docusaurus-mt-lg"><div class="row margin-top--sm theme-doc-footer-edit-meta-row"><div class="col noPrint_WFHX"><a href=https://github.com/apache/superset/edit/master/docs/developer_docs/developer_docs/extensions/components/index.mdx target=_blank rel="noopener noreferrer" class=theme-edit-this-page><svg fill=currentColor height=20 width=20 viewBox="0 0 40 40" class=iconEdit_Z9Sw aria-hidden=true><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"/></g></svg>Edit this page</a></div><div class="col lastUpdated_JAkA"><span class=theme-last-updated>Last updated<!-- --> on <b><time datetime=2026-07-11T22:03:24.000Z itemprop=dateModified>Jul 11, 2026</time></b> by <b>Elizabeth Thompson</b></span></div></div></footer></div></div></article><div class=row><div class="col col--12"><nav class="docusaurus-mt-lg pagination-nav" aria-label="Docs pages"></nav></div></div></div></div><div class="col col--3"><div class="tableOfContents_bqdL thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href=#available-components class="table-of-contents__link toc-highlight">Available Components</a><li><a href=#usage class="table-of-contents__link toc-highlight">Usage</a><li><a href=#adding-new-components class="table-of-contents__link toc-highlight">Adding New Components</a><li><a href=#interactive-documentation class="table-of-contents__link toc-highlight">Interactive Documentation</a></ul></div></div></div></div></main></div></div></div><footer class="theme-layout-footer footer"><div class="container container-fluid"><div class="footer__bottom text--center"><div class=footer__copyright> |
| <div class=footer__social-links> |
| <a href=https://bit.ly/join-superset-slack target=_blank rel="noopener noreferrer" title="Join us on Slack" aria-label=Slack> |
| <img src=/img/community/slack-symbol.svg alt=Slack /> |
| </a> |
| <a href=https://x.com/apachesuperset target=_blank rel="noopener noreferrer" title="Follow us on X" aria-label=X> |
| <img src=/img/community/x-symbol.svg alt=X /> |
| </a> |
| <a href=https://www.linkedin.com/company/apache-superset target=_blank rel="noopener noreferrer" title="Follow us on LinkedIn" aria-label=LinkedIn> |
| <img src=/img/community/linkedin-symbol.svg alt=LinkedIn /> |
| </a> |
| <a href=https://bsky.app/profile/apachesuperset.bsky.social target=_blank rel="noopener noreferrer" title="Follow us on Bluesky" aria-label=Bluesky> |
| <img src=/img/community/bluesky-symbol.svg alt=Bluesky /> |
| </a> |
| <a href=https://reddit.com/r/apache-superset target=_blank rel="noopener noreferrer" title="Follow us on Reddit" aria-label=Reddit> |
| <img src=/img/community/reddit-symbol.svg alt=Reddit /> |
| </a> |
| </div> |
| <div class=footer__ci-services> |
| <span>CI powered by</span> |
| <a href=https://www.netlify.com/ target=_blank rel="nofollow noopener noreferrer"><img src=/img/netlify.png alt=Netlify title="Netlify - Deploy Previews"/></a> |
| </div> |
| <p>Copyright © 2026, |
| The <a href=https://www.apache.org/ target=_blank rel=noreferrer>Apache Software Foundation</a>, |
| Licensed under the Apache <a href=https://apache.org/licenses/LICENSE-2.0 target=_blank rel=noreferrer>License</a>.</p> |
| <p><small>Apache Superset, Apache, Superset, the Superset logo, and the Apache feather logo are either registered trademarks or trademarks of The Apache Software Foundation. All other products or name brands are trademarks of their respective holders, including The Apache Software Foundation. |
| <a href=https://www.apache.org/ target=_blank>Apache Software Foundation</a> resources</small></p> |
| <img class=footer__divider src=/img/community/line.png alt=Divider /> |
| <p> |
| <small> |
| <a href=/admin-docs/security/ target=_blank rel=noreferrer>Security</a> | |
| <a href=https://www.apache.org/foundation/sponsorship.html target=_blank rel=noreferrer>Donate</a> | |
| <a href=https://www.apache.org/foundation/thanks.html target=_blank rel=noreferrer>Thanks</a> | |
| <a href=https://apache.org/events/current-event target=_blank rel=noreferrer>Events</a> | |
| <a href=https://apache.org/licenses/ target=_blank rel=noreferrer>License</a> | |
| <a href=https://privacy.apache.org/policies/privacy-policy-public.html target=_blank rel=noreferrer>Privacy</a> |
| </small> |
| </p> |
| <!-- telemetry/analytics pixel: --> |
| <img referrerpolicy=no-referrer-when-downgrade src="https://static.scarf.sh/a.png?x-pxid=39ae6855-95fc-4566-86e5-360d542b0a68"/> |
| </div></div></div></footer></div></body> |