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.
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.
Chart
A chart component for visualizing data in various formats.
Chat
Building blocks for chat UIs: messages, bubbles, reactions, replies, typing indicator and scroll handling.
Checkbox
A control allowing the user to toggle between checked and not checked.
Collapsible
A collapsible panel controlled by a button trigger.
Colorpicker
A specialized dropdown for selecting colors.
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 composable chat composer with @mentions, slash actions, token chips and adaptive layouts.
Context Menu
A menu that opens on right-click, providing contextual actions.
Cropper
A component for cropping images with a resizable and movable selection area.
Date Picker
A date picker component built with Calendar and Popover.
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.
File Upload
A component for uploading files with drag-and-drop support.
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.
Link Preview
A popup that appears when an element is hovered, showing preview information.
Map
An interactive map with markers, popups, tooltips, and routes, powered by MapLibre GL.
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.
Rich Editor
A rich text editor component with formatting options.
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
A sidebar that can be toggled open and closed, providing navigation or additional content.
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.
Split Pane
A component to layout resizable panels with a draggable divider.
Starrating
A control for selecting or displaying a rating using stars.
Stepper
A component for displaying a series of steps in a process.
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 for multi-line text input.
Timeline
A component for displaying a series of events in chronological order.
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.
Tree
A component for displaying a hierarchical tree of items.
Designed by coss.com. Ported to Svelte by the cossui-svelte community – open source, open heart, open mind.
v1.0.0, This project is not affiliated with coss.com. full credits