JSPM

Responsive and accessible React UI components built with React and Emotion

The Sanity UI components.

Theme and components agnostic ChakraProvider

Chakra UI system primitives

Vaadin Material is a complete theme for Vaadin components, inspired by Google’s Material Design guidelines.

Lumo is a design system foundation for modern web applications, used by Vaadin components

Official React components built for Flowbite and Tailwind CSS

Joy UI is an open-source React component library that implements MUI's own design principles. It's comprehensive and can be used in production out of the box.

Unstyled components and primitives for building accessible web apps and design systems with SolidJS.

Common utilities and types for Kobalte.

The CSS implementation of GitHub's Primer Design System

A react component library for iTwinUI

HugeIcons Pro React Component Library https://hugeicons.com

Typography, spacing, and color primitives for Primer design system

ViewComponents for the Primer Design System

A universal & performant styling library for React Native, Next.js & React

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

An implementation of GitHub's Primer Design System using React

React primitive UI components built with Styled System

Responsive, theme-based style props for Vanilla Extract

The `SpectrumElement` base class as created by mixing `SpectrumMixin` onto `LitElement` adopts `dir` values from the `document` at connection time with a fallback to `lrt`. In a TypeScript context, it also enforces the presence of `this.shadowRoot` on ext

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:

`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

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

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

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

Web component implementation of a Spectrum design ClearButton

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

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

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

A collection of utilities shared across the other packages.

A collection of round filled React icons with 1px radius and 1.5px stroke width, designed for use in React Native / Expo applications.

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

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

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.

Web component implementation of a Spectrum design CloseButton

A collection of round outlined React icons with 1px radius and 1.5px stroke width, designed for use in React Native / Expo applications.

All SVG icons are rendered as React components.

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

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

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

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

ReactiveControllers for powering common UI patterns

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

A preset of all the UI-Kit spacings components.

HugeIcons React Component Library https://hugeicons.com

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

Utilities for working with input components.

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

Global Styles UI components for WordPress.

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

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

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

`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

Decathlon Design System - Vitamin icons library

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

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

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

Core package of the commercetools design system.

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

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.

Saas UI - The React component library for startups.

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

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

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

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

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

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

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 collection of square filled React icons with 0px radius and 2px stroke width, designed for use in React applications.

An input component that works as checkbox input.

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

React utilities and helpers for Chakra UI

Decathlon Design System - Vitamin global CSS styles library

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

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

Salute Design System / React UI kit for web applications

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

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

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

Foundational pieces of StrataKit

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

Salute Design System blueprint

Gravity UI base styling and components

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

Utilities for working with select components.

Web component implementation of a Spectrum design Tray

A component for rendering profile images

Renders errors based on configuration.

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

An input component getting a selection from the user.

Small, modular components for StrataKit

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

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

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

Saas UI - The React component library for startups.

Fully functional forms for Chakra UI.

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

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

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

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

A modal manager for Chakra UI

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

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.

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

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.

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

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

A panel to collapse and expand your content.

HugeIcons Pro React Native Component Library https://hugeicons.com

Easy to use and scalable keyboard shortcuts for React.

A controlled input component for numbers with validation states.

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

Salute Design System / React UI kit for Assistant web applications

The Spectrum CSS typography component

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

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

Components for navigating through pages of items

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

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

Build Design Systems with Knapsack

A package of extendable web components

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

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

Core tokens and utilities for F0 Design System

Nprogress Component

Utilities to work with localized data.

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.

Easy manageable keyboard shortcuts for Chakra UI

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

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

Add tooltips built entirely in CSS to nearly any element.

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

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

A Tailwind CSS plugin to bring Vuetify utility classes for autocomplete and migration use cases.

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

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

Relume Tailwind Config. A preset Tailwind config using the Relume design system.

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

Notification components.

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

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

A comprehensive UI component library built with React, TypeScript, and Tailwind CSS for LlamaIndex 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 component for rendering tabular data.

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.

[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).

Medium-sized component structures for the Strata design system

The `opacity-checkerboard` class provides a CSS utility that displays a checkerboard pattern background, commonly used to highlight transparent or semi-transparent areas in UI components. This visual indicator helps users distinguish between transparent a

The Spectrum CSS link component

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.

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

Renders warnings based on configuration.

`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

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

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

ViewComponents of the Primer Design System for OpenProject

Saas UI theme package

Decathlon Design System - Vitamin specific CSS styles for link component

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

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

Decathlon Design System - Vitamin specific CSS styles for checkbox component

Decathlon Design System - Vitamin specific CSS styles for select component

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

Decathlon Design System - Vitamin specific CSS styles for button component

All translation messages from the UI-Kit components.

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

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

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

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

Decathlon Design System - Vitamin specific CSS styles for skeleton component

Saas UI react hooks

Decathlon Design System - Vitamin specific CSS styles for loader component

Web component implementation of a Spectrum design HelpText

Decathlon Design System - Vitamin specific CSS styles for alert component

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

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

Decathlon Design System - Vitamin specific CSS styles for rating component

The Spectrum CSS divider component

Design system for Elmut project

Decathlon Design System - Vitamin specific CSS styles for breadcrumb component

Decathlon Design System - Vitamin specific CSS styles for divider component

Decathlon Design System - Vitamin specific CSS styles for quantity component

Web component implementation of a Spectrum design AlertDialog

Aura is a theme used by Vaadin components

Utilities to work with time values for a calendar.

The Spectrum CSS tokens package

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

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

Decathlon Design System - Vitamin specific CSS styles for progressbar component

Decathlon Design System - Vitamin specific CSS styles for modal component

Decathlon Design System - Vitamin specific CSS styles for alert component

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

Decathlon Design System - Vitamin specific CSS styles for toast component

Web component implementation of a Spectrum design Badge

Stylesheets for all components from the Amsterdam Design System and some general utilities. Use it to apply the visual design of the City of Amsterdam to your HTML elements or non-React components.

The `<sp-search>` element is used for searching and filtering items.

The Spectrum CSS icon component

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

Decathlon Design System - Vitamin Svelte components library

Decathlon Design System - Vitamin specific CSS styles for navbar component

Decathlon Design System - Vitamin specific CSS styles for tooltip component

An `<sp-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.

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

The Spectrum CSS textfield component

Decathlon Design System - Vitamin specific CSS styles for card component

Utilities to work with values for a calendar.

jayBird Design System - Enterprise component library and design system

Web component implementation of a Spectrum design NumberField

Shared UI Library for Ticketmaster

Salute Design System / Internal React UI kit for web applications

Icons for EC system of ECL

Decathlon Design System - Vitamin specific CSS styles for chip component

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

A preset of all the UI-Kit components.

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

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

Web component implementation of a Spectrum design Swatch

Decathlon Design System - Vitamin specific CSS styles for toggle component

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

Shared React contexts for the NEXT UI Kit.

The Spectrum CSS sidenav component

Web component implementation of a Spectrum design Tags

The Spectrum CSS popover component

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-

The Spectrum CSS dialog component

The Spectrum CSS progress circle component

Web component implementation of a Spectrum design Table

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

Decathlon Design System - Vitamin specific CSS styles for snackbar component

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

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

Kit Design

Data-table Component

A collection of icons for Natura & Co. Design System

ECL Form Labels

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.

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

ECL Links

Web component implementation of a Spectrum design AlertBanner

ECL Base

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

UI Kit styling solution.

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.

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