Skip to main content

Adding UI components

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 Button . If you have your own template, you can use the ready-to-use code to add primary, secondary, loading, or other types of buttons.

note

If you do not have hands-on experience and want to explore, use the minimal, webview, or full template to create a Podman Desktop extension.

Procedure​

  1. Add the @podman-desktop/ui-svelte package to your application source code.
  2. Open the storybook link.
  3. Go to Docs and copy the code for a particular UI component. UI component
  4. Paste it in your UI source configuration file, such as UIextension.svelte.
  5. Save the configuration changes.
  6. Run your extension and debug it if required.

Verification​

  • Check that the UI component is added in the webview of your extension.