podman-desktop/website/docs/extensions/developing/adding-ui-components.md

sidebar_position	title	description	tags	keywords
5	Adding UI components	Adding different components in UI	podman-desktop extension writing web-components	podman desktop extension writing web-components

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.
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.