# How to use Spectrum components in UXP plugin? **URL:** \ **Category:** Adobe XD\ **Tags:** spectrum\ **Created:** [December 26, 2022, 1:13am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-components-in-uxp-plugin/5625 "2022-12-26T01:13:18Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\ **Post date:** [December 26, 2022, 1:13am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-components-in-uxp-plugin/5625/1 "2022-12-26T01:13:18Z")
I’m trying to convert an older plugin to spectrum components and they are not displaying correctly for me. I did a simple test by using this example code from [here](https://opensource.adobe.com/spectrum-web-components/components/action-menu/#selection.): ```auto Available shapes Square Triangle Parallelogram Star Hexagon Circle ``` But it doesn’t look correct in the plugin. Is there anything else I need to do? I don’t see any CSS when inspecting the elements. ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/e/ef9aae061e23897d4198ac1aa9365ab6d15cf0a8.png) Here’s the CSS from the element on the Spectrum website: ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/d/dfeebf1efb0fa2018628d44a119f83aeb5a6070e.png) When I tried importing the library it throws an error: `import { ActionMenu } from '@spectrum-web-components/action-menu';` > SyntaxError: Cannot use import statement outside a module Do I need to change anything in the manifest? ---
**Author:** ![Lichhuun](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/lichhuun/32/2541_2.png) [@Lichhuun](https://forums.creativeclouddeveloper.com/u/Lichhuun)\ **Post date:** [December 27, 2022, 11:34am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-components-in-uxp-plugin/5625/2 "2022-12-27T11:34:55Z")
Look like you did not install the package on **node\_modules** folder. ---
**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\ **Post date:** [December 27, 2022, 6:01pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-components-in-uxp-plugin/5625/3 "2022-12-27T18:01:19Z")
IIRC spectrum is supposed to be built in to UXP but maybe not? I’ll try that! ---
**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\ **Post date:** [December 27, 2022, 6:14pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-components-in-uxp-plugin/5625/4 "2022-12-27T18:14:54Z")
On the github side I don’t see anything about NPM install > **[GitHub - adobe/spectrum-web-components: Spectrum Web Components](https://github.com/adobe/spectrum-web-components)** > > Spectrum Web Components On the npm site when I [search](https://www.npmjs.com/search?q=%40spectrum-web-components), I see 88 packages on specific component types but I don’t see anything that would install the entire library but maybe I missed it? ![image](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/7/753051c85857b4ddd60d9a326e682652525e68f0.png) Welp! I might have found the library: > **[@spectrum-web-components/bundle](https://www.npmjs.com/package/@spectrum-web-components/bundle)** > > \`@spectrum-web-components/bundle\` is a master dependency that allows a project to import any and all of the Spectrum Web Components. While it is a great approach to prototyping, the fact that is versions all of the Spectrum Web Components packages... ---
**Author:** ![Lichhuun](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/lichhuun/32/2541_2.png) [@Lichhuun](https://forums.creativeclouddeveloper.com/u/Lichhuun)\ **Post date:** [December 28, 2022, 4:25am UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-components-in-uxp-plugin/5625/5 "2022-12-28T04:25:06Z")
Did you check this link: [Spectrum, Adobe’s design system](https://spectrum.adobe.com/page/action-bar/) ---
**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\ **Post date:** [December 28, 2022, 3:13pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-components-in-uxp-plugin/5625/6 "2022-12-28T15:13:19Z")
The part I’m confused on is how to get it to work in UXP. If I create a sp-switch component it shows up correctly. But if I try some other components they don’t. From what I’ve read Spectrum is built in, meaning I don’t have to import anything. But the example above didn’t work for me and I can’t find how to use it. I did download the node module bundle to my project. The links to the Spectrum mention adding theme settings to the body tag but UXP sets the body tag up automatically and IIUC the plugin author simply adds their UI components to it. In another post, it was mentioned that UXP doesn’t support all of the Spectrum components so I think that that might be the issue but that was a while ago. ---
**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\ **Post date:** [December 28, 2022, 3:49pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-components-in-uxp-plugin/5625/7 "2022-12-28T15:49:17Z")
I think XD might have exact same issue as Ps - Spectrum Web Components (WC) might actually be not supported. I believe you saw [my post about theme awareness](http://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-css-theme-awareness/4718), but that’s not the main issue. - Both [Ps](https://developer.adobe.com/photoshop/uxp/2022/design/user-interface/#uxp-spectrum-components) and [XD](https://developer.adobe.com/xd/uxp/design/user-interface/#uxp-spectrum-components) have the same docs, that you can use Spectrum WC - Also both [Ps](https://developer.adobe.com/xd/uxp/uxp/reference-spectrum/User%20Interface/) and [XD](https://developer.adobe.com/photoshop/uxp/2022/uxp/reference-spectrum/User%20Interface/) have separate docs on Spectrum UXP (not to mix up with Spectrum WC) I tried to make WC work on Ps, but failed miserably. Also, not only failed to make WC work, it seems that what actually is supported in Ps, is not Spectrum UXP either. Some supported components is a mix of UXP and WC. Very good example is [`sp-picker`](http://forums.creativeclouddeveloper.com/t/is-sp-picker-now-official/4159/2): - Docs say that `sp-dropdown` is supported in Spectrum UXP - Docs don’t even have `sp-picker` as supported component in Spectrum UXP - `sp-picker` is a pure Spectrum WC - Ps however supports `sp-picker` with a mixed inner HTML syntax of `sp-dropdown` - Ps does not work with `sp-dropdown` as one would expect So basically Spectrum is a mess (at least in Photoshop) and I couldn’t make WC properly work there at all. Almost all `sp-...` elements for me were trial and error to achieve what I want. Figured I’d share this experience, even if it’s for Ps ---
**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\ **Post date:** [January 1, 2023, 6:37pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-components-in-uxp-plugin/5625/8 "2023-01-01T18:37:33Z")
From the documentation it looks like only a few components are supported. I don’t recall seeing that document before. So if they aren’t supported natively they should be able to be imported manually but it looks like that’s not supported either. I npm installed the spectrum bundle and tried to import the library and getting error on startup: ```auto import { Tabs, Tab, TabPanel } from '@spectrum-web-components/tabs'; ``` Console message: > Cannot use import statement outside a module I tried to use require syntax like so ```auto const { Tabs, Tab, TabPanel } = require('@spectrum-web-components/tabs'); ``` and got one: > Plugin Error: Error loading plugin from path: /Users/user/Documents/plugin/ > Plugin Error: Module not found: _@_\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\* Parent module folder was: “/”. > at e.exports.\_throwModuleNotFound (uxp://uxp-internal/runtime\_scripts\_loader.js:2:17492) ---
**Author:** ![Erin\_Finnegan](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/erin_finnegan/32/100_2.png) [@Erin\_Finnegan](https://forums.creativeclouddeveloper.com/u/Erin_Finnegan)\ **Post date:** [January 3, 2023, 3:49pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-components-in-uxp-plugin/5625/9 "2023-01-03T15:49:51Z")
Early in 2022 I helped @pkrishna with a UXP survey for developers to gauge interest in Spectrum Web Components… I think that support is on the way, but perhaps not in place just yet. I believe it’s coming soon. ---
**Author:** ![indranil](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/indranil/32/2584_2.png) [@indranil](https://forums.creativeclouddeveloper.com/u/indranil)\ **Post date:** [January 17, 2023, 2:41pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-components-in-uxp-plugin/5625/10 "2023-01-17T14:41:06Z")
To add to what @Erin_Finnegan mentioned, I’d like to clarify a few things. Spectrum Web Components and Spectrum support in UXP are fundamentally different, in that, native Spectrum Widgets are in-built in UXP and don’t require any external imports. UXP only supports the ones listed here under [Typography](https://developer.adobe.com/xd/uxp/uxp/reference-spectrum/Typography/) and [User Interface](https://developer.adobe.com/xd/uxp/uxp/reference-spectrum/User%20Interface/). These native Spectrum Widgets are _implementations_ of Spectrum guidelines and expose a _subset of the functionality_ of the corresponding Spectrum Web Components but are **not built atop web components**. UXP has added initial support for Web Components commencing with v6.5 and should be rolling out support for the usage of a limited set of Spectrum **Web Components** (the ones listed [here](https://opensource.adobe.com/spectrum-web-components/)) with v7.0. ---
**Author:** ![medium\_jon](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/medium_jon/32/2371_2.png) [@medium\_jon](https://forums.creativeclouddeveloper.com/u/medium_jon)\ **Post date:** [January 25, 2023, 4:03pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-use-spectrum-components-in-uxp-plugin/5625/11 "2023-01-25T16:03:11Z")
Thanks @indranil ! I’m looking forward to having more of it available. I do wish that the web pages for both could include a blurb about the differences between them as per @Karmalakas experience.