Spectrum Web Component

Since UXP v7.0

To understand Spectrum Web Components (popularly known as SWC), you must first familiarize yourself with

• Web components: HTML5 Web technology that lets you define custom HTML tags.
• Spectrum: An open-source design language and guidelines provided by Adobe.

Spectrum Web Components are open-source Adobe Spectrum-styled Web Components. UXP v7.0 introduces the support for Web Components and Spectrum Web Components (SWC).

Getting started

---

Step 1: Enable SWC in manifest.json

• Use manifestVersion version 5 or above
• Enable the enableSWCSupport feature flag

"manifestVersion": 5,
 "host": [
   {
     "app": "PS",
     "minVersion": "24.4"
   }
 ],
 "featureFlags": {
   "enableSWCSupport": true
 }
CopyCopied to your clipboard
1"manifestVersion": 5,
2 "host": [
3   {
4     "app": "PS",
5     "minVersion": "24.4"
6   }
7 ],
8 "featureFlags": {
9   "enableSWCSupport": true
10 }

Step 2: Install the component. For example,

npm install @swc-uxp-wrappers/button
CopyCopied to your clipboard
npm install @swc-uxp-wrappers/button

Step 3: Import the component

import '@swc-uxp-wrappers/button/sp-button.js';
CopyCopied to your clipboard
import '@swc-uxp-wrappers/button/sp-button.js';

<sp-button variant="primary">I'm a button</sp-button>
CopyCopied to your clipboard
<sp-button variant="primary">I'm a button</sp-button>

Sample plugin

---

The following samples are available for you to get started quickly

Photoshop

• Photoshop SWC starter plugin
• Photoshop React-based SWC starter plugin (since UXP v7.3).

InDesign

• InDesign SWC starter plugin
• InDesign React-based SWC starter plugin (since UXP v7.3).

Make sure you follow the README of the above plugins.

List of supported SWC

---

Refer to the table below for the list of the components and their variants.

The status color of each variant represents its development state:
🟢 (Ready) Component and variants are working as per the specs of the latest SWC(web) version.
🟠 (Known Issues) Component/Variants have known issues and the fixes are in the pipeline.
🌑 (Pending) Component/Variants have issues due to missing UXP core platform features. Will be addressed only in later releases.

🔵 (N/A) Versions of locked Component/Variants do not support the variant. This would be fixed when UXP moves to newer versions of the SWC components.

Known Issues

There are some known issues across components which include :

1. RTL Direction parameter not working with sp-theme.
2. Keyboard accessibility issues with some components(tab-navigation issue with Tags, side-nav , Switch, Checkbox, Picker-button, radio, Toast, button and Spacebar action on buttons)

