JSPM

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.

Saas UI - The React component library for startups.

Web component implementation of a Spectrum design Tags

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

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

A package of extendable web components

`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

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.

UI Kit Core React components.

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

Web component implementation of a Spectrum design HelpText

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

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

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

Immutable, atomic CSS classes to rapidly build product

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

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

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

Easy to use and scalable keyboard shortcuts for React.

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

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-

Easy manageable keyboard shortcuts for Chakra UI

`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

A collection of Tailwind CSS components for React

the design system for AMBOSS products

Web component implementation of a Spectrum design NumberField

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

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

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

Data-table Component

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

A render-prop component to manage a toggle state

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.

Add CHANGELOG.md info to Knapsack

Miro UI Kit for building Apps & plugins

UI Kit utilities package.

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.

Chakra UI - Date Picker Component

Salute Design System / React UI kit for Assistant web applications

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

Small, modular components for StrataKit

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

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

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

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

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.

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

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.

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

A collection of icons for Natura & Co. Design System

Web component implementation of a Spectrum design Badge

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

Web component implementation of a Spectrum design InfieldButton

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

Utilities for working with rich-text components.

The `<sp-color-handle>` is used to select a colour on an `<sp-color-area>`, `<sp-color-slider>`, or `<sp-color-wheel>`. It functions similarly to the handle on an `<sp-slider>`.

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

Add tooltips built entirely in CSS to nearly any element.

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

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

Containers, rows, and columns for creating page layout.

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

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

Instill AI's frontend toolkit

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

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.

Decathlon Design System - Vitamin assets library

The Spectrum CSS dialog component

Base theme preset for use with Rebass

The TimeInput component allows the user to select a time.

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

CSS to reset the browsers default styles

A preset of all the UI-Kit fields components.

An `<sp-color-wheel>` lets users visually change an individual channel of a color on a circular track.

ViewComponents of the Primer Design System for OpenProject

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

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

Web component implementation of a Spectrum design Table

The Spectrum CSS card component

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

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.

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

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.

ECL EC Breadcrumb

A preset of all the UI-Kit buttons components.

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

The Spectrum CSS typography component

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

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.

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

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

A controlled date input component for single date.

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

Web component implementation of a Spectrum design Grid

Singular purpose and flexible navigation elements.

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

The Spectrum CSS page component

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

The Spectrum CSS button component

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

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

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

A preset of all the UI-Kit inputs components.

Style individual form controls and utilize common layouts.

A module for creating dynamically resizable elements that always sit on the same horizontal line.

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

The Spectrum CSS search component

A collection of buttons used for primary and secondary actions.

Salute Design System / Internal React UI kit for web applications

The `QuickFilters` component displays filter controls.

Decathlon Design System - Vitamin CSS Tailwind preset

Build Accessible and Responsive Vue.js websites and applications with speed ⚡️

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

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

An `sp-thumbnail` can be used in a variety of locations as a way to display a preview of an image, layer, or effect. `sp-thumbnail` elements are not keyboard-focusable since they're intended to be used inside of a component that a user sets focus to (such

Design system library by @malt

Leviathan Tarik Design System (tokens, utils, atoms)

A controlled password input component.

Web component implementation of a Spectrum design Swatch

The Spectrum CSS tooltip component

An `sp-split-view` element delivers its first two direct child elements in a horizontal or vertical (`<sp-split-view vertical>`) orientation that distributes the available page real estate as per the supplied attribute API. When leveraging the resizable a

UI Kit styling solution.

A beautiful, minimalistic React + Tailwind UI framework for SaaS applications

The Spectrum CSS action button component

A low-level SCSS library for building robust token-driven design systems at scale.

ECL Links

A dropdown component with any number of action, where the first action of the dropdown can be triggered without opening the dropdown itself.

Shared React contexts for the NEXT UI Kit.

Basic styles for user profile avatars.

ECL Search form

A progress bar component used to visualize the progression of an extended operation

The Spectrum CSS checkbox component

ECL Form Labels

Labels add metatdata or indicate status of items and navigational elements.

Fluid Design Tokens

The `Filters` component displays filter controls.

CSS stylesheets for Primer Brand components

Decathlon Design System - Vitamin React components library

The Spectrum CSS link component

The Spectrum CSS icon component

Blankslates are for when there is a lack of content within a page or section.

The Spectrum CSS divider component

Marketing specific immutable, atomic CSS classes

Web component implementation of a Spectrum design ContextualHelp

Typography for marketing websites at GitHub

Shorten text with an ellipsis.

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

