An `<sp-illustrated-message>` displays an outline illustration and a message, usually in an empty state or on an error page. It is also used inside a [DropZone](/components/dropzone).

UXP wrapper of the @spectrum-web-components/illustrated-message component

React and Next.js wrapper of the @spectrum-web-components/illustrated-message component

A `<sp-dropzone>` is an area on the screen into which an object can be dragged and dropped to accomplish a task. For example, a drop zone might be used in an upload workflow to enable the user to drop a file from their operating system into the drop zone,

Web component implementation of a Spectrum design AlertDialog

`<sp-tooltip>` allow users to get contextual help or information about specific components when hovering or focusing on them.

Internationalized message formatting and locale negotiation

`<sp-toast>` elements display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken.

Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library implementing Adobe's Spectrum design system. This package defines the CSS custom properties that implement design tokens from [Spectrum Tok

Deliver [Spectrum Workflow Icons](https://spectrum.adobe.com/page/icons/) as either:

Deliver [Spectrum UI Icons](https://spectrum.adobe.com/page/icons/) as either:

UI5 Web Components: webcomponents.fiori

The `@spectrum-web-components/shared` package provides essential base classes, mixins, and utilities that support developing Spectrum Web Components. This package contains foundational tools for focus management, slot observation, accessibility enhancemen

An `<sp-menu>` is used for creating a menu list. The various elements inside a menu are given as [`<sp-menu-group>`](../menu-group), [`<sp-menu-item>`](../menu-item), or `<sp-menu-divider>`. Often a `<sp-menu>` element will appear in a [`<sp-popover>`](..

`<sp-theme>` provides Spectrum design tokens (CSS custom properties) to everything in its DOM scope. Components inside a theme use these tokens to render correctly. The element itself does not visually “apply” styles to your app; it exposes the tokens so

`<sp-icon>` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `<sp-icon>` will subsequently check for its `src` attribute which could populate the icon via a

The `SpectrumElement` base class as created by mixing `SpectrumMixin` onto `LitElement` provides text direction support via the CSS `:dir()` pseudo-class, which automatically inherits directionality from the DOM hierarchy. In a TypeScript context, it also

Web component implementation of a Spectrum design HelpText

Extend either the `Iconset` or `IconsetSVG` exports of this package to supply your application with a custom icon set to power the use of `<sp-icon>` elements throughout. Give your new icon set a custom name, and you'll be ready to supply them as `<sp-ico

`sp-divider` brings clarity to a layout by grouping and dividing content that exists in close proximity. It can also be used to establish rhythm and hierarchy.