JSPM

Shared mixins, tools, etc. that support developing Spectrum Web Components.

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

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

A collection of utilities shared across the other packages.

A collection of React hooks used across some of the UI-Kit components.

An inline spacing component renders its children horizontally with a consistent spacing between them.

`sp-theme` applies a Spectrum theme by using CSS custom properties to set default sizes & colors for all of the components in its scope. The Spectrum design system provides four color themes (`lightest`, `light`, `dark`, and `darkest`) and two different s

Constraints are container elements with a configurable constraint size, like width or height.

Core package of the commercetools design system.

A React component that you can use to wrap your buttons in an accessible <button/> element.

The Text component implements the typography elements such as headings, paragraphs, etc.

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

[](https://badgen.net/github/release/nado1001/sd-tailwindcss-transformer) [![Test](https://github.com/nado1001/sd-tailwindcss-transformer/actions/workflows/test.yml/badge.svg

An `<sp-action-button>` represents an action a user can take.

Web component implementation of a Spectrum design CloseButton

A stack spacing component renders its children vertically with a consistent spacing between them.

An inset squish spacing component provides a consistent padding to the inner component, with horizontal padding being proportionally bigger than the vertical padding.

ReactiveControllers for powering common UI patterns

Secondary Icon Buttons are "icon-only" buttons and a restricted version of the `<IconButton>`. They trigger an action when clicked (`onClick` prop). You must also pass a label for accessibility reasons.

Web component implementation of a Spectrum design ClearButton

A component to render error or warning messages within together with form fields.

An `<sp-progress-circle>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent both determinate and indeterminate progress, helping users understand the status of ongoing operations

HugeIcons React Component Library https://hugeicons.com

Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library of patterns built on top of the [Spectrum CSS](https://opensource.adobe.com/spectrum-css) specification. Styles for these components are ma

Utilities for working with select components.

Responsive, theme-based style props for Vanilla Extract

Decathlon Design System - Vitamin global CSS styles library

Decathlon Design System - Vitamin icons library

Flat buttons are minimal and a flat variation of primary and secondary buttons.

A preset of all the UI-Kit spacings components.

All SVG icons are rendered as React components.

Consta — дизайн-система для разработки интерфейсов, написана на [React](https://reactjs.org/).

The Label component represents the primitive label for a form field component.

Cards are used to display content and actions on a single topic.

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

Professionally crafted design system in React & Figma for building products of any scale and complexity

Primary buttons are used for a primary action on a page. You must also pass a label for accessibility reasons.

An inset spacing component provides a consistent padding to the inner component.

An `<sp-overlay>` element is used to decorate content that you would like to present to your visitors as "overlaid" on the rest of the application. This includes dialogs (modal and not), pickers, tooltips, context menus, et al.

Utilities for working with input components.

A collection of square outlined React icons with 0px radius and 1.5px stroke width, designed for use in React applications.

Icon buttons are icon-only buttons. They trigger an action when clicked (`onClick` prop). You must also pass a label for accessibility reasons.

A collection of square filled React icons with 0px radius and 1.5px stroke width, designed for use in React applications.

Build Design Systems with Knapsack

Stamps are visual labels which hold small amounts of information regarding an item. (E.g Indicating if a product is published in a list).

A collection of square outlined React icons with 0px radius and 1px stroke width, designed for use in React applications.

Notification components.

Secondary buttons are used in combination with a PrimaryButton and represent the secondary action.

An input component that works as checkbox input.

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

An input component getting a selection from the user.

All translation messages from the UI-Kit components.

Tooltips display informative text when users hover over or focus on an element.

Figmagic is the missing piece between DevOps and design: Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.

An `<sp-popover>` is used to display transient content (menus, options, additional actions etc.) and appears when clicking/tapping on a source (tools, buttons, etc.) It stands out via its visual style (stroke and drop shadow) and floats on top of the rest

Decathlon Design System - Vitamin specific CSS styles for tag component

Decathlon Design System - Vitamin specific CSS styles for tabs component

Decathlon Design System - Vitamin specific CSS styles for popover component

Decathlon Design System - Vitamin specific CSS styles for accordion component

Gravity UI base styling and components

A spinner animation to indicate loading state (e.g pending requests) for the user.

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>`](..

Decathlon Design System - Vitamin specific CSS styles for tooltip component

Decathlon Design System - Vitamin specific CSS styles for card component

Salute Design System blueprint

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

Decathlon Design System - Vitamin specific CSS styles for chip component

Decathlon Design System - Vitamin specific CSS styles for toggle component

Decathlon Design System - Vitamin specific CSS styles for snackbar component

A collection of square filled React icons with 0px radius and 1px stroke width, designed for use in React applications.

A RadioInput represents a group of options where only one option can be selected at a time.

Web component implementation of a Spectrum design Tray

Component to hide content offscreen while keeping it accessible. This is also helpful for testing purposes.

Decathlon Design System - Vitamin specific CSS styles for checkbox component

Decathlon Design System - Vitamin specific CSS styles for link component

Decathlon Design System - Vitamin specific CSS styles for select component

A component which allows building collapsible elements with an arbitrary height.

Decathlon Design System - Vitamin specific CSS styles for skeleton component

Decathlon Design System - Vitamin specific CSS styles for radio button component

Fully functional forms for Chakra UI.

Color, spacing, and typography primitives for the Primer Brand Design System

An `<sp-picker>` is an alternative to HTML's `<select>` element. Use [`<sp-menu-item>`](../menu-item) elements to outline the options that will be made available to the user when interacting with the `<sp-picker>` element.

An `<sp-link>` allow users to navigate to a different location. They can be presented in-line inside a paragraph or as a standalone text.

A component for rendering profile images

The Dropdown Menu component represents a component that triggers the rendering of a floating menu.

Shared UI Library for Ticketmaster

Sass variables, mixins, and functions for use in our components.

Utilities to work with time values for a calendar.

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

A component for rendering tabular data.

Decathlon Design System - Vitamin specific CSS styles for badge component

Decathlon Design System - Vitamin specific CSS styles for list component

Decathlon Design System - Vitamin specific CSS styles for search component

Decathlon Design System - Vitamin specific CSS styles for price component

Renders warnings based on configuration.

React utilities and helpers for Chakra UI

A modal manager for Chakra UI

Decathlon Design System - Vitamin specific CSS styles for button component

Salute Design System / React UI kit for web applications

Decathlon Design System - Vitamin Svelte components library

Decathlon Design System - Vitamin specific CSS styles for alert component

Decathlon Design System - Vitamin specific CSS styles for navbar component

`<sp-checkbox>` allow users to select multiple items from a list of independent options, or to mark an individual option as selected.

`sp-textfield` components are text boxes that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.

A collection of round outlined React icons with 3px radius and 2px stroke width, designed for use in React applications.

The FieldLabel component represents the label for a field in a form.

Renders errors based on configuration.

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

Decathlon Design System - Vitamin specific CSS styles for modal component

Decathlon Design System - Vitamin specific CSS styles for progressbar component

Decathlon Design System - Vitamin specific CSS styles for text input component

Decathlon Design System - Vitamin specific CSS styles for toast component

A panel to collapse and expand your content.

Utilities to work with values for a calendar.

A controlled text input component for single-line strings with validation states.

Saas UI theme package

Decathlon Design System - Vitamin specific CSS styles for rating component

Decathlon Design System - Vitamin specific CSS styles for loader component

Decathlon Design System - Vitamin specific CSS styles for alert component

Decathlon Design System - Vitamin specific CSS styles for breadcrumb component

Decathlon Design System - Vitamin specific CSS styles for quantity component

Decathlon Design System - Vitamin specific CSS styles for divider component

Components for navigating through pages of items

The Grid component can be used to implement layouts using CSS-Grid.

A controlled text input component for single-line strings with validation states.

A tag is often used for items that need to be labeled or categorized.

Saas UI react hooks

Production-grade Preact components that replicate the Figma UI design

An `<sp-underlay>` provides a visual layer between overlay content and the rest of your application. It is commonly used with modal dialogs and other overlay elements to create a visual separation and prevent interaction with the background content while

Orbit tailwind preset which is based on orbit-design-tokens

Foundational pieces of StrataKit

Utilities to work with localized data.

A controlled input component for numbers with validation states.

A controlled input component with validation states and a label getting a selection from the user.

This component enhances the DataTable component and additionally provides a UI and state management to handle configuration of the table such as column manager.

Links are used either to link to other UI routes, or to link to external pages. This component is a very thin wrapper over either a React Router Link, or a normal HTML <a> tag.

`sp-button-group` delivers a set of buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons.

the design system for AMBOSS products

Saas UI - The React component library for startups.

`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

A controlled text input component for multi-line strings with validation states.

Web component implementation of a Spectrum design HelpText

An input component getting a selection from an asynchronously loaded list from the user.

A controlled text input component for localized single-line strings with validation states.

The easiest, free and open-source Tailwind CSS component library with semantic classes.

A search select input component built on top of `@commercetools-uikit/async-select-input` to asynchronously load results (options) using the keyword that the user has entered.

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

A package of extendable web components

The `DateInput` component allows the user to select a date. It formats the selected date depending on the users' locale.

Salute Design System / React UI kit for SDDS CS web applications

The `<sp-search>` element delivers a single input field with a "reset" button as well as a mangifying glass icon with which to power search interactions.

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

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-

Salute Design System / React UI kit for SDDS DFA web applications

A controlled text input component for localized single-line strings with validation states.

A controlled input component for money values with validation states.

Web component implementation of a Spectrum design NumberField

The `DateRangeInput` component allows the user to select a date range.

`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

Data-table Component

Easy to use and scalable keyboard shortcuts for React.

The `ToggleInput` component allows a single settings option to be turned on or off.

Easy manageable keyboard shortcuts for Chakra UI

JSON-Schema based UI and Form Generator for React, for any Design-System

A controlled input component with validation states and a label getting a selection from an asynchronously loaded list from the user.

An `<sp-switch>` is used to turn an option on or off. Switches allow users to select the state of a single option at a time. Use a switch rather than a checkbox when activating (or deactivating) an option, instead of selecting.

Miro UI Kit for building Apps & plugins

Saas UI - The React component library for startups.

Add CHANGELOG.md info to Knapsack

Nprogress Component

Salute Design System / React UI kit for PLASMA GIGA web applications

The `DateTimeInput` component allows the user to select a date. This component also supports multiple date selection.

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.

A controlled text input component for multi-line strings with validation states and a label.

An `<sp-progress-bar>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.

A controlled search text input component for single-line strings with validation states.

A controlled date input component for single date, with validation states and a label.

An input component getting a selection from the user, and where options can also be created by the user.

A controlled radio input component with validation states and a label.

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

An `<sp-avatar>` is a great way to feature a visual representation of a user.

Salute Design System / React UI kit for SDDS SERV web applications

A controlled text input component for localized rich text input with validation states.

A controlled date time input component for single date, with validation states and a label.

Salute Design System / React UI kit for Assistant web applications

Web component implementation of a Spectrum design Badge

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

Web component implementation of a Spectrum design InfieldButton

Salute Design System / React UI kit for business-related web applications.

Handcrafted Library of Tailwind CSS UI Components & Blocks for HTML, React and Vue.

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

A controlled selectable search input component for single-line strings with validation states.

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.

Utilities for working with rich-text components.

A collection of icons for Natura & Co. Design System

A preset of all the UI-Kit components.

A search select field built on top of search select input, allowing users to asynchronously search for options

Salute Design System / React UI kit for SDDS NETOLOGY web applications

UI Kit Core React components.

Containers, rows, and columns for creating page layout.

Immutable, atomic CSS classes to rapidly build product

A UI library with CSS and vanilla JS that match the Figma UI for building plugins.

Add tooltips built entirely in CSS to nearly any element.

Salute Design System / React UI kit for SDDS FinPortal web applications

A controlled text input component for localized multi-line strings with validation states.

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

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

The TimeInput component allows the user to select a time.

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

Base theme preset for use with Rebass

CSS to reset the browsers default styles

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

A collection of square outlined React icons with 0px radius and 2px stroke width, designed for use in React applications.

Web component implementation of a Spectrum design AlertDialog

Decathlon Design System - Vitamin assets library

The `opacity-checkerboard` class is used to highlight opacity. Leverage these styles in your component as outlined below to unify you application's visuals with those delivered by various Spectrum Web Components.

A collection of square filled React icons with 0px radius and 2px stroke width, designed for use in React applications.

An input component getting a selection from an asynchronously loaded list from the user, and where options can be created by the user.

A collection of Tailwind CSS components for React

A controlled input component with validation states and a label getting a selection from the user, and where options can also be created by the user.

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.

A controlled input component for money values with validation states and a label.

Link buttons are similar to Flat buttons but work as link elements.

ViewComponents of the Primer Design System for OpenProject

Salute Design System / Internal React UI kit for web applications

A preset of all the UI-Kit buttons components.

A preset of all the UI-Kit fields components.

A controlled input component for localized money values with validation states.

An input component with validation states and a label getting a selection from an asynchronously loaded list from the user, and where options can be created by the user.

A controlled date input component for a date range, with validation states and a label.

Web component implementation of a Spectrum design Table

A controlled text input component for passwords with validation states.

A controlled rich text input component for rich text with validation states.

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

A controlled input component for numbers with validation states and a label.

A controlled text input component for localized multi-line strings with validation states.

NEXT Design System icons packaged as a set of React components.

Salute Design System / React UI kit for SDDS SCAN web applications

Web component implementation of a Spectrum design Grid

The Spectrum CSS typography component

UI Kit utilities package.

A comprehensive Notion-inspired design system built with React, TypeScript, and Tailwind CSS

A reusable React component library and design system with TypeScript support, built on Vite for seamless integration and optimized performance.

A module for creating rounded-corner boxes with options for headers, lists, and footers.

A controlled date input component for single date.

An `<sp-illustrated-message>` displays an illustration icon and a message, usually in an empty state or on an error page. It is also used inside a DropZone.

Singular purpose and flexible navigation elements.

ViewSwitchers allow users to toggle between two or more different views of the same, similar or related content items within the same space on screen.

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 DropZone might be used in an upload workflow to enable the user to drop a file from their operating system into the DropZone, w