2024-09-02 07:18:02 +00:00
<!doctype html>
< html lang = "en" dir = "ltr" class = "docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-extensions/developing/adding-ui-components" data-has-hydrated = "false" >
< head >
< meta charset = "UTF-8" >
2025-01-14 13:36:07 +00:00
< meta name = "generator" content = "Docusaurus v3.7.0" >
2024-09-02 07:18:02 +00:00
< title data-rh = "true" > Adding UI components | Podman Desktop< / title > < meta data-rh = "true" name = "viewport" content = "width=device-width,initial-scale=1" > < meta data-rh = "true" name = "twitter:card" content = "summary_large_image" > < meta data-rh = "true" property = "og:image" content = "https://podman-desktop.io/img/banner_podman-desktop.png" > < meta data-rh = "true" name = "twitter:image" content = "https://podman-desktop.io/img/banner_podman-desktop.png" > < meta data-rh = "true" property = "og:url" content = "https://podman-desktop.io/docs/extensions/developing/adding-ui-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 = "docusaurus_version" content = "current" > < meta data-rh = "true" name = "docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" name = "docsearch:version" content = "current" > < meta data-rh = "true" name = "docsearch:docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" property = "og:title" content = "Adding UI components | Podman Desktop" > < meta data-rh = "true" name = "description" content = "Adding different components in UI" > < meta data-rh = "true" property = "og:description" content = "Adding different components in UI" > < meta data-rh = "true" name = "keywords" content = "podman desktop,extension,writing,web-components" > < link data-rh = "true" rel = "icon" href = "/img/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://podman-desktop.io/docs/extensions/developing/adding-ui-components" > < link data-rh = "true" rel = "alternate" href = "https://podman-desktop.io/docs/extensions/developing/adding-ui-components" hreflang = "en" > < link data-rh = "true" rel = "alternate" href = "https://podman-desktop.io/docs/extensions/developing/adding-ui-components" hreflang = "x-default" > < link data-rh = "true" rel = "preconnect" href = "https://MR01ANKQ9S-dsn.algolia.net" crossorigin = "anonymous" > < link rel = "alternate" type = "application/rss+xml" href = "/blog/rss.xml" title = "Podman Desktop RSS Feed" >
< link rel = "alternate" type = "application/atom+xml" href = "/blog/atom.xml" title = "Podman Desktop Atom Feed" >
< link rel = "alternate" type = "application/json" href = "/blog/feed.json" title = "Podman Desktop JSON Feed" >
2025-01-14 13:36:07 +00:00
2024-09-02 07:18:02 +00:00
< link rel = "search" type = "application/opensearchdescription+xml" title = "Podman Desktop" href = "/opensearch.xml" >
< link rel = "preconnect" href = "https://podman-desktop-website.goatcounter.com" >
2025-05-19 17:14:25 +00:00
< script async src = "//gc.zgo.at/count.js" data-goatcounter = "https://podman-desktop-website.goatcounter.com/count" > < / script > < link rel = "stylesheet" href = "/assets/css/styles.d10e7093.css" >
2025-05-21 05:46:17 +00:00
< script src = "/assets/js/runtime~main.9bed4602.js" defer = "defer" > < / script >
2025-05-19 08:12:44 +00:00
< script src = "/assets/js/main.6e6bba9b.js" defer = "defer" > < / script >
2024-09-02 07:18:02 +00:00
< / head >
< body class = "navigation-with-keyboard" >
2025-05-16 06:24:04 +00:00
< script > ! function ( ) { function t ( t ) { document . documentElement . setAttribute ( "data-theme" , t ) } var e = function ( ) { try { return new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } } ( ) || function ( ) { try { return window . localStorage . getItem ( "theme" ) } catch ( t ) { } } ( ) ; null !== e ? t ( e ) : window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches ? t ( "dark" ) : window . matchMedia ( "(prefers-color-scheme: light)" ) . matches ? t ( "light" ) : t ( "dark" ) } ( ) , function ( ) { try { const c = new URLSearchParams ( window . location . search ) . entries ( ) ; for ( var [ t , e ] of c ) 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_oPtH" href = "#__docusaurus_skipToContent_fallback" > Skip to main content< / a > < / div > < nav aria-label = "Main" class = "navbar navbar--fixed-top" > < div class = "navbar__inner" > < div class = "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" > < / path > < / svg > < / button > < a class = "navbar__brand" href = "/" > < div class = "navbar__logo" > < img src = "/img/logo.svg" alt = "Podman Desktop Logo" class = "themedComponent_siVc themedComponent--light_hHel" height = "56" > < img src = "/img/logo.svg" alt = "Podman Desktop Logo" class = "themedComponent_siVc themedComponent--dark_yETr" height = "56" > < / div > < b class = "navbar__title text--truncate" > podman desktop< / b > < / a > < a aria-current = "page" class = "navbar__item navbar__link navbar__link--active" href = "/docs/intro" > Documentation< / a > < a class = "navbar__item navbar__link" href = "/downloads" > Downloads< / a > < a class = "navbar__item navbar__link" href = "/community" > Community< / a > < div class = "navbar__item dropdown dropdown--hoverable" > < a href = "#" aria-haspopup = "true" aria-expanded = "false" role = "button" class = "navbar__link" > Resources< / a > < ul class = "dropdown__menu" > < li > < a class = "dropdown__link" href = "/features" > Features< / a > < / li > < li > < a class = "dropdown__link" href = "/tutorial" > Tutorials< / a > < / li > < li > < a class = "dropdown__link" href = "/extend" > Extend< / a > < / li > < / ul > < / div > < a class = "navbar__item navbar__link" href = "/blog" > Blog< / a > < / div > < div class = "navbar__items navbar__items--right" > < a href = "https://github.com/podman-desktop/podman-desktop" target = "_blank" rel = "noopener noreferrer" class = "hidden lg:flex items-center gap-2 px-4 py-[9px] border border-black dark:border-white rounded-lg navbar__item navbar__link font-medium min-w-[9rem]" > < svg aria-hidden = "true" focusable = "false" data-prefix = "fab" data-icon = "github" class = "svg-inline--fa fa-github" role = "img" xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 496 512" > < path fill = "currentColor" d = "M165.9 397 . 4c0 2-2 . 3 3 . 6-5 . 2 3 . 6-3 . 3 . 3-5 . 6-1 . 3-5 . 6-3 . 6 0-2 2 . 3-3 . 6 5 . 2-3 . 6 3- . 3 5 . 6 1 . 3 5 . 6 3 . 6zm-31 . 1-4 . 5c- . 7 2 1 . 3 4 . 3 4 . 3 4 . 9 2 . 6 1 5 . 6 0 6 . 2-2s-1 . 3-4 . 3-4 . 3-5 . 2c-2 . 6- . 7-5 . 5 . 3-6 . 2 2 . 3zm44 . 2-1 . 7c-2 . 9 . 7-4 . 9 2 . 6-4 . 6 4 . 9 . 3 2 2 . 9 3 . 3 5 . 9 2 . 6 2 . 9- . 7 4 . 9-2 . 6 4 . 6-4 . 6- . 3-1 . 9-3-3 . 2-5 . 9-2 . 9zM244 . 8 8C106 . 1 8 0 113 . 3 0 252c0 110 . 9 69 . 8 205 . 8 169 . 5 239 . 2 12 . 8 2 . 3 17 . 3-5 . 6 17 . 3-12 . 1 0-6 . 2- . 3-40 . 4- . 3-61 . 4 0 0-70 15-84 . 7-29 . 8 0 0-11 . 4-29 . 1-27 . 8-36 . 6 0 0-22 . 9-15 . 7 1 . 6-15 . 4 0 0 24 . 9 2 38 . 6 25 . 8 21 . 9 38 . 6 58 . 6 27 . 5 72 . 9 20 . 9 2 . 3-16 8 . 8-27 . 1 16-33 . 7-55 . 9-6 . 2-112 . 3-14 . 3-112 . 3-110 . 5 0-27 . 5 7 . 6-41 . 3 23 . 6-58 . 9-2 . 6-6 . 5-11 . 1-33 . 3 2 . 6-67 . 9 20 . 9-6 . 5 69 27 69 27 20-5 . 6 41 . 5-8 . 5 62 . 8-8 . 5s42 . 8 2 . 9 62 . 8 8 . 5c0 0 48 . 1-33 . 6 69-27 13 . 7 34 . 7 5 . 2 61 . 4 2 . 6 67 . 9 16 17 . 7 25 . 8 31 . 5 25 . 8 58 . 9 0 96 . 5-58 . 9 104 . 2-114 . 8 110 . 5 9 . 2 7 . 9 17 22 . 9 17 46 . 4 0 33 . 7- . 3 75 . 4- . 3 83 . 6 0 6 . 5 4 . 6 14 . 4 17 . 3 12 . 1C428 . 2 457 . 8 496 362 . 9 496 252 496 113 . 3 383 . 5 8 244 . 8 8zM97 . 2 352 . 9c-1 . 3 1-1 3 . 3 . 7 5 . 2 1 . 6 1 . 6 3 . 9 2 . 3 5 . 2 1 1 . 3-1 1-3 . 3- . 7-5 . 2-1 . 6-1 . 6-3 . 9-2 . 3-5 . 2-1zm-10 . 8-8 . 1c- . 7 1 . 3 . 3 2 . 9 2 . 3 3 . 9 1 . 6 1 3 . 6 . 7 4 . 3- . 7 . 7-1 . 3- . 3-2 . 9-2 . 3-3 . 9-2- . 6-3 . 6- . 3-4 . 3 . 7zm32 . 4 35 . 6c-1 . 6 1 . 3-1 4 . 3 1 . 3 6 . 2 2 . 3 2 . 3 5 . 2 2 . 6 6 . 5 1 1 . 3-1 . 3 . 7-4 . 3-1 . 3-6 . 2-2 . 2-2 . 3-5 . 2-2 . 6-6 . 5-1zm-11 . 4-14 . 7c-1 . 6 1-1 . 6
2024-09-02 07:18:02 +00:00
< p > You can create your own customized extension and add different UI components to your application front-end page. For example, you can add a new UI component of the type < code > Button< / code > . If you have your own template, you can use the < a href = "https://podman-desktop.io/storybook?id=button--docs" target = "_blank" rel = "noopener noreferrer" > ready-to-use code< / a > to add primary, secondary, loading, or other types of buttons.< / p >
< div class = "theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary" > < div class = "admonitionHeading_GCBg" > < span class = "admonitionIcon_L39b" > < svg viewBox = "0 0 14 16" > < path fill-rule = "evenodd" d = "M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" > < / path > < / svg > < / span > note< / div > < div class = "admonitionContent_pbrs" > < p > If you do not have hands-on experience and want to explore, use the < a href = "/docs/extensions/templates" > minimal, webview, or full template< / a > to create a Podman Desktop extension.< / p > < / div > < / div >
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "procedure" > Procedure< a href = "#procedure" class = "hash-link" aria-label = "Direct link to Procedure" title = "Direct link to Procedure" > < / a > < / h4 >
< ol >
< li > Add the < code > @podman-desktop/ui-svelte< / code > package to your application source code.< / li >
< li > Open the < a href = "https://podman-desktop.io/storybook" target = "_blank" rel = "noopener noreferrer" > storybook link< / a > .< / li >
< li > Go to < strong > Docs< / strong > and copy the code for a particular UI component.
< img decoding = "async" loading = "lazy" alt = "UI component" src = "/assets/images/button-component-47215d5030f968dcd4d52b13394c9366.png" width = "1023" height = "343" class = "img_SS3x" > < / li >
< li > Paste it in your UI source configuration file, such as < code > UIextension.svelte< / code > .< / li >
< li > Save the configuration changes.< / li >
< li > Run your extension and debug it if required.< / li >
< / ol >
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "verification" > Verification< a href = "#verification" class = "hash-link" aria-label = "Direct link to Verification" title = "Direct link to Verification" > < / a > < / h4 >
< ul >
< li > Check that the UI component is added in the webview of your extension.< / li >
2025-04-14 17:49:47 +00:00
< / ul > < / div > < footer class = "theme-doc-footer docusaurus-mt-lg" > < div class = "row margin-top--sm theme-doc-footer-tags-row" > < div class = "col" > < b > Tags:< / b > < ul class = "tags_Ow0B padding--none margin-left--sm" > < li class = "tag_DFxh" > < a class = "tag_otG2 tagRegular_s0E1" href = "/docs/tags/podman-desktop" > podman-desktop< / a > < / li > < li class = "tag_DFxh" > < a class = "tag_otG2 tagRegular_s0E1" href = "/docs/tags/extension" > extension< / a > < / li > < li class = "tag_DFxh" > < a class = "tag_otG2 tagRegular_s0E1" href = "/docs/tags/writing" > writing< / a > < / li > < li class = "tag_DFxh" > < a class = "tag_otG2 tagRegular_s0E1" href = "/docs/tags/web-components" > web-components< / a > < / li > < / ul > < / div > < / div > < div class = "row margin-top--sm theme-doc-footer-edit-meta-row" > < div class = "col" > < a href = "https://github.com/podman-desktop/podman-desktop/tree/main/website/docs/extensions/developing/adding-ui-components.md" target = "_blank" rel = "noopener noreferrer" class = "theme-edit-this-page" > < svg fill = "currentColor" height = "20" width = "20" viewBox = "0 0 40 40" class = "iconEdit_bHB7" 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" > < / path > < / g > < / svg > Edit this page< / a > < / div > < div class = "col lastUpdated_ydrU" > < / div > < / div > < / footer > < / article > < nav class = "pagination-nav docusaurus-mt-lg" aria-label = "Docs pages" > < a class = "pagination-nav__link pagination-nav__link--prev" href = "/docs/extensions/developing/adding-icons" > < div class = "pagination-nav__sublabel" > Previous< / div > < div class = "pagination-nav__label" > Adding icons< / div > < / a > < a class = "pagination-nav__link pagination-nav__link--next" href = "/docs/extensions/developing/command-palette" > < div class = "pagination-nav__sublabel" > Next< / div > < div class = "pagination-nav__label" > Command palette< / div > < / a > < / nav > < / div > < / div > < div class = "col col--3" > < div class = "tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop" > < / div > < / div > < / div > < / div > < / main > < / div > < / div > < / div > < footer class = "footer" > < div class = "container container-fluid" > < div class = "row footer__links" > < div class = "col footer__col" > < div class = "footer__title" > Documentation< / div > < ul class = "footer__items clean-list" > < li class = "footer__item" > < a class = "footer__link-item" href = "/docs/installation" > Installing Podman Desktop< / a > < / li > < li class = "footer__item" > < a class = "footer__link-item" href = "/docs/migrating-from-docker" > Migrating from Docker< / a > < / li > < li class = "footer__item" > < a class = "footer__link-item" href = "/docs/kubernetes" > Working with Kubernetes< / a > < / li > < li class = "footer__item" > < a class = "footer__link-item" href = "/docs/troubleshooting" > Troubleshooting< / a > < / li > < / ul > < / div > < div class = "col footer__col" > < div class = "footer__title" > Links< / div > < ul class = "footer__items clean-list" > < li class = "footer__item" > < a href = "https://github.com/podman-desktop/podman-desktop" target = "_blank" rel = "noopener noreferrer" class = "footer__link-item" > GitHub< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPrP" > < 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" > < / path > < / svg > < / a > < / li > < li class = "footer__item" > < a href = "https://discord.com/invite/x5GzFF6QH4" target = "_blank" rel = "noopener noreferrer" class = "footer__link-item" > Chat (bridged): #podman-desktop on Discord< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPrP" > < 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" > < / path > < / svg > < / a > < / li > < li class = "footer__item" > < a href = "https://github.com/podman-desktop/podman-desktop#communication" target = "_blank" rel = "noopener noreferrer" class = "footer__link-item" > Other ways to Communicate< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPrP" > < 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" > < / path > < / svg > < / a > < / li > < li class = "footer__item" > < a href = "https://g
< div class = "flex flex-col items-start text-left gap-4" >
< div class = "w-96 mt-8 mb-8" >
< img class = "dark:hidden" alt = "Cloud Native Computing Foundation" src = "/img/cncf-logo.svg" >
< img class = "hidden dark:inline" alt = "Cloud Native Computing Foundation" src = "/img/cncf-logo-dark.svg" >
< / div >
< div class = "text-sm" >
< p class = "mb-1" > We are a < a href = "https://cncf.io/" class = "underline" > Cloud Native Computing Foundation< / a > sandbox project.< / p >
< p class = "mb-1" > © Copyright Podman Desktop Contributors 2025. © 2025 The Linux Foundation. All rights reserved.< / p >
< p class = "mb-1" > The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our
< a href = "https://www.linuxfoundation.org/trademark-usage/" class = "underline" > Trademark Usage< / a > page.< / p >
< / div >
< / div >
< / div > < / div > < / div > < / footer > < / div >
2024-09-02 07:18:02 +00:00
< / body >
< / html >
