@commercetools-uikit/date-range-input
The `DateRangeInput` component allows the user to select a date range.
Found 4234 results for design-system
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.
Add CHANGELOG.md info to Knapsack
JSON-Schema based UI and Form Generator for React, for any Design-System
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.
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.
Salute Design System / React UI kit for PLASMA GIGA 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
Miro UI Kit for building Apps & plugins
UI Kit utilities package.
Salute Design System / React UI kit for business-related web applications.
Chakra UI - Date Picker Component
Handcrafted Library of Tailwind CSS UI Components & Blocks for HTML, React and Vue.
A controlled search text input component for single-line strings with validation states.
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.
The `DateTimeInput` component allows the user to select a date. This component also supports multiple date selection.
A controlled radio input component with validation states and a label.
Add tooltips built entirely in CSS to nearly any element.
A controlled date time input component for single date, with validation states and a label.
A collection of icons for Natura & Co. Design System
A render-prop component to manage a toggle state
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.
UI Kit styling solution.
Sass variables, mixins, and functions for use in our components.
A controlled selectable search input component for single-line strings with validation states.
Web component implementation of a Spectrum design Badge
Web component implementation of a Spectrum design InfieldButton
Utilities for working with rich-text components.
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
Relume Tailwind Config. A preset Tailwind config using the Relume design system.
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>`.
`<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.
CSS stylesheets for Primer Brand components
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
Small, modular components for StrataKit
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
Containers, rows, and columns for creating page layout.
Instill AI's frontend toolkit
ViewComponents of the Primer Design System for OpenProject
A controlled text input component for localized multi-line strings with validation states.
A Tailwind CSS plugin to bring Vuetify utility classes for autocomplete and migration use cases.
Base theme preset for use with Rebass
Decathlon Design System - Vitamin assets library
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
The TimeInput component allows the user to select a time.
CSS to reset the browsers default styles
An `<sp-color-wheel>` lets users visually change an individual channel of a color on a circular track.
A controlled input component for money values with validation states and a label.
The Spectrum CSS card component
Salute Design System / React UI kit for SDDS SCAN web applications
Link buttons are similar to Flat buttons but work as link elements.
A reusable React component library and design system with TypeScript support, built on Vite for seamless integration and optimized performance.
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.
The Spectrum CSS typography component
A preset of all the UI-Kit buttons components.
A controlled date input component for single date.
<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.
`<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.
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.
NEXT Design System icons packaged as a set of React components.
Salute Design System / Internal React UI kit for web applications
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.
Web component implementation of a Spectrum design Grid
Salute Design System / React UI kit for SDDS CRM web applications
Salute Design System / React UI kit for SDDS INSOL web applications
The Spectrum CSS dialog component
A controlled rich text input component for rich text 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
A preset of all the UI-Kit inputs components.
The Spectrum CSS button component
Singular purpose and flexible navigation elements.
A comprehensive Notion-inspired design system built with React, TypeScript, and Tailwind CSS
The Spectrum CSS menu component
A module for creating rounded-corner boxes with options for headers, lists, and footers.
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
A collection of buttons used for primary and secondary actions.
Blankslates are for when there is a lack of content within a page or section.
Build Accessible and Responsive Vue.js websites and applications with speed ⚡️
The `QuickFilters` component displays filter controls.
Design system library by @malt
The Spectrum CSS page component
The Spectrum CSS accordion component
A controlled password input component.
HugeIcons Pro Vue Component Library https://hugeicons.com
Web component implementation of a Spectrum design Swatch
Leviathan Tarik Design System (tokens, utils, atoms)
ECL Base
The Spectrum CSS search 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
The Spectrum CSS tooltip component
Breadcrumb navigation for pages with parents / grandparents.
A comprehensive React Native UI component library with modern design and extensive functionality
Marketing specific immutable, atomic CSS classes
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.
A beautiful, minimalistic React + Tailwind UI framework for SaaS applications
The Spectrum CSS in-line alert component
The Spectrum CSS action button component
A component design system for LifeSG web apps
A progress bar component used to visualize the progression of an extended operation
The `Filters` component displays filter controls.
Basic styles for user profile avatars.
The Spectrum CSS checkbox component
The Spectrum CSS link component
Labels add metatdata or indicate status of items and navigational elements.
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.
Decathlon Design System - Vitamin React components library
Shorten text with an ellipsis.
The Spectrum CSS icon component
The Spectrum CSS divider component
Web component implementation of a Spectrum design ContextualHelp
Typography for marketing websites at GitHub
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
A low-level SCSS library for building robust token-driven design systems at scale.
ECL Links
The Spectrum CSS textfield component
Material-UI Binding for UI-Schema
The Spectrum CSS table component
[Material-UI](https://mui.com/core/) theme inspired by [Bootstrap Italia](https://italia.github.io/bootstrap-italia/).
Web component implementation of a Spectrum design PickerButton
Fluid Design Tokens
Implementation of sharable components from Planview's Design System
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
Flash messages, or alerts, inform users of successful or pending actions.
All icons from the Amsterdam Design System as React components. Use it to use the correct icons in your React project.
`@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
Salute Design System / React UI kit for SDDS FinAI web applications
The Spectrum CSS tokens package
The Spectrum CSS progress bar component
The Spectrum CSS toast component
Responsive and accessible React UI components built with React and Emotion
React component library for Schematic's icon system with TypeScript support
Fluid Design System React
A TailwindCSS plugin for styling Kobalte components with data-* attributes by using modifiers like ui-expanded:*
A comprehensive UI component library built with React, TypeScript, and Tailwind CSS for LlamaIndex applications
Buttons for marketing websites at GitHub
The Fluid Design System is ENGIE’s open-source library to create, build and deliver ENGIE digital services in a more efficient way.
<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 calendar component
A Linear inspired Chakra UI theme
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.
ECL EC Breadcrumb
The Spectrum CSS Tree view component
Une bibliothèque de thèmes React moderne avec support Tailwind CSS
ECL EC Buttons
Contributed React components for the NEXT UI Kit.
Patreon Studio Design System
Fractal's (Snowball's design system) React component library based on RadixUI and PandaCSS
Saas UI Dropzone Component for Chakra UI
Styles to display tabular data for marketing websites at GitHub.
The Spectrum CSS actiongroup component
ECL Grid
The Spectrum CSS underlay component
The Spectrum CSS popover component
Set of shared utilities from Planview's Design System
The Spectrum CSS picker component
The Spectrum CSS stepper component
Jumbotrons, heroes, and featured content sections for marketing websites at GitHub.
The Spectrum CSS progress circle component
Utility-first CSS for the future
The Spectrum CSS buttongroup component
The Spectrum CSS modal component
ECL EC Site Header Standardised
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
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.
A ZenithUi Time Picker is React component enables users to select a time from a predefined list of options.
The Spectrum CSS dropzone component
ECL EC Form group
The Spectrum CSS tags component
Description text to help the user know what to do.
The Spectrum CSS tabs component
Utility and component-centric design system based on Bootstrap for fast, responsive UI development.
The Spectrum CSS sidenav component
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
A nice, consistent way to display branch names.
ECL EC Site Header Harmonised
ECL DOM utilities
OE - BCL icon
Core tokens and utilities for Factorial One Design System
Styles to create distinct sections of marketing pages at GitHub.
EC Footer Harmonised
ECL EC Page Header Core Specs
The Spectrum CSS fieldlabel component
The Spectrum CSS switch component
ECL EC Page Header Harmonised
A React component library by QuestionPro for building web applications with ease
⚡ Ultra-lightweight React component library with design tokens, multi-brand theming, and TypeScript support. Zero heavy dependencies - perfect for production apps.
Web component implementation of a Spectrum design Breadcrumbs
The Spectrum CSS radio component
ECL Icons -> EC flavor
NorthStar Design System v2
ECL Search form
The Spectrum CSS slider component
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
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
ECL EC Timeline
All assets from the Amsterdam Design System. Use it to include the correct fonts, icons or logos in your website or application.
The Spectrum CSS avatar component
ECL EC Blockquote Specs
The Spectrum CSS Pagination component
Planview design system tokens
OE - BCL bootstrap 5 sources
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.
EC Footer
EC Language list
ECL Form Labels
Implementation of Planview Design system grid components
Implementation of Planview Design system details panel
ECL EC Form checkbox
ECL EC Card Specs
ECL EC Footer Specs
Design System Styles for the Swiss Post web platform.
A design system for Appscode websites and dashboards made using Bulma
Sistema de design unificado para a plataforma Metropolle
Franken UI is an HTML-first, open-source library of UI components based on the utility-first Tailwind CSS with UIkit 3 compatibility. The design is based on shadcn/ui ported to be framework-agnostic.
A professionally designed animate react component library & templates market that brings together functionality, accessibility, and beautiful aesthetics for modern applications.
Authentication provider and components for Chakra UI
ECL EC Social Media Share
OE - BCL spinner
ECL EC Fact and Figures
ECL EC Fact and Figures Specs
The React implementation of the Oxygen Design System
ECL EC Accordion
OE - BCL button
Legacy version of Primer CSS. Based on 15.2.0
OE - BCL link
Yamada UI core
Web component implementation of a Spectrum design AlertBanner
Implementation of Planview Design system filter components
Consta — дизайн-система для разработки интерфейсов, написана на [React](https://reactjs.org/), сделана и поддерживается в «Газпром нефти».
ECL EC Tag Specs
Implementation of Planview Design system toolbar
ECL EC Page Header Specs
ECL EC Media container Specs
ECL EC Site header