# COSS for Svelte **COSS for Svelte** is an unofficial Svelte 5 port of COSS UI. It uses Shards UI for headless behavior, Tailwind CSS for styling, and the shadcn-svelte CLI for registry installation. Unofficial Svelte port made by Miel: https://github.com/mielsense ## Overview - [Introduction](https://coss-sv.vercel.app/docs/index.md): A modern Svelte 5 component library built on Shards UI. Built for developers and AI. - [Get Started](https://coss-sv.vercel.app/docs/get-started.md): A quick guide to adding your first Svelte component. - [Styling](https://coss-sv.vercel.app/docs/styling.md): Configure COSS color, radius, typography, and overlay tokens with Tailwind CSS v4. - [Migrating from shadcn-svelte and Bits UI](https://coss-sv.vercel.app/docs/radix-migration.md): Move an existing Svelte component set to the Shards-backed COSS for Svelte wrappers. - [Agent Skill](https://coss-sv.vercel.app/docs/skills.md): Teach coding agents how to install, compose, and debug COSS for Svelte components. - [Changelog](https://coss-sv.vercel.app/docs/changelog.md): Breaking changes, migration guides, and notable updates. - [Roadmap](https://coss-sv.vercel.app/docs/roadmap.md): Current state of coss ui and where we’re headed next. ## Components - [Accordion](https://coss-sv.vercel.app/docs/components/accordion.md): A set of collapsible panels with headings and content. - [Alert](https://coss-sv.vercel.app/docs/components/alert.md): A callout for displaying important information. - [Alert Dialog](https://coss-sv.vercel.app/docs/components/alert-dialog.md): A dialog that requires user response to proceed. - [Autocomplete](https://coss-sv.vercel.app/docs/components/autocomplete.md): An input that suggests options as you type. - [Avatar](https://coss-sv.vercel.app/docs/components/avatar.md): An image element with a fallback for representing the user. - [Badge](https://coss-sv.vercel.app/docs/components/badge.md): A badge or a component that looks like a badge. - [Breadcrumb](https://coss-sv.vercel.app/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links. - [Button](https://coss-sv.vercel.app/docs/components/button.md): A button or a component that looks like a button. - [Calendar](https://coss-sv.vercel.app/docs/components/calendar.md): A date picker component with range and multi-select support. - [Card](https://coss-sv.vercel.app/docs/components/card.md): A content container for grouping related information. - [Checkbox](https://coss-sv.vercel.app/docs/components/checkbox.md): A control allowing the user to toggle between checked and not checked. - [Checkbox Group](https://coss-sv.vercel.app/docs/components/checkbox-group.md): Provides shared state to a series of checkboxes. - [Collapsible](https://coss-sv.vercel.app/docs/components/collapsible.md): A collapsible panel controlled by a button trigger. - [Combobox](https://coss-sv.vercel.app/docs/components/combobox.md): An input combined with a list of predefined items to select. - [Command](https://coss-sv.vercel.app/docs/components/command.md): A command palette component built with Dialog and Autocomplete for searching and executing commands. - [Context Menu](https://coss-sv.vercel.app/docs/components/context-menu.md): A menu that appears at the pointer on right click or long press. - [Date Picker](https://coss-sv.vercel.app/docs/components/date-picker.md): A date picker component built with Calendar and Popover. - [Dialog](https://coss-sv.vercel.app/docs/components/dialog.md): A popup that opens on top of the entire page. - [Drawer](https://coss-sv.vercel.app/docs/components/drawer.md): A panel that slides in from the edge of the screen with swipe gestures, snap points, and nested drawer support. - [Empty](https://coss-sv.vercel.app/docs/components/empty.md): A container for displaying empty state information. - [Field](https://coss-sv.vercel.app/docs/components/field.md): A component that provides labelling and validation for form controls. - [Fieldset](https://coss-sv.vercel.app/docs/components/fieldset.md): A native fieldset element with a legend. - [Form](https://coss-sv.vercel.app/docs/components/form.md): A form wrapper component that simplifies validation and submission. - [Frame](https://coss-sv.vercel.app/docs/components/frame.md): A framed container for grouping related information. - [Group](https://coss-sv.vercel.app/docs/components/group.md): A component for visually grouping a series of controls. - [Input](https://coss-sv.vercel.app/docs/components/input.md): A native input element. - [Input Group](https://coss-sv.vercel.app/docs/components/input-group.md): A flexible component for grouping inputs with addons, buttons, and other elements. - [Kbd](https://coss-sv.vercel.app/docs/components/kbd.md): A component for displaying keyboard keys and shortcuts. - [Label](https://coss-sv.vercel.app/docs/components/label.md): Renders an accessible label associated with controls. - [Menu](https://coss-sv.vercel.app/docs/components/menu.md): A list of actions in a dropdown, enhanced with keyboard navigation. - [Meter](https://coss-sv.vercel.app/docs/components/meter.md): A graphical display of a numeric value within a range. - [Number Field](https://coss-sv.vercel.app/docs/components/number-field.md): A numeric input element with increment and decrement buttons, and a scrub area. - [OTP Field](https://coss-sv.vercel.app/docs/components/otp-field.md): A segmented input for one-time passwords and verification codes. - [Pagination](https://coss-sv.vercel.app/docs/components/pagination.md): A pagination with page navigation, next and previous links. - [Popover](https://coss-sv.vercel.app/docs/components/popover.md): An accessible popup anchored to a button. - [Preview Card](https://coss-sv.vercel.app/docs/components/preview-card.md): A popup that appears when a link is hovered, showing a preview for sighted users. - [Progress](https://coss-sv.vercel.app/docs/components/progress.md): Displays the status of a task that takes a long time. - [Radio Group](https://coss-sv.vercel.app/docs/components/radio-group.md): A set of checkable buttons where no more than one of the buttons can be checked at a time. - [Scroll Area](https://coss-sv.vercel.app/docs/components/scroll-area.md): A native scroll container with custom scrollbars. - [Select](https://coss-sv.vercel.app/docs/components/select.md): A common form component for choosing a predefined value in a dropdown menu. - [Segmented Control](https://coss-sv.vercel.app/docs/components/segmented-control.md): A visual pattern for presenting related choices, navigation destinations, filters, or content views. - [Separator](https://coss-sv.vercel.app/docs/components/separator.md): A separator element accessible to screen readers. - [Sheet](https://coss-sv.vercel.app/docs/components/sheet.md): A flyout that opens from the side of the screen, based on the dialog component. - [Skeleton](https://coss-sv.vercel.app/docs/components/skeleton.md): A loading state skeleton for your components. - [Slider](https://coss-sv.vercel.app/docs/components/slider.md): An input where the user selects a value from within a given range. - [Spinner](https://coss-sv.vercel.app/docs/components/spinner.md): An indicator that can be used to show a loading state. - [Switch](https://coss-sv.vercel.app/docs/components/switch.md): A control that indicates whether a setting is on or off. - [Table](https://coss-sv.vercel.app/docs/components/table.md): A simple table component for displaying tabular data. - [Tabs](https://coss-sv.vercel.app/docs/components/tabs.md): A component for toggling between related panels on the same page. - [Textarea](https://coss-sv.vercel.app/docs/components/textarea.md): A native textarea element. - [Toast](https://coss-sv.vercel.app/docs/components/toast.md): A temporary notification that appears on screen to inform users. - [Toggle](https://coss-sv.vercel.app/docs/components/toggle.md): A two-state button that can be toggled on or off. - [Toggle Group](https://coss-sv.vercel.app/docs/components/toggle-group.md): Provides a shared state to a series of toggle buttons. - [Toolbar](https://coss-sv.vercel.app/docs/components/toolbar.md): A container for grouping a set of buttons and controls. - [Tooltip](https://coss-sv.vercel.app/docs/components/tooltip.md): A popup that appears when an element is hovered or focused, showing a hint for sighted users. ## Svelte patterns - [useMediaQuery](https://coss-sv.vercel.app/docs/hooks/use-media-query.md): Reactive media query helper with Tailwind-like syntax. - [useCopyToClipboard](https://coss-sv.vercel.app/docs/hooks/use-copy-to-clipboard.md): Copy text to the clipboard with temporary copied feedback.