# coss-svelte

**coss-svelte** is a Svelte 5, copy-and-own component library inspired by COSS UI. It maps the COSS component language onto SvelteKit, Bits UI, and Tailwind CSS 4.

The current catalog contains **55 components**: **52 stable**, **3 experimental**, and **0 deferred**.

## Agent Rules

- Use the maintained [coss-svelte skill](https://coss-svelte.vercel.app/docs/skills.md) for implementation workflow and high-risk composition rules.
- Treat COSS React, Base UI, shadcn, and Radix snippets as design references only. Never copy their implementation source into Svelte.
- Import only names documented by a component Markdown route or exported by `coss-svelte`.
- Prefer Svelte 5 `class`, lowercase event properties, runes, snippets, and documented `bind:*` props.
- Read a component's status, example, API table, and registry manifest before generating code.
- Install with `pnpm add coss-svelte @coss-svelte/theme bits-ui` in Svelte 5 applications built with SvelteKit and Vite.
- Treat the machine-readable registry as a preview whose source and schemas may evolve between minor releases.

## Overview

- [Introduction](https://coss-svelte.vercel.app/docs/introduction.md): coss-svelte is a Svelte 5-native component library inspired by coss. Built for SvelteKit apps and built on top of Bits UI.
- [Getting Started](https://coss-svelte.vercel.app/docs/getting-started.md): Install coss-svelte, its shared theme, and Bits UI in a Svelte 5 application built with SvelteKit and Vite.

## Components

- [Accordion](https://coss-svelte.vercel.app/docs/components/accordion.md): A set of collapsible panels with headings and content.
- [Alert](https://coss-svelte.vercel.app/docs/components/alert.md): A callout for displaying important information.
- [Alert Dialog](https://coss-svelte.vercel.app/docs/components/alert-dialog.md): A dialog that requires user response to proceed.
- [Autocomplete](https://coss-svelte.vercel.app/docs/components/autocomplete.md): An input that suggests options as you type.
- [Avatar](https://coss-svelte.vercel.app/docs/components/avatar.md): A visual representation of a user or entity.
- [Badge](https://coss-svelte.vercel.app/docs/components/badge.md): A small status indicator or label component.
- [Breadcrumb](https://coss-svelte.vercel.app/docs/components/breadcrumb.md): Displays the path to the current resource using a hierarchy of links.
- [Button](https://coss-svelte.vercel.app/docs/components/button.md): A button or a component that looks like a button.
- [Calendar](https://coss-svelte.vercel.app/docs/components/calendar.md): A date picker for selecting single dates, ranges, or multiple dates.
- [Card](https://coss-svelte.vercel.app/docs/components/card.md): A content container for grouping related information.
- [Checkbox](https://coss-svelte.vercel.app/docs/components/checkbox.md): A binary toggle input for selecting one or multiple options.
- [Checkbox Group](https://coss-svelte.vercel.app/docs/components/checkbox-group.md): A collection of related checkboxes with group-level control.
- [Collapsible](https://coss-svelte.vercel.app/docs/components/collapsible.md): A component that toggles visibility of content sections.
- [Combobox](https://coss-svelte.vercel.app/docs/components/combobox.md): An input combined with a list of predefined items to select.
- [Command](https://coss-svelte.vercel.app/docs/components/command.md): A command palette component built with Dialog and Autocomplete for searching and executing commands.
- [Context Menu](https://coss-svelte.vercel.app/docs/components/context-menu.md): A menu of contextual actions opened from a pointer or keyboard target.
- [Date Picker](https://coss-svelte.vercel.app/docs/components/date-picker.md): A date selection component, often combined with a calendar in a popover or input.
- [Dialog](https://coss-svelte.vercel.app/docs/components/dialog.md): A modal overlay for displaying content that requires user interaction.
- [Drawer](https://coss-svelte.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-svelte.vercel.app/docs/components/empty.md): A container for displaying empty state information.
- [Field](https://coss-svelte.vercel.app/docs/components/field.md): A wrapper component for form inputs with labels and validation.
- [Fieldset](https://coss-svelte.vercel.app/docs/components/fieldset.md): A group of related form fields with a common label.
- [Form](https://coss-svelte.vercel.app/docs/components/form.md): A complete form implementation with validation and submission handling.
- [Frame](https://coss-svelte.vercel.app/docs/components/frame.md): A container component for displaying content in a frame.
- [Group](https://coss-svelte.vercel.app/docs/components/group.md): A container component for grouping related content with consistent styling.
- [Input](https://coss-svelte.vercel.app/docs/components/input.md): A native input element.
- [Input Group](https://coss-svelte.vercel.app/docs/components/input-group.md): A flexible component for grouping inputs with addons, buttons, and other elements.
- [Kbd](https://coss-svelte.vercel.app/docs/components/kbd.md): A component for displaying keyboard keys and shortcuts.
- [Label](https://coss-svelte.vercel.app/docs/components/label.md): Renders an accessible label associated with controls.
- [Menu](https://coss-svelte.vercel.app/docs/components/menu.md): A list of actions or options revealed on demand.
- [Meter](https://coss-svelte.vercel.app/docs/components/meter.md): A visual representation of a value within a known range.
- [Number Field](https://coss-svelte.vercel.app/docs/components/number-field.md): A specialized input for numeric values with increment/decrement controls.
- [OTP Field](https://coss-svelte.vercel.app/docs/components/otp-field.md): A segmented input for one-time passwords and verification codes.
- [Pagination](https://coss-svelte.vercel.app/docs/components/pagination.md): A pagination with page navigation, next and previous links.
- [Popover](https://coss-svelte.vercel.app/docs/components/popover.md): An accessible popup anchored to a button.
- [Preview Card](https://coss-svelte.vercel.app/docs/components/preview-card.md): A rich preview component for displaying linked content.
- [Progress](https://coss-svelte.vercel.app/docs/components/progress.md): A visual indicator showing the completion status of a task.
- [Radio Group](https://coss-svelte.vercel.app/docs/components/radio-group.md): A set of mutually exclusive options presented as radio buttons.
- [Scroll Area](https://coss-svelte.vercel.app/docs/components/scroll-area.md): A container with custom scrollbars for overflow content.
- [Select](https://coss-svelte.vercel.app/docs/components/select.md): A common form component for choosing a predefined value in a dropdown menu.
- [Separator](https://coss-svelte.vercel.app/docs/components/separator.md): A visual divider for separating content sections.
- [Sheet](https://coss-svelte.vercel.app/docs/components/sheet.md): A flyout that opens from the side of the screen, based on the dialog component.
- [Sidebar](https://coss-svelte.vercel.app/docs/components/sidebar.md): A collapsible side panel for navigation and secondary content.
- [Skeleton](https://coss-svelte.vercel.app/docs/components/skeleton.md): A placeholder for loading content.
- [Slider](https://coss-svelte.vercel.app/docs/components/slider.md): A draggable control for selecting values from a continuous range.
- [Spinner](https://coss-svelte.vercel.app/docs/components/spinner.md): An indicator that can be used to show a loading state.
- [Switch](https://coss-svelte.vercel.app/docs/components/switch.md): A toggle control for binary on/off states.
- [Table](https://coss-svelte.vercel.app/docs/components/table.md): A structured data display component with rows and columns.
- [Tabs](https://coss-svelte.vercel.app/docs/components/tabs.md): A component for toggling between related panels on the same page.
- [Textarea](https://coss-svelte.vercel.app/docs/components/textarea.md): A multi-line text input for longer content.
- [Toast](https://coss-svelte.vercel.app/docs/components/toast.md): A temporary notification message that appears and disappears automatically.
- [Toggle](https://coss-svelte.vercel.app/docs/components/toggle.md): A button that switches between two states.
- [Toggle Group](https://coss-svelte.vercel.app/docs/components/toggle-group.md): A group of toggle buttons where one or multiple can be selected.
- [Toolbar](https://coss-svelte.vercel.app/docs/components/toolbar.md): A container for grouping related actions or controls.
- [Tooltip](https://coss-svelte.vercel.app/docs/components/tooltip.md): A small overlay that provides contextual information on hover or focus.

## Machine-readable Registry

- [Registry index](https://coss-svelte.vercel.app/r/index.json): All generated component manifests.
- [Registry item schema](https://coss-svelte.vercel.app/schema/registry-item.json): JSON Schema for one copy-and-own component manifest.
- [Registry index schema](https://coss-svelte.vercel.app/schema/registry-index.json): JSON Schema for the registry index.

## Resources

- [LLMs](https://coss-svelte.vercel.app/docs/llms.md): Agent-facing docs map for the local Svelte component surface.
- [Skills](https://coss-svelte.vercel.app/docs/skills.md): Install coss-svelte knowledge into AI coding agents.