|
@spectrum-web-components/accordion
|
The `<sp-accordion>` element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a |
Apache-2.0 |
11
greenflagged
/ 433 total
|
|
@spectrum-web-components/action-bar
|
A `<sp-action-bar>` delivers a floating action bar that is a convenient way to deliver stateful actions in cases like selection mode. `<sp-action-bar>` can be deployed in two variants beyond the default: `[varient="fixed"]` to position the element in rela |
Apache-2.0 |
11
greenflagged
/ 433 total
|
|
@spectrum-web-components/action-button
|
An `<sp-action-button>` represents an action a user can take. |
Apache-2.0 |
6
greenflagged
/ 425 total
|
|
@spectrum-web-components/action-group
|
`sp-action-group` delivers a set of action buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons. The `compact` attribute merges these buttons so that they are visually joined to clarify their relations |
Apache-2.0 |
9
greenflagged
/ 434 total
|
|
@spectrum-web-components/action-menu
|
An `<sp-action-menu>` is an action button that triggers an overlay with `<sp-menu-items>` for activation. Use an `<sp-menu>` element to outline the items that will be made available to the user when interacting with the `<sp-action-menu>` element. By defa |
Apache-2.0 |
11
greenflagged
/ 498 total
|
|
@spectrum-web-components/alert-banner
|
Web component implementation of a Spectrum design AlertBanner |
Apache-2.0 |
11
greenflagged
/ 243 total
|
|
@spectrum-web-components/alert-dialog
|
Web component implementation of a Spectrum design AlertDialog |
Apache-2.0 |
11
greenflagged
/ 264 total
|
|
@spectrum-web-components/asset
|
Use an `<sp-asset>` element to visually represent a file, folder or image in your application. File and folder representations will center themselves horizontally and vertically in the space provided to the element. Images will be contained to the element |
Apache-2.0 |
8
greenflagged
/ 414 total
|
|
@spectrum-web-components/avatar
|
An `<sp-avatar>` is a thumbnail representation of an entity, such as a user or an organization. Avatars can have a defined image, which is usually uploaded by a user. |
Apache-2.0 |
11
greenflagged
/ 428 total
|
|
@spectrum-web-components/badge
|
Web component implementation of a Spectrum design Badge |
Apache-2.0 |
5
greenflagged
/ 342 total
|
|
@spectrum-web-components/base
|
— |
— |
8
greenflagged
/ 403 total
|
|
@spectrum-web-components/breadcrumbs
|
Web component implementation of a Spectrum design Breadcrumbs |
Apache-2.0 |
9
greenflagged
/ 239 total
|
|
@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 it versions all of the Spectrum Web Components packages collect |
Apache-2.0 |
8
greenflagged
/ 522 total
|
|
@spectrum-web-components/button
|
An `<sp-button>` represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. Buttons in Spectrum have several variations for different uses and multiple levels of loudness for various atte |
Apache-2.0 |
11
greenflagged
/ 469 total
|
|
@spectrum-web-components/button-group
|
`sp-button-group` delivers a set of buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons. |
Apache-2.0 |
9
greenflagged
/ 429 total
|
|
@spectrum-web-components/card
|
An `<sp-card>` represents a rectangular card that contains a variety of text and image layouts. Cards are typically used to encapsulate units of a data set, such as a gallery of image/caption pairs. |
Apache-2.0 |
11
greenflagged
/ 472 total
|
|
@spectrum-web-components/checkbox
|
`<sp-checkbox>` allow users to select multiple items from a list of independent options, or to mark an individual option as selected. |
Apache-2.0 |
11
greenflagged
/ 462 total
|
|
@spectrum-web-components/clear-button
|
Web component implementation of a Spectrum design ClearButton |
Apache-2.0 |
11
greenflagged
/ 347 total
|
|
@spectrum-web-components/close-button
|
Web component implementation of a Spectrum design CloseButton |
Apache-2.0 |
11
greenflagged
/ 348 total
|
|
@spectrum-web-components/coachmark
|
`<sp-coachmark>` is a temporary message that educates users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour. |
Apache-2.0 |
8
greenflagged
/ 419 total
|
|
@spectrum-web-components/color-area
|
An `<sp-color-area>` allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel to create comprehensive color selection interfaces. |
Apache-2.0 |
11
greenflagged
/ 405 total
|
|
@spectrum-web-components/color-field
|
Web component implementation of a Spectrum design ColorField |
Apache-2.0 |
11
greenflagged
/ 251 total
|
|
@spectrum-web-components/color-handle
|
The `<sp-color-handle>` is used to select a color on an `<sp-color-area>`, `<sp-color-slider>`, or `<sp-color-wheel>`. It provides a draggable control point for precise color selection within color components. |
Apache-2.0 |
11
greenflagged
/ 400 total
|
|
@spectrum-web-components/color-loupe
|
An `<sp-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection. |
Apache-2.0 |
8
greenflagged
/ 397 total
|
|
@spectrum-web-components/color-slider
|
An `<sp-color-slider>` lets users visually change an individual channel of a color. The background of the `<sp-color-slider>` is a visual representation of the range of values a user can select from. This can represent color properties such as hues, color |
Apache-2.0 |
11
greenflagged
/ 409 total
|
|
@spectrum-web-components/color-wheel
|
An `<sp-color-wheel>` allows users to visually select the hue of a color on a circular track. It's commonly used together with other color components to create comprehensive color selection interfaces. |
Apache-2.0 |
11
greenflagged
/ 408 total
|
|
@spectrum-web-components/combobox
|
Web component implementation of a Spectrum design Combobox |
Apache-2.0 |
11
greenflagged
/ 254 total
|
|
@spectrum-web-components/contextual-help
|
Web component implementation of a Spectrum design ContextualHelp |
Apache-2.0 |
11
greenflagged
/ 242 total
|
|
@spectrum-web-components/core
|
— |
— |
5
greenflagged
/ 57 total
|
|
@spectrum-web-components/dialog
|
`sp-dialog` displays important information that users need to acknowledge. They appear over the interface and block further interactions. When used directly the `sp-dialog` element surfaces a `slot` based API for deep customization of the content to be in |
Apache-2.0 |
11
greenflagged
/ 444 total
|
|
@spectrum-web-components/divider
|
`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. |
Apache-2.0 |
6
greenflagged
/ 399 total
|
|
@spectrum-web-components/dropzone
|
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, |
Apache-2.0 |
11
greenflagged
/ 434 total
|
|
@spectrum-web-components/field-group
|
An `<sp-field-group>` element is used to layout a group of fields, usually `<sp-checkbox>` elements. It can be leveraged for `vertical` or `horizontal` organization of the fields that are supplied as its children. |
Apache-2.0 |
11
greenflagged
/ 410 total
|
|
@spectrum-web-components/field-label
|
An `<sp-field-label>` provides accessible labelling for form elements. Use the `for` attribute to outline the `id` of an element in the same DOM tree to which it should associate itself. Field labels give context to information that a user needs to input |
Apache-2.0 |
11
greenflagged
/ 419 total
|
|
@spectrum-web-components/grid
|
— |
— |
11
greenflagged
/ 341 total
|
|
@spectrum-web-components/help-text
|
Web component implementation of a Spectrum design HelpText |
Apache-2.0 |
11
greenflagged
/ 352 total
|
|
@spectrum-web-components/icon
|
— |
— |
11
greenflagged
/ 441 total
|
|
@spectrum-web-components/icons
|
The `<sp-icons-medium>` and `<sp-icons-large>` elements included in this package supply your application with the Spectrum CSS medium and large icons for use in the `<sp-icon>` element. Include at least one of these elements in a project that makes use of |
Apache-2.0 |
11
greenflagged
/ 426 total
|
|
@spectrum-web-components/icons-ui
|
— |
— |
7
greenflagged
/ 427 total
|
|
@spectrum-web-components/icons-workflow
|
— |
— |
3
greenflagged
/ 431 total
|
|
@spectrum-web-components/iconset
|
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 |
Apache-2.0 |
11
greenflagged
/ 423 total
|
|
@spectrum-web-components/illustrated-message
|
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). |
Apache-2.0 |
11
greenflagged
/ 451 total
|
|
@spectrum-web-components/infield-button
|
Web component implementation of a Spectrum design InfieldButton |
Apache-2.0 |
11
greenflagged
/ 259 total
|
|
@spectrum-web-components/link
|
— |
— |
11
greenflagged
/ 448 total
|
|
@spectrum-web-components/menu
|
— |
— |
11
greenflagged
/ 469 total
|
|
@spectrum-web-components/meter
|
An `<sp-meter>` is a visual representation of a quantity or achievement. The meter's progress is determined by user actions, rather than system actions. |
Apache-2.0 |
11
greenflagged
/ 422 total
|
|
@spectrum-web-components/modal
|
— |
Apache-2.0 |
11
greenflagged
/ 405 total
|
|
@spectrum-web-components/number-field
|
Web component implementation of a Spectrum design NumberField |
Apache-2.0 |
11
greenflagged
/ 387 total
|
|
@spectrum-web-components/opacity-checkerboard
|
— |
— |
11
greenflagged
/ 266 total
|
|
@spectrum-web-components/overlay
|
— |
— |
11
greenflagged
/ 476 total
|
|
@spectrum-web-components/picker
|
— |
— |
11
greenflagged
/ 436 total
|
|
@spectrum-web-components/picker-button
|
Web component implementation of a Spectrum design PickerButton |
Apache-2.0 |
11
greenflagged
/ 329 total
|
|
@spectrum-web-components/popover
|
— |
— |
7
greenflagged
/ 482 total
|
|
@spectrum-web-components/progress-bar
|
An `<sp-progress-bar>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc. By default, progress bars have a blue fill that shows the progress. |
Apache-2.0 |
11
greenflagged
/ 412 total
|
|
@spectrum-web-components/progress-circle
|
— |
— |
8
greenflagged
/ 398 total
|
|
@spectrum-web-components/radio
|
`<sp-radio>` and [`<sp-radio-group>`](../radio-group) allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare. |
Apache-2.0 |
11
greenflagged
/ 453 total
|
|
@spectrum-web-components/reactive-controllers
|
— |
— |
8
greenflagged
/ 337 total
|
|
@spectrum-web-components/search
|
The `<sp-search>` element is used for searching and filtering items. |
Apache-2.0 |
11
greenflagged
/ 464 total
|
|
@spectrum-web-components/shared
|
— |
— |
6
greenflagged
/ 436 total
|
|
@spectrum-web-components/sidenav
|
Side navigation allows users to locate information and features within the UI. It can be used for either hierarchical or flat navigation, and gives the ability to group navigable items categorically. Side navigation is an opportunity to prioritize content |
Apache-2.0 |
11
greenflagged
/ 453 total
|
|
@spectrum-web-components/slider
|
`<sp-slider>` allows users to quickly select a value within a range. They should be used when the upper and lower bounds of the range are invariable. |
Apache-2.0 |
7
greenflagged
/ 470 total
|
|
@spectrum-web-components/split-view
|
An `sp-split-view` element displays its first two direct child elements side by side (horizontal) or stacked (vertical with `vertical` attribute). The component automatically distributes the available space between the two panels. When the `resizable` att |
Apache-2.0 |
11
greenflagged
/ 398 total
|
|
@spectrum-web-components/status-light
|
An `<sp-status-light>` is a great way to convey semantic meaning, such as statuses and categories. It provides visual indicators through colored dots accompanied by descriptive text. |
Apache-2.0 |
8
greenflagged
/ 427 total
|
|
@spectrum-web-components/story-decorator
|
[](https://www.npmjs.com/package/@spectrum-web-components/story-decorator) [ an option, instead of selecting. |
Apache-2.0 |
7
greenflagged
/ 463 total
|
|
@spectrum-web-components/table
|
Web component implementation of a Spectrum design Table |
Apache-2.0 |
11
greenflagged
/ 338 total
|
|
@spectrum-web-components/tabs
|
The `<sp-tabs>` displays a list of `<sp-tab>` element children as `role="tablist"`. An `<sp-tab>` element is associated with a sibling `<sp-tab-panel>` element via their `value` attribute. When an `<sp-tab>` element is `selected`, the associated `<sp-tab- |
Apache-2.0 |
11
greenflagged
/ 439 total
|
|
@spectrum-web-components/tags
|
Web component implementation of a Spectrum design Tags |
Apache-2.0 |
11
greenflagged
/ 445 total
|
|
@spectrum-web-components/textfield
|
— |
— |
11
greenflagged
/ 462 total
|
|
@spectrum-web-components/theme
|
`<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 |
ISC |
3
greenflagged
/ 450 total
|
|
@spectrum-web-components/thumbnail
|
An `sp-thumbnail` can be used in a variety of locations as a way to display a preview of an image, layer, or effect. |
Apache-2.0 |
6
greenflagged
/ 395 total
|
|
@spectrum-web-components/toast
|
`<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. |
Apache-2.0 |
11
greenflagged
/ 457 total
|
|
@spectrum-web-components/tooltip
|
`<sp-tooltip>` allow users to get contextual help or information about specific components when hovering or focusing on them. |
Apache-2.0 |
11
greenflagged
/ 479 total
|
|
@spectrum-web-components/top-nav
|
`<sp-top-nav>` delivers site navigation, particularly for when that navigation will change the majority of the page's content and/or the page's URL when selected. All primary elements of an `<sp-top-nav>` should be directly accessible in the tab order, ty |
Apache-2.0 |
11
greenflagged
/ 432 total
|
|
@spectrum-web-components/tray
|
Web component implementation of a Spectrum design Tray |
Apache-2.0 |
7
greenflagged
/ 380 total
|
|
@spectrum-web-components/truncated
|
— |
— |
11
greenflagged
/ 249 total
|
|
@spectrum-web-components/underlay
|
— |
— |
6
greenflagged
/ 415 total
|
|
@spectrum-web-components/vrt-compare
|
[](https://www.npmjs.com/package/@spectrum-web-components/vrt-compare) [![How big is this package in your project?](https://img.shields.io/bundlephobia |
Apache-2.0 |
5
greenflagged
/ 392 total
|