# cosscom/coss

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/cosscom-coss).**

9,358 stars · 466 forks · TypeScript · agpl-3.0

## Links

- GitHub: https://github.com/cosscom/coss
- Homepage: https://coss.com
- awesome-repositories: https://awesome-repositories.com/repository/cosscom-coss.md

## Topics

`nextjs` `radix-ui` `react` `shadcn` `shadcn-ui` `tailwindcss` `tanstack-table`

## Description

Coss is an accessible UI component library and design system framework used to build web interfaces. It provides a comprehensive kit of interactive elements and layout building blocks that follow screen reader and keyboard navigation standards.

The project functions as a UI overlay management library, offering specialized tools for implementing anchored popovers, tooltips, and slide-out panels with smooth transitions. It includes a set of accessible form primitives and selection controls to ensure compatibility across different assistive technologies.

Its broader capabilities cover the construction of complex forms with validation and date pickers, the design of application navigation through breadcrumbs and command palettes, and the management of system notification workflows using toasts and callouts. It also provides a variety of layout primitives including framed containers, tabbed interfaces, and tabular data displays.

## Tags

### User Interface & Experience

- [Accessible Component Libraries](https://awesome-repositories.com/f/user-interface-experience/accessible-component-libraries.md) — Provides a comprehensive library of UI components optimized for modern accessibility standards. ([source](https://cdn.jsdelivr.net/gh/cosscom/coss@main/README.md))
- [Overlay Managers](https://awesome-repositories.com/f/user-interface-experience/overlay-managers.md) — Implements a specialized system for managing anchored popovers, tooltips, and slide-out panels with smooth transitions.
- [Design System Implementations](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/component-implementation-patterns/design-system-implementations.md) — Functions as a comprehensive design system framework with centralized visual tokens and reusable primitives.
- [Accessible Form Controls](https://awesome-repositories.com/f/user-interface-experience/accessible-form-controls.md) — Provides a set of form primitives and selection controls optimized for screen reader compatibility.
- [Accessible UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-frameworks.md) — Provides a library of components that strictly follow screen reader and keyboard accessibility standards.
- [Buttons](https://awesome-repositories.com/f/user-interface-experience/buttons.md) — Provides customizable interactive buttons for triggering application events. ([source](https://coss.com/ui))
- [Headless Primitives](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-composition/component-composition-primitives/headless-primitives.md) — Provides unstyled functional primitives that serve as an accessible foundation for building custom UI components.
- [Data Entry Forms](https://awesome-repositories.com/f/user-interface-experience/data-tables/data-entry-forms.md) — Enables construction of sophisticated forms with validation, autocomplete, and specialized inputs.
- [Design Systems](https://awesome-repositories.com/f/user-interface-experience/design-systems.md) — Provides a standardized visual identity framework with layout and input building blocks for cohesive web application design.
- [Form and Input Management](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management.md) — Provides a system for handling user input, form validation, and accessible form components. ([source](https://coss.com/ui))
- [Form Input Components](https://awesome-repositories.com/f/user-interface-experience/form-input-components.md) — Provides a comprehensive set of form controls including text inputs, radio groups, and sliders. ([source](https://coss.com))
- [Form Submission Management](https://awesome-repositories.com/f/user-interface-experience/form-submission-management.md) — Coordinates input validation and data submission within a structured wrapper. ([source](https://coss.com/ui/docs/components/form))
- [Generic Button Components](https://awesome-repositories.com/f/user-interface-experience/generic-button-components.md) — Provides general-purpose interactive buttons with configurable styles and loading indicators. ([source](https://coss.com/ui/docs/components/button))
- [Interaction Layouts](https://awesome-repositories.com/f/user-interface-experience/interaction-layouts.md) — Provides tabs, scroll areas, and toolbars to organize content and group functional controls. ([source](https://coss.com))
- [Interactive UI Overlays](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-overlays.md) — Implements interactive overlays including tooltips, popovers, and context menus. ([source](https://coss.com))
- [Keyboard Navigation](https://awesome-repositories.com/f/user-interface-experience/keyboard-navigation.md) — Implements focus management and arrow-key traversal to ensure full accessibility within menus and lists.
- [Layout Primitives](https://awesome-repositories.com/f/user-interface-experience/layout-primitives.md) — Provides a variety of layout primitives including tabs, separators, tables, and custom scroll areas. ([source](https://coss.com/ui))
- [Modal Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs.md) — Provides overlay components for notifications and focused user interaction via modal dialogs. ([source](https://coss.com/ui))
- [Modal Overlays](https://awesome-repositories.com/f/user-interface-experience/modal-overlays.md) — Manages popups and side-sheets that appear over the page to capture user responses. ([source](https://coss.com))
- [Popover Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays.md) — Manages anchored popovers and tooltips with precise positioning and smooth transitions.
- [Popovers](https://awesome-repositories.com/f/user-interface-experience/popovers.md) — Provides accessible popovers anchored to trigger elements for contextual information and controls. ([source](https://coss.com/ui/docs/components/popover))
- [Selection Controls](https://awesome-repositories.com/f/user-interface-experience/selection-controls.md) — Provides a set of selection controls including dropdowns, comboboxes, and autocomplete inputs. ([source](https://coss.com))
- [Slide-Out Panels](https://awesome-repositories.com/f/user-interface-experience/slide-out-panels.md) — Provides slide-out panels that emerge from screen edges with support for swipe gestures. ([source](https://coss.com/ui/docs/components/drawer))
- [Tooltips](https://awesome-repositories.com/f/user-interface-experience/tooltips.md) — Implements contextual tooltip overlays that appear on hover or focus. ([source](https://coss.com/ui/docs/components/tooltip))
- [Notification Systems](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/notification-systems.md) — Manages the dispatch and display of system notifications through toasts and callouts. ([source](https://coss.com))
- [Application Navigation Components](https://awesome-repositories.com/f/user-interface-experience/application-navigation-components.md) — Offers a cohesive set of navigation components including breadcrumbs, tabs, and pagination.
- [Callouts](https://awesome-repositories.com/f/user-interface-experience/callouts.md) — Ships high-visibility callout components for highlighting important information and system status. ([source](https://coss.com/ui/docs/components/alert))
- [Collapsible Panels](https://awesome-repositories.com/f/user-interface-experience/collapsible-panels.md) — Provides UI components that can be expanded or collapsed to organize page information. ([source](https://coss.com))
- [Combobox Components](https://awesome-repositories.com/f/user-interface-experience/combobox-components.md) — Implements components combining text input with a dropdown list for flexible item selection. ([source](https://coss.com/ui/docs/components/combobox))
- [Command Palettes](https://awesome-repositories.com/f/user-interface-experience/command-palettes.md) — Implements keyboard-driven command palettes for executing actions and navigating application features. ([source](https://coss.com))
- [Context Menus](https://awesome-repositories.com/f/user-interface-experience/context-menus.md) — Implements pop-up menus that appear upon right-click or long-press to provide situational actions. ([source](https://coss.com/ui/docs/components/context-menu))
- [Data Display Components](https://awesome-repositories.com/f/user-interface-experience/data-display-components.md) — Provides structured grid components for displaying tabular data with card layout and sorting support. ([source](https://coss.com/ui/docs/components/table))
- [Multi-line Text Inputs](https://awesome-repositories.com/f/user-interface-experience/data-display-components/list-components/multi-line-item-renderers/multi-line-text-inputs.md) — Provides form components for capturing and editing long-form, multi-line text content. ([source](https://coss.com/ui/docs/components/textarea))
- [Date and Time Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers.md) — Renders accessible calendars and date pickers with support for ranges and multi-select operations. ([source](https://coss.com))
- [Date Pickers](https://awesome-repositories.com/f/user-interface-experience/date-pickers.md) — Ships date picker components supporting single dates, ranges, and multi-selection. ([source](https://coss.com/ui))
- [Date Selection Components](https://awesome-repositories.com/f/user-interface-experience/date-selection-components.md) — Provides an interactive calendar-based popover for selecting specific dates. ([source](https://coss.com/ui/docs/components/date-picker))
- [Dividers](https://awesome-repositories.com/f/user-interface-experience/dividers.md) — Implements themed visual dividers to separate content sections while remaining accessible. ([source](https://coss.com/ui/docs/components/separator))
- [Dropdown Menus](https://awesome-repositories.com/f/user-interface-experience/dropdown-menus.md) — Renders dropdown menus with built-in keyboard navigation for accessible action lists. ([source](https://coss.com/ui))
- [Element Groupings](https://awesome-repositories.com/f/user-interface-experience/element-groupings.md) — Provides containers to organize diverse information and visually separate related content. ([source](https://coss.com/ui))
- [Floating Element Positioning](https://awesome-repositories.com/f/user-interface-experience/floating-element-positioning.md) — Implements a geometric calculation engine for precise floating element positioning relative to target triggers.
- [Input Groups](https://awesome-repositories.com/f/user-interface-experience/form-components/input-groups.md) — Bundles input fields with adjacent buttons or icons into unified visual units. ([source](https://coss.com/ui/docs/components/input-group))
- [Range Inputs](https://awesome-repositories.com/f/user-interface-experience/form-components/range-inputs.md) — Offers custom-styled range sliders for selecting numeric values within a defined range. ([source](https://coss.com/ui/docs/components/slider))
- [Form Field Extensions](https://awesome-repositories.com/f/user-interface-experience/form-field-extensions.md) — Augments form inputs with labels, descriptions, and validation messages for consistent layouts. ([source](https://coss.com/ui/docs/components/field))
- [Checkbox Inputs](https://awesome-repositories.com/f/user-interface-experience/form-input-components/checkbox-inputs.md) — Provides accessible input components for binary state toggles and multiple-item selection. ([source](https://coss.com/ui/docs/components/checkbox))
- [Toggle Switches](https://awesome-repositories.com/f/user-interface-experience/form-input-components/toggle-switches.md) — Provides accessible binary toggle switches for enabling or disabling settings. ([source](https://coss.com/ui/docs/components/switch))
- [Responsive Layout Switches](https://awesome-repositories.com/f/user-interface-experience/full-screen-viewport-layouts/responsive-layout-switches.md) — Toggles between different layout modes, such as bottom sheets and centered dialogs, based on screen dimensions.
- [Verification Code Inputs](https://awesome-repositories.com/f/user-interface-experience/input-field-enhancements/input-field-initializers/styled-input-fields/verification-code-inputs.md) — Renders segmented input fields for one-time passwords with alphanumeric support and masking. ([source](https://coss.com/ui/docs/components/otp-field))
- [Boolean Input Controls](https://awesome-repositories.com/f/user-interface-experience/input-handling/input-pattern-capturers/boolean-input-controls.md) — Renders accessible checkboxes and toggle switches to capture boolean states. ([source](https://coss.com/ui))
- [Component Layout Containers](https://awesome-repositories.com/f/user-interface-experience/layout-management/component-layout-containers.md) — Provides structured containers with dedicated areas for titles, descriptions, and header actions. ([source](https://coss.com/ui/docs/components/card))
- [Layout Organizing Containers](https://awesome-repositories.com/f/user-interface-experience/layout-organizing-containers.md) — Provides layout containers including frames and cards to structure page content. ([source](https://coss.com))
- [Breadcrumb Navigations](https://awesome-repositories.com/f/user-interface-experience/links/categorization/navigation-hierarchies/breadcrumb-navigations.md) — Implements breadcrumb navigation to show current location within a resource hierarchy. ([source](https://coss.com/ui))
- [Breadcrumbs](https://awesome-repositories.com/f/user-interface-experience/links/categorization/navigation-hierarchies/breadcrumbs.md) — Implements navigation trails that show the current location within a site hierarchy. ([source](https://coss.com/ui/docs/components/breadcrumb))
- [Loading Indicators](https://awesome-repositories.com/f/user-interface-experience/loading-indicators.md) — Implements animated pulse effects and visual elements to indicate loading states. ([source](https://coss.com/ui/docs/components/skeleton))
- [Alert Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/alert-dialogs.md) — Ships alert dialogs that interrupt user workflow to require a response before proceeding. ([source](https://coss.com/ui/docs/components/alert-dialog))
- [Responsive Modals](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/responsive-modals.md) — Implements modals that switch between bottom sheets on small screens and centered dialogs on larger screens. ([source](https://coss.com/ui/docs/components/drawer))
- [Select Inputs](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs/select-inputs.md) — Provides accessible dropdown components for selecting one or more values from a predefined list. ([source](https://coss.com/ui/docs/components/select))
- [Dropdown Menus](https://awesome-repositories.com/f/user-interface-experience/navigation-components/dropdown-menus.md) — Renders accessible dropdown menus with built-in keyboard navigation for action lists. ([source](https://coss.com/ui/docs/components/menu))
- [Nested Menus](https://awesome-repositories.com/f/user-interface-experience/nested-menus.md) — Constructs hierarchical menu systems within panels using checkboxes and radio groups. ([source](https://coss.com/ui/docs/components/drawer))
- [Notification Queues](https://awesome-repositories.com/f/user-interface-experience/notification-queues.md) — Provides a system for managing the sequencing and timing of temporary notification messages.
- [Notification Workflow Managers](https://awesome-repositories.com/f/user-interface-experience/notification-workflow-managers.md) — Coordinates the display and timing of toasts and callouts to communicate real-time events.
- [Input Controls](https://awesome-repositories.com/f/user-interface-experience/numeric-inputs/numeric-input-fields/input-controls.md) — Ships numeric entry fields featuring increment, decrement, and scrub area controls. ([source](https://coss.com/ui/docs/components/number-field))
- [Specialized Form Inputs](https://awesome-repositories.com/f/user-interface-experience/numeric-inputs/numeric-input-fields/specialized-form-inputs.md) — Provides segmented fields for one-time passwords and numeric inputs with increment buttons. ([source](https://coss.com/ui))
- [Numeric Value Visualizers](https://awesome-repositories.com/f/user-interface-experience/numeric-value-visualizers.md) — Ships progress bars and meters to visualize numeric values and completion status. ([source](https://coss.com/ui))
- [Flyout Panels](https://awesome-repositories.com/f/user-interface-experience/overlay-components/flyout-panels.md) — Provides side-aligned panels that slide into view to display secondary content or settings. ([source](https://coss.com/ui/docs/components/sheet))
- [Pagination Components](https://awesome-repositories.com/f/user-interface-experience/pagination-components.md) — Includes UI controls for navigating through paginated datasets and multi-page content. ([source](https://coss.com/ui/docs/components/pagination))
- [Pagination Interfaces](https://awesome-repositories.com/f/user-interface-experience/pagination-interfaces.md) — Provides breadcrumbs and pagination links to help users navigate through resources and multi-page content. ([source](https://coss.com))
- [Progress Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-indicators.md) — Implements visual components to show the completion status of long-running operations. ([source](https://coss.com/ui/docs/components/progress))
- [Progress & Value Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-value-indicators.md) — Implements graphical representations of numeric values to visualize progress or capacity. ([source](https://coss.com/ui/docs/components/meter))
- [Radio Groups](https://awesome-repositories.com/f/user-interface-experience/radio-groups.md) — Implements grouped radio buttons for managing single-choice selection from a set of options. ([source](https://coss.com/ui/docs/components/radio-group))
- [Scroll Areas](https://awesome-repositories.com/f/user-interface-experience/scroll-areas.md) — Implements scrollable containers with custom-styled scrollbars and flexible viewport management. ([source](https://coss.com/ui/docs/components/scroll-area))
- [Searchable Select Inputs](https://awesome-repositories.com/f/user-interface-experience/selection-lists/searchable-select-inputs.md) — Implements selection components with integrated search inputs for filtering large lists. ([source](https://coss.com/ui))
- [System State Indicators](https://awesome-repositories.com/f/user-interface-experience/system-state-indicators.md) — Uses progress bars, spinners, and meters to communicate system loading states and numeric values. ([source](https://coss.com))
- [Tabbed Interfaces](https://awesome-repositories.com/f/user-interface-experience/tabbed-interfaces.md) — Provides tabbed interfaces to organize related content panels on a single page. ([source](https://coss.com/ui/docs/components/tabs))
- [Autocomplete Inputs](https://awesome-repositories.com/f/user-interface-experience/text-input-widgets/autocomplete-inputs.md) — Implements components that suggest and filter matching options as users type. ([source](https://coss.com/ui/docs/components/autocomplete))
- [Toast Notifications](https://awesome-repositories.com/f/user-interface-experience/toast-notifications.md) — Provides lightweight, transient toast notifications for system feedback. ([source](https://coss.com/ui))
- [Selection State Coordinators](https://awesome-repositories.com/f/user-interface-experience/toggle-buttons/selection-state-coordinators.md) — Coordinates active selections across button groups to maintain consistent mutually exclusive or multiple-choice states.
- [Toggle Groups](https://awesome-repositories.com/f/user-interface-experience/toggle-groups.md) — Manages shared state across button groups to allow single or multiple selection. ([source](https://coss.com/ui/docs/components/toggle-group))
- [Toolbar Components](https://awesome-repositories.com/f/user-interface-experience/toolbar-components.md) — Implements interactive control bars and formatting menus to group buttons and links. ([source](https://coss.com/ui/docs/components/toolbar))
- [Alert Components](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/alert-components.md) — Ships pre-styled alert boxes for communicating critical information and contextual feedback. ([source](https://coss.com/ui))
- [Loading Indicators](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/loading-indicators.md) — Provides visual spinners and indicators to give feedback during background processing. ([source](https://coss.com/ui/docs/components/spinner))
- [Notification Stacking Systems](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/notification-systems/notification-stacking-systems.md) — Controls the placement and layering of multiple concurrent notification overlays across the screen. ([source](https://coss.com/ui/docs/components/toast))
- [Form Labels](https://awesome-repositories.com/f/user-interface-experience/ui-components/form-input-components/form-labels.md) — Provides accessible text labels for identifying and describing form input fields. ([source](https://coss.com/ui/docs/components/label))
- [UI Containers](https://awesome-repositories.com/f/user-interface-experience/ui-containers.md) — Provides foundational layout containers to establish visual grouping and content boundaries. ([source](https://coss.com/ui/docs/components/frame))
- [UI Layer Stacking](https://awesome-repositories.com/f/user-interface-experience/visual-layering-systems/ui-layer-stacking.md) — Manages a portal-based stacking system to prevent z-index conflicts when displaying modals and panels.
- [Visual Status Indicators](https://awesome-repositories.com/f/user-interface-experience/visual-status-indicators.md) — Ships compact visual indicators to categorize items or represent system status. ([source](https://coss.com/ui/docs/components/badge))

### Part of an Awesome List

- [Notifications](https://awesome-repositories.com/f/awesome-lists/devtools/notifications.md) — Provides temporary toast notifications that automatically dismiss after a set period. ([source](https://coss.com/ui/docs/components/toast))
- [Text Input Fields](https://awesome-repositories.com/f/awesome-lists/devtools/text-inputs/text-input-fields.md) — Offers styled and accessible text entry fields with configurable sizing and wrappers. ([source](https://coss.com/ui/docs/components/input))

### Web Development

- [Interactive Web Component Libraries](https://awesome-repositories.com/f/web-development/interactive-web-component-libraries.md) — Ships a comprehensive collection of interactive UI elements, including modals and form controls, for rapid frontend development.
- [Input Accessibility Wrappers](https://awesome-repositories.com/f/web-development/state-syncing-reactivity/set-state-syncing/input-accessibility-wrappers.md) — Pairs form controls with accessible labels and validation messages to maintain semantic relationships.
- [Element Anchoring](https://awesome-repositories.com/f/web-development/dom-element-selectors/element-anchoring.md) — Binds notification and tooltip components to specific DOM elements for contextual alerting. ([source](https://coss.com/ui/docs/components/toast))

### Data & Databases

- [Input Suggestions](https://awesome-repositories.com/f/data-databases/search-suggestions/input-suggestions.md) — Offers a list of suggested options to users as they type into a text field. ([source](https://coss.com/ui))