Dev Design Library

coss ui components

Components
57
Framework
React
Stack
React, TypeScript, Tailwind
License
MIT
GitHub stars
10,669
Source
https://github.com/cosscom/ui
Website
https://coss.com/ui
Install
npx shadcn@latest add @coss/{name}

All coss ui components

  • Accordion: A set of collapsible panels with headings and content.
  • Alert: A callout for displaying important information.
  • Alert Dialog: A dialog that requires user response to proceed.
  • Autocomplete: An input that suggests options as you type.
  • Avatar: An image element with a fallback for representing the user.
  • Badge: A badge or a component that looks like a badge.
  • Breadcrumb: Displays the path to the current resource using a hierarchy of links.
  • Button: A button or a component that looks like a button.
  • Calendar: A date picker component with range and multi-select support.
  • Card: A content container for grouping related information.
  • Chat: Composable chat components with messages, reactions, replies, and delivery states.
  • Checkbox: A control allowing the user to toggle between checked and not checked.
  • Checkbox Group: Provides shared state to a series of checkboxes.
  • Collapsible: A collapsible panel controlled by a button trigger.
  • Combobox: An input combined with a list of predefined items to select.
  • Command: A command palette component built with Dialog and Autocomplete for searching and executing commands.
  • Composer: A composer for chat and AI assistant interfaces, with a growing input, persistent actions, and optional mentions or slash commands.
  • Context Menu: A menu that appears at the pointer on right click or long press.
  • Dialog: A popup that opens on top of the entire page.
  • Drawer: A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support.
  • Empty: A container for displaying empty state information.
  • Field: A component that provides labelling and validation for form controls.
  • Fieldset: A native fieldset element with a legend.
  • Form: A form wrapper component that simplifies validation and submission.
  • Frame: A framed container for grouping related information.
  • Group: A component for visually grouping a series of controls.
  • Input: A native input element.
  • Input Group: A flexible component for grouping inputs with addons, buttons, and other elements.
  • Kbd: A component for displaying keyboard keys and shortcuts.
  • Label: Renders an accessible label associated with controls.
  • Menu: A list of actions in a dropdown, enhanced with keyboard navigation.
  • Meter: A graphical display of a numeric value within a range.
  • Number Field: A numeric input element with increment and decrement buttons, and a scrub area.
  • Otp Field: A segmented input for one-time passwords and verification codes.
  • Pagination: A pagination with page navigation, next and previous links.
  • Popover: An accessible popup anchored to a button.
  • Preview Card: A popup that appears when a link is hovered, showing a preview for sighted users.
  • Progress: Displays the status of a task that takes a long time.
  • Radio Group: A set of checkable buttons where no more than one of the buttons can be checked at a time.
  • Scroll Area: A native scroll container with custom scrollbars.
  • Segmented Control: A visual pattern for presenting related choices, navigation destinations, filters, or content views.
  • Select: A common form component for choosing a predefined value in a dropdown menu.
  • Separator: A separator element accessible to screen readers.
  • Sheet: A flyout that opens from the side of the screen, based on the dialog component.
  • Sidebar
  • Skeleton: A loading state skeleton for your components.
  • Slider: An input where the user selects a value from within a given range.
  • Spinner: An indicator that can be used to show a loading state.
  • Switch: A control that indicates whether a setting is on or off.
  • Table: A simple table component for displaying tabular data.
  • Tabs: A component for toggling between related panels on the same page.
  • Textarea: A native textarea element.
  • Toast: A temporary notification that appears on screen to inform users.
  • Toggle: A two-state button that can be toggled on or off.
  • Toggle Group: Provides a shared state to a series of toggle buttons.
  • Toolbar: A container for grouping a set of buttons and controls.
  • Tooltip: A popup that appears when an element is hovered or focused, showing a hint for sighted users.

Browse by category