Planview design system icons

Logo for EC system of ECL

The Spectrum CSS textfield component

The Spectrum CSS table component

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

Fluid Design System React

Breadcrumb navigation for pages with parents / grandparents.

ECL EC Feedback messages

Web component implementation of a Spectrum design PickerButton

Flash messages, or alerts, inform users of successful or pending actions.

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

Medium-sized component structures for the Strata design system

A Linear inspired Chakra UI theme

`@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 is versions all of the Spectrum Web Components packages collect

ECL EC Buttons

<p align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://github.com/shuriken-ui/.github/assets/86636408/278e3026-1997-4e01-9457-20772adbce31"> <source media="(prefers-color-scheme: light)" srcset="https://github.

The Spectrum CSS progress bar component

A comprehensive Svelte 5 component library with 187+ components focused on accessibility, ADHD-optimized design, and full SSR compatibility. Features specialized bundles for agent/AI interfaces, knowledge management, therapeutic tools, and advanced data v

Responsive and accessible React UI components built with React and Emotion

The Spectrum CSS tokens package

React component library for Schematic's icon system with TypeScript support

The Spectrum CSS stepper component

Description text to help the user know what to do.

A TailwindCSS plugin for styling Kobalte components with data-* attributes by using modifiers like ui-expanded:*

The Spectrum CSS menu component

Buttons for marketing websites at GitHub

<p align="center"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://github.com/shuriken-ui/.github/assets/86636408/278e3026-1997-4e01-9457-20772adbce31"> <source media="(prefers-color-scheme: light)" srcset="https://github.

The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.

A comprehensive UI component library built with React, TypeScript, and Tailwind CSS for LlamaIndex applications

ITS Just UI - The easiest and best React UI component library. Modern, accessible, and customizable components built with TypeScript and Tailwind CSS. Simple to use, production-ready components for building beautiful user interfaces with ease.

Une bibliothèque de thèmes React moderne avec support Tailwind CSS

Patreon Studio Design System

Styles to display tabular data for marketing websites at GitHub.

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

ECL Grid

Set of shared utilities from Planview's Design System

The Spectrum CSS underlay component

The Spectrum CSS actiongroup component

Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS

The Spectrum CSS picker component

The Spectrum CSS accordion component

The Spectrum CSS progress circle component

Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.

The Spectrum CSS popover component

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

ECL Base

The Spectrum CSS buttongroup component

The Spectrum CSS modal component

The Spectrum CSS toast component

Icons for EC system of ECL

All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.

ECL EC Form group

The Spectrum CSS dropzone component

ECL EC Table Specs

The Spectrum CSS in-line alert component

A component design system for LifeSG web apps

Web component implementation of a Spectrum design Breadcrumbs

The Spectrum CSS tabs component

Utility and component-centric design system based on Bootstrap for fast, responsive UI development.

ECL EC Breadcrumb Standardised

The Spectrum CSS statuslight component

A Light Box is React component that displays a light box with a content area and a close button from the ZenithUI ecosystem.

The Spectrum CSS illustratedmessage component

Utility-first CSS for the future

A nice, consistent way to display branch names.

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.

OE - BCL icon

Core tokens and utilities for Factorial One Design System

The Spectrum CSS sidenav component

The Spectrum CSS fieldlabel component

The Spectrum CSS switch component

Styles to create distinct sections of marketing pages at GitHub.

⚡ Ultra-lightweight React component library with design tokens, multi-brand theming, and TypeScript support. Zero heavy dependencies - perfect for production apps.

The Spectrum CSS radio component

EC Footer

Material-UI Binding for UI-Schema

EC Language list

ECL Icons -> EC flavor

NorthStar Design System v2

Implementation of sharable components from Planview's Design System

The Spectrum CSS slider component

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

All icons from the Amsterdam Design System as React components. Use it to use the correct icons in your React project.

ECL EC Timeline

OE - BCL spinner

Implementation of Planview Design system form

UI components from Wonderflow's Wanda design system

Resources, components, design guidelines and tooling for Mindvalley's design system

The Spectrum CSS avatar component

The React implementation of the Oxygen Design System

The Spectrum CSS Pagination component

ECL EC Accordion

OE - BCL button

OE - BCL bootstrap 5 sources

All assets from the Amsterdam Design System. Use it to include the correct fonts, icons or logos in your website or application.

A modern, lightweight toast notification system for React applications. ZenithUI Toast provides a simple and customizable way to display notifications, alerts, and messages to users with smooth animations and flexible styling options.