--- title: "Components" description: "Unstyled, accessible Vue primitives. Sixty components covering overlays, forms, dates, menus, and more." canonical_url: "https://vinicunca.dev/akar/components" --- # Components > Unstyled, accessible Vue primitives. Sixty components covering overlays, forms, dates, menus, and more. Each page includes anatomy, API tables generated from Akar v2.0.20 source, keyboard interactions, and a CSS demo when one exists. [**Accordion**](https://vinicunca.dev/akar/components/accordion) A vertically stacked set of interactive headings that each reveal an associated section of content. [**Alert Dialog**](https://vinicunca.dev/akar/components/alert-dialog) A modal dialog that interrupts the user with important content and expects a response. [**Aspect Ratio**](https://vinicunca.dev/akar/components/aspect-ratio) Displays content within a desired ratio. [**Autocomplete**](https://vinicunca.dev/akar/components/autocomplete) An input with suggestions that allows free-form text entry. Unlike Combobox, the value is the input text itself rather than a selected item. [**Avatar**](https://vinicunca.dev/akar/components/avatar) An image element with a fallback for representing the user. [**Calendar**](https://vinicunca.dev/akar/components/calendar) Displays dates and days of the week, facilitating date-related interactions. [**Checkbox**](https://vinicunca.dev/akar/components/checkbox) A control that allows the user to toggle between checked and not checked. [**Collapsible**](https://vinicunca.dev/akar/components/collapsible) An interactive component which expands/collapses a panel. [**Color Area**](https://vinicunca.dev/akar/components/color-area) A two-dimensional area for selecting color values in a specific color space. [**Color Field**](https://vinicunca.dev/akar/components/color-field) An input field for entering and editing color values in various formats. [**Color Slider**](https://vinicunca.dev/akar/components/color-slider) A slider control for adjusting individual color channels. [**Color Swatch Picker**](https://vinicunca.dev/akar/components/color-swatch-picker) A component that allows users to select from a set of predefined colors, often used for themes or branding. [**Color Swatch**](https://vinicunca.dev/akar/components/color-swatch) A predefined color block that allows users to quickly select commonly used or brand-specific colors. [**Combobox**](https://vinicunca.dev/akar/components/combobox) Choose from a list of suggested values with full keyboard support. [**Context Menu**](https://vinicunca.dev/akar/components/context-menu) Displays a menu located at the pointer, triggered by a right-click or a long-press. [**Date Field**](https://vinicunca.dev/akar/components/date-field) Enables users to input specific dates within a designated field. [**Date Picker**](https://vinicunca.dev/akar/components/date-picker) Facilitates the selection of dates through an input and calendar-based interface. [**Date Range Field**](https://vinicunca.dev/akar/components/date-range-field) Allows users to input a range of dates within a designated field. [**Date Range Picker**](https://vinicunca.dev/akar/components/date-range-picker) Facilitates the selection of date ranges through an input and calendar-based interface. [**Dialog**](https://vinicunca.dev/akar/components/dialog) A window overlaid on either the primary window or another dialog window, rendering the content underneath inert. [**Drawer**](https://vinicunca.dev/akar/components/drawer) A panel that slides in from the edge of the screen, with support for swipe-to-dismiss, snap points, and nested drawers. [**Dropdown Menu**](https://vinicunca.dev/akar/components/dropdown-menu) Displays a menu to the user—such as a set of actions or functions—triggered by a button. [**Editable**](https://vinicunca.dev/akar/components/editable) Displays an input field used for editing a single line of text, rendering as static text on load. [**Field**](https://vinicunca.dev/akar/components/field) Accessible wiring between a label, control, description, and error message, with built-in validation. [**Form**](https://vinicunca.dev/akar/components/form) Extends the native form element with server error display and submit-time validation gating. [**Hover Card**](https://vinicunca.dev/akar/components/hover-card) For sighted users to preview content available behind a link. [**Label**](https://vinicunca.dev/akar/components/label) Renders an accessible label associated with controls. [**Listbox**](https://vinicunca.dev/akar/components/listbox) A control that allows the user to toggle between checked and not checked. [**Menubar**](https://vinicunca.dev/akar/components/menubar) A visually persistent menu common in desktop applications that provides quick [**MonthPicker**](https://vinicunca.dev/akar/components/month-picker) Presents a calendar view tailored for selecting months. [**MonthRangePicker**](https://vinicunca.dev/akar/components/month-range-picker) Presents a calendar view tailored for selecting month ranges. [**Navigation Menu**](https://vinicunca.dev/akar/components/navigation-menu) A collection of links for navigating websites. [**Number Field**](https://vinicunca.dev/akar/components/number-field) A number field allows a user to enter a number and increment or decrement the value using stepper buttons. [**Pagination**](https://vinicunca.dev/akar/components/pagination) Displays data in paged format and provides navigation between pages. [**Pin Input**](https://vinicunca.dev/akar/components/pin-input) A sequence of one-character alphanumeric inputs. [**Popover**](https://vinicunca.dev/akar/components/popover) Displays rich content in a portal, triggered by a button. [**Progress**](https://vinicunca.dev/akar/components/progress) Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. [**Radio Group**](https://vinicunca.dev/akar/components/radio-group) A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time. [**RangeCalendar**](https://vinicunca.dev/akar/components/range-calendar) Presents a calendar view tailored for selecting date ranges. [**Rating**](https://vinicunca.dev/akar/components/rating) A star-rating input where the user selects a score, with support for fractional values. [**Scroll Area**](https://vinicunca.dev/akar/components/scroll-area) Augments native scroll functionality for custom, cross-browser styling. [**Select**](https://vinicunca.dev/akar/components/select) Displays a list of options for the user to pick from—triggered by a button. [**Separator**](https://vinicunca.dev/akar/components/separator) Visually or semantically separates content. [**Slider**](https://vinicunca.dev/akar/components/slider) An input where the user selects a value from within a given range. [**Splitter**](https://vinicunca.dev/akar/components/splitter) A component that divides your layout into resizable sections. [**Stepper**](https://vinicunca.dev/akar/components/stepper) A set of steps that are used to indicate progress through a multi-step process. [**Switch**](https://vinicunca.dev/akar/components/switch) A control that allows the user to toggle between checked and not checked. [**Tabs**](https://vinicunca.dev/akar/components/tabs) A set of layered sections of content—known as tab panels—that are displayed one at a time. [**Tag Group**](https://vinicunca.dev/akar/components/tag-group) A focusable list of tags that can be navigated, selected and removed with the keyboard. [**Tags Input**](https://vinicunca.dev/akar/components/tags-input) Tags input render tags inside an input, followed by an actual text input. [**Time Field**](https://vinicunca.dev/akar/components/time-field) Enables users to input specific times within a designated field. [**Time Range Field**](https://vinicunca.dev/akar/components/time-range-field) Allows users to input a range of times within a designated field. [**Toast**](https://vinicunca.dev/akar/components/toast) A succinct message that is displayed temporarily. [**Toggle Group**](https://vinicunca.dev/akar/components/toggle-group) A set of two-state buttons that can be toggled on or off. [**Toggle**](https://vinicunca.dev/akar/components/toggle) A two-state button that can be either on or off. [**Toolbar**](https://vinicunca.dev/akar/components/toolbar) A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus. [**Tooltip**](https://vinicunca.dev/akar/components/tooltip) A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. [**Tree**](https://vinicunca.dev/akar/components/tree) A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator. [**YearPicker**](https://vinicunca.dev/akar/components/year-picker) Presents a calendar view tailored for selecting years. [**YearRangePicker**](https://vinicunca.dev/akar/components/year-range-picker) Presents a calendar view tailored for selecting year ranges. ## Sitemap See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.