Components	Variants with status	@spectrum-web-component lib version	@swc-react lib versions (Since UXP v7.3)
Action-Bar	🟢 Fixed 🌑 Sticky	0.5.9	0.5.9-react.2993
Action-Button	🟢 Standard 🟢 Selected 🟢 Disabled 🟢 Quiet 🟢 Emphasized 🟢 Toggles (Since UXP v7.2) 🟢 hold-affordance	0.8.7	0.10.8-react.2993
Action-group	🟢 Standard 🟢 selects (single/multiple) (Since UXP v7.2) 🟢 Selected 🟠 Vertical	0.12.4	0.12.4-react.2993
Avatar	🟢 Standard	0.10.3	0.31.0
Banner	🟢 Info 🟢 Error 🟢 Corner placement	0.9.2	0.9.5-react.3120
Button (Since UXP v7.2)	🟢 Accent 🟢 Primary 🟢 Secondary 🟢 Negative 🟢 Black 🟢 White 🟢 Content with label 🟢 Content with icon 🟢 Content with svg	0.19.8	0.19.8-react.3029+c59ca07be
Button-group (Since UXP v7.2)	🟢 Horizontal 🟢 Vertical	0.10.8	0.10.6-react.3163
Card	🟢 Normal 🌑 Action 🟢 No preview Image 🟢 Quiet 🟢 Gallery 🟢 Horizontal 🟢 Linking	0.13.4	0.13.4-react.2993
Checkbox (Since UXP v7.2)	🟢 Standard 🟢 Emphasized 🟢 Sizes (s,m,l,xl) 🟢 Read only	0.14.0	0.14.6-react.2993
Dialog (Since UXP v7.2)	🟠 Standard 🟠 Dismissible 🟠 No Divider 🟠 Hero	0.11.12	0.11.12
Divider	🟢 Horizontal 🟢 Vertical	0.5.0	0.6.6-react.3163
Field-group (Since UXP v7.2)	🟢 Horizontal 🟢 Vertical 🟢 With help-text	0.8.2	0.8.3-react.3120
Field-Label	🟢 Standard 🟢 Start 🟢 End (Since UXP v7.2)	0.10.3	0.10.3-react.3029
Help-text (Since UXP v7.2)	🟢 Standard 🟢 Disabled 🟢 Icon 🟢 Negative 🟢 Sizes(s, m, l and xl)	0.2.7	0.2.7-react.2993
icons-workflow	🟢 Standard	0.9.5	0.9.5-react.2993
Icons-ui	🟢 Standard	0.9.5	0.9.5-react.2993
Illustrated-message	🟢 Standard	0.9.8	0.9.8-react.2993
Link	🟢 Standard 🟢 Secondary 🟢 Static colored 🟢 Quiet	0.14.1	0.14.1-react.3029
Menu	🟢 Standard 🟢 With pop-over 🟢 Selects = Single (Since UXP v7.2) 🟠 Selects = Multiple	0.16.9	0.16.9-react.3029
Menu-group	🟢 Standard	0.16.9	0.16.9-react.3029
Menu-item	🟢 Standard 🟢 Icon-slot 🟠 Value-slot 🌑 Sub menu	0.16.9	0.16.9-react.3029
Picker-button (Since UXP v7.2)	🟢 Standard	0.1.4	0.1.4-react.2993
Popover	🟢 No Tip 🟢 With Tip (Since UXP v7.2) 🟢 Dialog Popover	0.12.4	0.12.13
Radio (Since UXP v7.2) Radio-Group (Since UXP v7.2)	🔵 Sizes (S,M,L, XL) 🟠 Standard 🟢 Checked 🟢 Emphasized 🟢 With help-text radio group 🟢 Default	0.10.0	0.11.7-react.2993
sidenav (Since UXP v7.2)	🟢 Multi level 🟢 With Icon 🟢 Heading 🌑 manageTabIndex	0.13.7	0.13.6-react.3029
Switch (Since UXP v7.2)	🔵 Sizes (S,M,L, XL) 🟢 Default 🟢 Checked 🟢 ReadOnly 🟢 Emphasized	0.10.0	0.11.5-react.2993
Table (Since UXP v7.2)	🟢 Standard 🌑 Selects single 🌑 Selects multiple 🌑 Virtualized	0.1.7	0.1.10
Tags (Since UXP v7.2)	🟢 Sizes (S,M,L) 🟢 Default 🟢 Deletable 🟢 ReadOnly 🟢 With Icon 🟠 With avatar	0.10.1	0.10.3-react.3120
Textfield (Since UXP v7.2)	🟠 Standard 🟠 Valid 🟠 Invalid 🟠 Quiet 🟠 With Types (Phone/Password) 🟠 Help text 🌑 Multiline (Textarea)	0.13.8	0.13.11-react.3163
Toast (Since UXP v7.2)	🟢 Default 🟢 Negative 🟢 Positive 🟢 Info 🟢 With action 🟢 Wrapping	0.11.9	0.11.11-react.3163
Tooltip (Since UXP v7.2)	🟢 Standard 🟢 Informative 🟢 Positive 🟢 Negative 🌑 Overlaid	0.11.9	0.11.13