# Coss UI > coss ui documentation and resources. Use this skill when working with coss ui or when the user mentions coss ui. - Skill: `hk-vk/coss-ui` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add hk-vk/coss-ui` - Raw SKILL.md: https://api.skillmd.com/api/skills/hk-vk/coss-ui/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Docs & Writing - Author: hk-vk (https://skillmd.com/u/hk-vk) - Updated: 2026-09-10 - Page: https://skillmd.com/skills/hk-vk/coss-ui --- # coss ui ## Available Resources ### Overview - **Introduction** - URL: https://coss.com/ui/docs/index.md - **Get Started** - URL: https://coss.com/ui/docs/get-started.md - **Roadmap** - URL: https://coss.com/ui/docs/roadmap.md - **Radix / shadcn Migration**: A comprehensive guide for migrating from shadcn/ui and Radix UI to coss ui components. - URL: https://coss.com/ui/docs/radix-shadcn-migration.md ### Components - **Accordion**: A set of collapsible panels with headings. - URL: https://coss.com/ui/docs/components/accordion.md - **Alert**: A callout for displaying important information. - URL: https://coss.com/ui/docs/components/alert.md - **Alert Dialog**: A modal dialog that interrupts the user workflow for critical confirmations. - URL: https://coss.com/ui/docs/components/alert-dialog.md - **Autocomplete**: An input that suggests options as you type. - URL: https://coss.com/ui/docs/components/autocomplete.md - **Avatar**: A visual representation of a user or entity. - URL: https://coss.com/ui/docs/components/avatar.md - **Badge**: A small status indicator or label component. - URL: https://coss.com/ui/docs/components/badge.md - **Breadcrumb**: Displays the path to the current resource using a hierarchy of links. - URL: https://coss.com/ui/docs/components/breadcrumb.md - **Button**: A button or a component that looks like a button. - URL: https://coss.com/ui/docs/components/button.md - **Card**: A content container for grouping related information. - URL: https://coss.com/ui/docs/components/card.md - **Checkbox**: A binary toggle input for selecting one or multiple options. - URL: https://coss.com/ui/docs/components/checkbox.md - **Checkbox Group**: A collection of related checkboxes with group-level control. - URL: https://coss.com/ui/docs/components/checkbox-group.md - **Collapsible**: A component that toggles visibility of content sections. - URL: https://coss.com/ui/docs/components/collapsible.md - **Combobox**: An input combined with a list of predefined items to select. - URL: https://coss.com/ui/docs/components/combobox.md - **Command**: A command palette component built with Dialog and Autocomplete for searching and executing commands. - URL: https://coss.com/ui/docs/components/command.md - **Dialog**: A modal overlay for displaying content that requires user interaction. - URL: https://coss.com/ui/docs/components/dialog.md - **Empty**: A container for displaying empty state information. - URL: https://coss.com/ui/docs/components/empty.md - **Field**: A wrapper component for form inputs with labels and validation. - URL: https://coss.com/ui/docs/components/field.md - **Fieldset**: A group of related form fields with a common label. - URL: https://coss.com/ui/docs/components/fieldset.md - **Form**: A complete form implementation with validation and submission handling. - URL: https://coss.com/ui/docs/components/form.md - **Frame**: A container component for displaying content in a frame. - URL: https://coss.com/ui/docs/components/frame.md - **Group**: A container component for grouping related content with consistent styling. - URL: https://coss.com/ui/docs/components/group.md - **Input**: A native input element. - URL: https://coss.com/ui/docs/components/input.md - **Input Group**: A flexible component for grouping inputs with addons, buttons, and other elements. - URL: https://coss.com/ui/docs/components/input-group.md - **Kbd**: A component for displaying keyboard keys and shortcuts. - URL: https://coss.com/ui/docs/components/kbd.md - **Label**: Renders an accessible label associated with controls. - URL: https://coss.com/ui/docs/components/label.md - **Menu**: A list of actions or options revealed on demand. - URL: https://coss.com/ui/docs/components/menu.md - **Meter**: A visual representation of a value within a known range. - URL: https://coss.com/ui/docs/components/meter.md - **Number Field**: A specialized input for numeric values with increment/decrement controls. - URL: https://coss.com/ui/docs/components/number-field.md - **Pagination**: A pagination with page navigation, next and previous links. - URL: https://coss.com/ui/docs/components/pagination.md - **Popover**: A floating container that appears near a trigger element. - URL: https://coss.com/ui/docs/components/popover.md - **Preview Card**: A rich preview component for displaying linked content. - URL: https://coss.com/ui/docs/components/preview-card.md - **Progress**: A visual indicator showing the completion status of a task. - URL: https://coss.com/ui/docs/components/progress.md - **Radio Group**: A set of mutually exclusive options presented as radio buttons. - URL: https://coss.com/ui/docs/components/radio-group.md - **Scroll Area**: A container with custom scrollbars for overflow content. - URL: https://coss.com/ui/docs/components/scroll-area.md - **Select**: A common form component for choosing a predefined value in a dropdown menu. - URL: https://coss.com/ui/docs/components/select.md - **Separator**: A visual divider for separating content sections. - URL: https://coss.com/ui/docs/components/separator.md - **Sheet**: A flyout that opens from the side of the screen, based on the dialog component. - URL: https://coss.com/ui/docs/components/sheet.md - **Skeleton**: A placeholder for loading content. - URL: https://coss.com/ui/docs/components/skeleton.md - **Slider**: A draggable control for selecting values from a continuous range. - URL: https://coss.com/ui/docs/components/slider.md - **Spinner**: An indicator that can be used to show a loading state. - URL: https://coss.com/ui/docs/components/spinner.md - **Switch**: A toggle control for binary on/off states. - URL: https://coss.com/ui/docs/components/switch.md - **Table**: A structured data display component with rows and columns. - URL: https://coss.com/ui/docs/components/table.md - **Tabs**: A navigation component for switching between different views or content panels. - URL: https://coss.com/ui/docs/components/tabs.md - **Textarea**: A multi-line text input for longer content. - URL: https://coss.com/ui/docs/components/textarea.md - **Toast**: A temporary notification message that appears and disappears automatically. - URL: https://coss.com/ui/docs/components/toast.md - **Toggle**: A button that switches between two states. - URL: https://coss.com/ui/docs/components/toggle.md - **Toggle Group**: A group of toggle buttons where one or multiple can be selected. - URL: https://coss.com/ui/docs/components/toggle-group.md - **Toolbar**: A container for grouping related actions or controls. - URL: https://coss.com/ui/docs/components/toolbar.md - **Tooltip**: A small overlay that provides contextual information on hover or focus. - URL: https://coss.com/ui/docs/components/tooltip.md ## How to Use This Skill Reference these resources when working with coss ui.