# chakra-ui/ark

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/chakra-ui-ark).**

5,004 stars · 186 forks · TypeScript · mit

## Links

- GitHub: https://github.com/chakra-ui/ark
- Homepage: https://ark-ui.com
- awesome-repositories: https://awesome-repositories.com/repository/chakra-ui-ark.md

## Topics

`components` `design-system` `headless` `react` `solid` `svelte` `ui` `vue`

## Description

Ark is a headless UI component library that delivers accessible, cross-framework primitives with behavior governed by finite state machines. It provides unstyled components that encapsulate logic and accessibility — including full keyboard navigation, focus management, and WAI-ARIA support — while leaving visual styling entirely to the consumer. Components expose scoped data attributes for CSS targeting and use state machines to produce predictable, testable interactive behavior across every state transition.

The library distinguishes itself through a state propagation model that distributes component state and methods via context, a composition pattern that lets consumers replace rendered elements with custom components through `asChild`, and a unified collection abstraction for managing hierarchical and flat data sets. It maintains identical APIs and behavioral semantics across React, Solid, Vue, and Svelte, enabling a single design system to work across projects. The same architecture powers additional capabilities such as clipboard management, mount/unmount animations, async data loading with filtering and pagination, AI agent integration via a structured component catalog and styling guidelines, and overlay components with nested dialog and popover support.

The component set covers a broad range of interactive UI patterns: form controls (inputs, select menus, checkboxes, radio groups, date pickers, sliders, color pickers, signature pads), overlays (dialogs, popovers, hover cards, drawers, menus), content display (carousels, accordions, collapsibles, progress indicators, scrollable areas, avatars, QR codes), and data management (listboxes, tree views, pagination, clipboard). The library is published as an npm package and its entire source is available at the Chakra UI monorepo on GitHub.

## Tags

### User Interface & Experience

- [Prebuilt UI Components](https://awesome-repositories.com/f/user-interface-experience/prebuilt-ui-components.md) — Provides a comprehensive library of ready-made, unstyled UI components that can be inserted into any application. ([source](https://ark-ui.com/svelte/docs/overview/getting-started))
- [Finite State Machine Controllers](https://awesome-repositories.com/f/user-interface-experience/state-driven-ui-controllers/finite-state-machine-controllers.md) — Governs component logic through explicit states and transitions, ensuring predictable and testable interactive behavior.
- [Accessible Component Libraries](https://awesome-repositories.com/f/user-interface-experience/accessible-component-libraries.md) — Delivers WAI-ARIA compliant components with keyboard navigation, focus management, and screen-reader support.
- [Accessible Form Controls](https://awesome-repositories.com/f/user-interface-experience/accessible-form-controls.md) — Provides composable field wrappers that attach ARIA labels, helper text, and error messages to form controls. ([source](https://ark-ui.com/solid/docs/components/pin-input))
- [Checkbox Groups](https://awesome-repositories.com/f/user-interface-experience/checkbox-groups.md) — Provides a checkbox group component with shared state, selection limits, and select-all. ([source](https://ark-ui.com/react/docs/components/checkbox))
- [Collapsible State Controllers](https://awesome-repositories.com/f/user-interface-experience/collapsible-ui-components/collapsible-state-controllers.md) — Exposes a hook and provider that let parent components read and write the collapsible's open/close state from outside the component tree. ([source](https://ark-ui.com/vue/docs/components/collapsible))
- [Form-Integrated](https://awesome-repositories.com/f/user-interface-experience/color-pickers/form-integrated.md) — Handles form-related state, ARIA attributes, error messages, and hidden input for seamless use with form libraries. ([source](https://ark-ui.com/vue/docs/components/color-picker))
- [Visual Color Pickers](https://awesome-repositories.com/f/user-interface-experience/color-selection-components/visual-color-pickers.md) — Provides a fully accessible, keyboard-navigable visual color picker with area, sliders, and swatches. ([source](https://ark-ui.com/vue/docs/components/color-picker))
- [Combobox Components](https://awesome-repositories.com/f/user-interface-experience/combobox-components.md) — Provides headless combobox components with custom rendering, router integration, and type-safe wrappers. ([source](https://ark-ui.com/react/docs/components/combobox))
- [Component Composition Primitives](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-composition/component-composition-primitives.md) — Allows consumers to replace a primitive's rendered element with a custom component while preserving behavior and accessibility.
- [Pin Input State Controllers](https://awesome-repositories.com/f/user-interface-experience/component-child-utilities/instance-references/parent-accessors/pin-input-state-controllers.md) — Ships a provider/hook that lets parent components read and write the pin input's value, error, and focus state from outside the component. ([source](https://ark-ui.com/solid/docs/components/pin-input))
- [Headless](https://awesome-repositories.com/f/user-interface-experience/component-replacements/headless.md) — Replaces an Ark component's default DOM element with a custom component that inherits all its behavior, styling, and accessibility. ([source](https://ark-ui.com/vue/docs/guides/composition))
- [Headless Slot Substitutions](https://awesome-repositories.com/f/user-interface-experience/component-slot-customization/headless-slot-substitutions.md) — Substitutes a custom component for a standard framework part while preserving its interactive and accessibility behaviors. ([source](https://ark-ui.com/svelte/docs/guides/composition))
- [Cross-Framework Components](https://awesome-repositories.com/f/user-interface-experience/cross-framework-components.md) — Offers identical component APIs and behavior across React, Solid, Vue, and Svelte for a unified design system. ([source](https://cdn.jsdelivr.net/gh/chakra-ui/ark@main/README.md))
- [Configurable Slideshows](https://awesome-repositories.com/f/user-interface-experience/data-display-components/slideshow-displays/configurable-slideshows.md) — Provides a carousel component with autoplay, looping, orientation, slides per page, spacing, variable slide widths, and snap alignment. ([source](https://ark-ui.com/solid/docs/components/carousel))
- [Multi-Mode Date Selection](https://awesome-repositories.com/f/user-interface-experience/date-selection-components/multi-mode-date-selection.md) — Provides a date picker component supporting single, range, and multiple selection modes with constraints and localization. ([source](https://ark-ui.com/solid/docs/components/date-picker))
- [External Component State Hooks](https://awesome-repositories.com/f/user-interface-experience/external-component-state-hooks.md) — Exposes hooks and providers to control collapsible state, reflecting the library's context-based state propagation pattern. ([source](https://ark-ui.com/svelte/docs/components/collapsible))
- [File Uploaders](https://awesome-repositories.com/f/user-interface-experience/file-uploaders.md) — Lets users choose files from their device via button, drag-and-drop, pasting, camera capture, or directory selection, and then submits them. ([source](https://ark-ui.com/svelte/docs/components/file-upload))
- [Accessible Combobox Form Integrations](https://awesome-repositories.com/f/user-interface-experience/form-field-extensions/accessible-combobox-form-integrations.md) — Handles ARIA labels, helper text, and error messages for accessible combobox form fields. ([source](https://ark-ui.com/solid/docs/components/combobox))
- [Form Field State Integrations](https://awesome-repositories.com/f/user-interface-experience/form-field-extensions/accessible-combobox-form-integrations/form-field-state-integrations.md) — Handles form field states, validation cues, ARIA attributes, and integration with external form libraries.
- [Form Fieldsets](https://awesome-repositories.com/f/user-interface-experience/form-fieldsets.md) — Provides form fieldsets for grouping related form controls under a common legend for semantic structure and accessibility. ([source](https://ark-ui.com/vue/docs/components/fieldset))
- [Framework Agnostic UI Logic](https://awesome-repositories.com/f/user-interface-experience/framework-agnostic-ui-logic.md) — Provides identical component APIs and state management across React, Solid, Vue, and Svelte for behavioral consistency.
- [Accessible Form Patterns](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/accessible-form-patterns.md) — Provides accessible form patterns with semantic markup and labeling for assistive technology integration. ([source](https://ark-ui.com/svelte/docs/components/number-input))
- [Hierarchical Menu Organization](https://awesome-repositories.com/f/user-interface-experience/hierarchical-menu-organization.md) — Organizes menu items into labeled groups and nested submenus for hierarchical navigation. ([source](https://ark-ui.com/vue/docs/components/menu))
- [Hover Card Displays](https://awesome-repositories.com/f/user-interface-experience/hover-previews/hover-card-displays.md) — Provides a hover card component that reveals contextual content when the user hovers over a trigger. ([source](https://ark-ui.com/solid/docs/components/hover-card))
- [List Collection Builders](https://awesome-repositories.com/f/user-interface-experience/list-collection-builders.md) — Provides a collection abstraction that builds a structured, traversable data set from a plain array for use in list, select, and tree components. ([source](https://ark-ui.com/react/docs/collections/list-collection))
- [Modal Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs.md) — Ships a modal dialog component with configurable focus, scroll, and dismissal behavior. ([source](https://ark-ui.com/vue/docs/components/dialog))
- [Alert Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/alert-dialogs.md) — Ships an alert dialog that forces explicit dismissal and focuses the safest action. ([source](https://ark-ui.com/vue/docs/components/dialog))
- [Select Inputs](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs/select-inputs.md) — Provides headless select inputs with single and multiple selection, keyboard navigation, and ARIA support. ([source](https://ark-ui.com/svelte/docs/components/select))
- [Single-Select Inputs](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs/single-select-inputs.md) — Provides single-select input components with full keyboard navigation and WAI-ARIA accessibility. ([source](https://ark-ui.com/react/docs/components/radio-group))
- [Pagination Controls](https://awesome-repositories.com/f/user-interface-experience/navigation-components/pagination-controls.md) — Provides pagination controls with data slicing, range display, and dynamic page size. ([source](https://ark-ui.com/vue/docs/components/pagination))
- [Numeric Input Fields](https://awesome-repositories.com/f/user-interface-experience/numeric-inputs/numeric-input-fields.md) — Provides a numeric input component with min/max limits, decimal precision, and locale-aware formatting. ([source](https://ark-ui.com/svelte/docs/components/number-input))
- [Popover Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays.md) — Ships a popover overlay component with keyboard and programmatic open/close support. ([source](https://ark-ui.com/solid/docs/components/popover))
- [Positioned Popovers](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays/positioned-popovers.md) — Positions the popover via placement options, same-width matching, anchor targeting, and an arrow indicator. ([source](https://ark-ui.com/react/docs/components/popover))
- [Modal Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs/modal-overlays.md) — Opens a focused dialog overlay that captures user interaction with configurable open, close, and focus behavior. ([source](https://ark-ui.com/solid/docs/components/dialog))
- [Non-Modal Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs/non-modal-overlays.md) — Provides a dialog variant that disables focus trapping and scroll prevention, allowing users to interact with background content while the overlay is open. ([source](https://ark-ui.com/react/docs/components/dialog))
- [External State Controllers](https://awesome-repositories.com/f/user-interface-experience/pagination-components/pagination-state-providers/external-state-controllers.md) — Provides a universal provider/hook pattern that lets any parent component read and write the state of a child component from outside its tree. ([source](https://ark-ui.com/vue/docs/guides/component-state))
- [Pagination Navigation](https://awesome-repositories.com/f/user-interface-experience/pagination-navigation.md) — Builds a pagination interface with page buttons, size control, and range display using headless state primitives. ([source](https://ark-ui.com/react/docs/components/pagination))
- [Headless Pagination Primitives](https://awesome-repositories.com/f/user-interface-experience/pagination-navigation/headless-pagination-primitives.md) — Delivers headless pagination primitives with stateful page management and automatic data slicing. ([source](https://ark-ui.com/svelte/docs/components/pagination))
- [Popup Menu Triggers](https://awesome-repositories.com/f/user-interface-experience/point-and-click-menu-selectors/popup-menu-triggers.md) — Provides popup menus that open on click, right-click, or long-press triggers. ([source](https://ark-ui.com/svelte/docs/components/menu))
- [State Management](https://awesome-repositories.com/f/user-interface-experience/popovers/state-management.md) — Manages popover visibility via controlled props or hooks, enabling external toggling and programmatic closure. ([source](https://ark-ui.com/react/docs/components/popover))
- [State Machine-Driven Component Logic](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management/component-logic-patterns/state-machine-driven-component-logic.md) — Uses finite state machines to govern component logic, producing type-safe, testable, and bug-resistant interactions. ([source](https://cdn.jsdelivr.net/gh/chakra-ui/ark@main/README.md))
- [Carousel Navigation APIs](https://awesome-repositories.com/f/user-interface-experience/programmatic-triggers/carousel-navigation-apis.md) — Exposes a context-based API and controlled props for managing the carousel's active page from outside the component tree. ([source](https://ark-ui.com/solid/docs/components/carousel))
- [Progress Bars](https://awesome-repositories.com/f/user-interface-experience/progress-bars.md) — Provides progress bars as linear indicators for task completion or elapsed time with configurable bounds and indeterminate state. ([source](https://ark-ui.com/vue/docs/components/progress-linear))
- [Progress Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-indicators.md) — Provides progress indicators for displaying loading states and task completion status with configurable bounds and orientation. ([source](https://ark-ui.com/svelte/docs/components/progress-linear))
- [Range Sliders](https://awesome-repositories.com/f/user-interface-experience/range-sliders.md) — Provides a range slider component with horizontal/vertical orientation, tick marks, and keyboard navigation. ([source](https://ark-ui.com/react/docs/components/slider))
- [Scroll Areas](https://awesome-repositories.com/f/user-interface-experience/scroll-areas.md) — Provides scroll areas with custom scrollbar styling and programmatic control for managing overflowing content. ([source](https://ark-ui.com/vue/docs/components/scroll-area))
- [Scrollable Containers](https://awesome-repositories.com/f/user-interface-experience/scrollable-containers.md) — Renders a scrollable container with custom-styled scrollbars that supports horizontal, vertical, or both scrolling and nesting. ([source](https://ark-ui.com/svelte/docs/components/scroll-area))
- [Scrolling Text Banners](https://awesome-repositories.com/f/user-interface-experience/scrolling-text-banners.md) — Provides a component that scrolls content in a continuous loop without gaps for displaying announcements or rotating information. ([source](https://ark-ui.com/vue/docs/components/marquee))
- [Select Dropdowns](https://awesome-repositories.com/f/user-interface-experience/select-dropdowns.md) — Provides a headless dropdown menu component with selectable items, grouping, and selection callbacks. ([source](https://ark-ui.com/solid/docs/components/menu))
- [Selectable Lists](https://awesome-repositories.com/f/user-interface-experience/selectable-lists.md) — Manages single and multiple selection states in lists with select, deselect, and toggle operations. ([source](https://ark-ui.com/solid/docs/collections/list-selection))
- [Multiple Selections](https://awesome-repositories.com/f/user-interface-experience/selectable-lists/multiple-selections.md) — Supports selecting multiple items from a list and displaying them as removable tags. ([source](https://ark-ui.com/react/docs/components/combobox))
- [Selection Groups](https://awesome-repositories.com/f/user-interface-experience/selection-groups.md) — Supports single, multiple, and grouped selections with constraints and select-all. ([source](https://ark-ui.com/vue/docs/components/select))
- [Searchable Select Inputs](https://awesome-repositories.com/f/user-interface-experience/selection-lists/searchable-select-inputs.md) — Provides a searchable combobox with keyboard navigation, autocomplete, grouping, and accessible rendering. ([source](https://ark-ui.com/svelte/docs/components/combobox))
- [Selection Management Components](https://awesome-repositories.com/f/user-interface-experience/selection-management-components.md) — Provides headless components that manage single, multiple, limited, and highlight-triggered selection states. ([source](https://ark-ui.com/react/docs/components/select))
- [Slide-Out Panels](https://awesome-repositories.com/f/user-interface-experience/slide-out-panels.md) — Provides a slide-in panel component with focus trapping and keyboard accessibility. ([source](https://ark-ui.com/vue/docs/components/drawer))
- [Slider State Controllers](https://awesome-repositories.com/f/user-interface-experience/slider-components/slider-state-controllers.md) — Ships a provider/hook pattern that lets parent components read and write the slider's value, orientation, and focus state from outside the slider tree. ([source](https://ark-ui.com/vue/docs/components/slider))
- [Data-Attribute Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/data-attribute-styling.md) — Exposes scoped data-* attributes on every component part so consumers can target and style elements with pure CSS without any default styles. ([source](https://ark-ui.com/react/docs/overview/getting-started))
- [Unstyled Component Primitives](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/unstyled-component-primitives.md) — Provides pre-built UI components with zero default styling and full WAI-ARIA support, including keyboard navigation, focus management, and RTL. ([source](https://cdn.jsdelivr.net/gh/chakra-ui/ark@main/README.md))
- [CSS Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-styling.md) — Provides headless components that expose data attributes and CSS variables for custom styling without framework lock-in. ([source](https://ark-ui.com/react/docs/guides/styling))
- [Item Navigation and Selection](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/item-navigation-and-selection.md) — Provides a headless menu component that captures item selection and triggers associated actions. ([source](https://ark-ui.com/vue/docs/components/menu))
- [Headless UI Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries/headless-ui-libraries.md) — Develops unstyled, behavior-focused UI primitives that separate logic from presentation, allowing full control over visual styling.
- [Numeric Input Controls](https://awesome-repositories.com/f/user-interface-experience/ui-components/form-input-components/numeric-input-controls.md) — Provides a numeric input component with range validation, step controls, and spinbutton accessibility. ([source](https://ark-ui.com/vue/docs/components/number-input))
- [WAI-ARIA Frameworks](https://awesome-repositories.com/f/user-interface-experience/wai-aria-frameworks.md) — Builds UI component libraries with full WAI-ARIA compliance and unstyled primitives for custom visual design.
- [Angle Inputs](https://awesome-repositories.com/f/user-interface-experience/angle-inputs.md) — Provides a circular angle input component for selecting degree values via a draggable handle. ([source](https://ark-ui.com/svelte/docs/components/angle-slider))
- [CSS Variable Animators](https://awesome-repositories.com/f/user-interface-experience/animation-and-motion-systems/configuration-utility-helpers/animation-configuration/css-variable-animators.md) — Drives component animations and transitions using CSS variables that the library exposes per component. ([source](https://ark-ui.com/solid/docs/guides/styling))
- [Asynchronous Data Fetching](https://awesome-repositories.com/f/user-interface-experience/asynchronous-data-fetching.md) — Provides asynchronous data fetching mechanisms for retrieving and binding remote data to UI components. ([source](https://ark-ui.com/svelte/docs/collections/async-list))
- [User Avatars](https://awesome-repositories.com/f/user-interface-experience/avatar-components/user-avatar-dropdowns/user-avatars.md) — Ships an avatar component that renders a profile image with automatic fallback to initials or icon. ([source](https://ark-ui.com/svelte/docs/components/avatar))
- [Clipboard Copy](https://awesome-repositories.com/f/user-interface-experience/buttons/clipboard-copy.md) — Manages copy state and exposes status feedback for copying text to the clipboard via button or programmatic triggers. ([source](https://ark-ui.com/vue/docs/components/clipboard))
- [Circular Progress Indicators](https://awesome-repositories.com/f/user-interface-experience/canvas-clipping-utilities/circular-clipping/circular-screen-rendering/circular-progress-indicators.md) — Renders a circular progress indicator with configurable range, indeterminate mode, and CSS variable styling. ([source](https://ark-ui.com/vue/docs/components/progress-circular))
- [Card Positioning Configurations](https://awesome-repositories.com/f/user-interface-experience/cards/card-styling/card-positioning-configurations.md) — Provides configurable placement and distance for hover card positioning. ([source](https://ark-ui.com/svelte/docs/components/hover-card))
- [Collapsible UI Components](https://awesome-repositories.com/f/user-interface-experience/collapsible-ui-components.md) — Provides collapsible components that expand and collapse content sections with accessibility support. ([source](https://ark-ui.com/react/docs/components/collapsible))
- [Collapsible Content Stacks](https://awesome-repositories.com/f/user-interface-experience/collapsible-ui-components/collapsible-content-stacks.md) — Displays content in a vertical stack of collapsible sections that expand and collapse individually. ([source](https://ark-ui.com/vue/docs/components/accordion))
- [Deferred Rendering Collapsibles](https://awesome-repositories.com/f/user-interface-experience/collapsible-ui-components/collapsible-content-stacks/deferred-rendering-collapsibles.md) — Defers collapsible content rendering until first opened and removes it from the DOM when closed to save resources. ([source](https://ark-ui.com/vue/docs/components/collapsible))
- [Nested Collapsible Structures](https://awesome-repositories.com/f/user-interface-experience/collapsible-ui-components/nested-collapsible-structures.md) — Allows collapsible components to be placed inside one another to build hierarchical disclosure structures. ([source](https://ark-ui.com/vue/docs/components/collapsible))
- [Color Pickers](https://awesome-repositories.com/f/user-interface-experience/color-pickers.md) — Manages the selected color and open state of the picker programmatically via props or an external hook. ([source](https://ark-ui.com/vue/docs/components/color-picker))
- [Custom Primitive Wrappers](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-composition/component-composition-primitives/custom-primitive-wrappers.md) — Wraps any HTML element or custom component so it behaves like an Ark UI primitive and receives the same API. ([source](https://ark-ui.com/vue/docs/guides/composition))
- [AI-Accessible Component Catalogs](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-apis/interface-configuration-definitions/component-interfaces/exposed-component-apis/ai-accessible-component-catalogs.md) — Exposes a structured catalog of components, examples, and styling rules so AI agents generate correct and consistent code. ([source](https://ark-ui.com/solid/docs/ai/mcp-server))
- [Type-Safe Component APIs](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-apis/interface-configuration-definitions/type-safe-component-apis.md) — Provides type-safe component APIs that preserve full type inference on collection items and event handlers. ([source](https://ark-ui.com/svelte/docs/components/listbox))
- [Menu Hierarchies](https://awesome-repositories.com/f/user-interface-experience/context-menu-customizations/conditional-menu-items/menu-hierarchies.md) — Supports hierarchical menus with nested submenus and full arrow key navigation. ([source](https://ark-ui.com/svelte/docs/components/menu))
- [Suggestion Menu Control](https://awesome-repositories.com/f/user-interface-experience/context-menu-customizations/conditional-menu-items/menu-interaction-utilities/suggestion-menu-control.md) — Exposes menu state and methods via a hook for programmatic open, close, and external control. ([source](https://ark-ui.com/svelte/docs/components/menu))
- [Accordion Panels](https://awesome-repositories.com/f/user-interface-experience/data-display-components/accordion-panels.md) — Provides an accessible accordion panel component that toggles content visibility in a stacked layout. ([source](https://ark-ui.com/svelte/docs/components/accordion))
- [Data List Managers](https://awesome-repositories.com/f/user-interface-experience/data-display-components/list-components/list-filtering-utilities/data-list-managers.md) — Includes an async data list component with loading, filtering, sorting, and pagination built in. ([source](https://ark-ui.com/solid/docs/collections/async-list))
- [Slideshow Displays](https://awesome-repositories.com/f/user-interface-experience/data-display-components/slideshow-displays.md) — Ships an accessible slideshow component with configurable autoplay, orientation, and slide management. ([source](https://ark-ui.com/react/docs/components/carousel))
- [Programmatic QR Code Controllers](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/qr-code-components/programmatic-qr-code-controllers.md) — Exposes a hook and provider that let parent components read and write the QR code's state and methods from outside the component tree. ([source](https://ark-ui.com/vue/docs/components/qr-code))
- [Date and Time Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers.md) — Customizes picker display with multiple months, inline layout, locale, and month/year view. ([source](https://ark-ui.com/vue/docs/components/date-picker))
- [Form-Integrated Date-Time Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers/form-integrated-date-time-pickers.md) — Provides date-time picker components that integrate with native HTML forms and support combined date and time selection. ([source](https://ark-ui.com/vue/docs/components/date-picker))
- [Range Selection Interfaces](https://awesome-repositories.com/f/user-interface-experience/date-pickers/range-selection-interfaces.md) — Provides a date range selection interface with segment-based input for start and end dates. ([source](https://ark-ui.com/react/docs/components/date-input))
- [Month and Year Pickers](https://awesome-repositories.com/f/user-interface-experience/date-pickers/range-selection/month-and-year-pickers.md) — Switches calendar to month or year picker views for coarse-grained selection. ([source](https://ark-ui.com/react/docs/components/date-picker))
- [Selection Restrictions](https://awesome-repositories.com/f/user-interface-experience/date-pickers/selection-restrictions.md) — Restricts selectable dates via min/max boundaries, unavailable days, and preset shortcuts. ([source](https://ark-ui.com/react/docs/components/date-picker))
- [Date Range Restrictions](https://awesome-repositories.com/f/user-interface-experience/date-range-schedulers/date-range-restrictions.md) — Constrains selectable dates using min/max boundaries and a custom validation function. ([source](https://ark-ui.com/vue/docs/components/date-picker))
- [Date Selection Components](https://awesome-repositories.com/f/user-interface-experience/date-selection-components.md) — Renders a calendar interface for single date selection, suitable for form patterns. ([source](https://ark-ui.com/svelte/docs/components/date-picker))
- [Segmented Date Inputs](https://awesome-repositories.com/f/user-interface-experience/date-selection-components/localized-input-components/segmented-date-inputs.md) — Provides a segmented date input component with configurable granularity from day to second. ([source](https://ark-ui.com/react/docs/components/date-input))
- [Multiple Selection](https://awesome-repositories.com/f/user-interface-experience/date-selection-components/multiple-selection.md) — Supports single, range, and multiple date selection modes controlled by a prop. ([source](https://ark-ui.com/react/docs/components/date-picker))
- [Quick](https://awesome-repositories.com/f/user-interface-experience/date-selection-components/selection-shortcuts/quick.md) — Provides preset triggers and today buttons in date pickers for fast selection of common or current dates. ([source](https://ark-ui.com/vue/docs/components/date-picker))
- [Unstyled Popup Menus](https://awesome-repositories.com/f/user-interface-experience/detached-popup-triggers/unstyled-popup-menus.md) — Ships an unstyled, accessible popup menu with selection, grouping, checkables, nested submenus, and multi-trigger support. ([source](https://ark-ui.com/react/docs/components/menu))
- [Focus Management](https://awesome-repositories.com/f/user-interface-experience/dialogs/focus-management.md) — Manages keyboard focus assignment on dialog open and focus restoration on close for accessibility. ([source](https://ark-ui.com/react/docs/components/dialog))
- [Nested](https://awesome-repositories.com/f/user-interface-experience/dialogs/nested.md) — Enables stacking multiple modal dialogs with depth-aware layering indicators for nested interactions. ([source](https://ark-ui.com/react/docs/components/dialog))
- [Digital Signature Pads](https://awesome-repositories.com/f/user-interface-experience/digital-signature-pads.md) — Captures handwritten signatures on a canvas with form integration and export for submission. ([source](https://ark-ui.com/solid/docs/components/signature-pad))
- [Externally Controllable Signature Pads](https://awesome-repositories.com/f/user-interface-experience/digital-signature-pads/externally-controllable-signature-pads.md) — Provides a hook and provider to access the signature pad's state and methods from outside the component. ([source](https://ark-ui.com/react/docs/components/signature-pad))
- [Form Field Integrations](https://awesome-repositories.com/f/user-interface-experience/digital-signature-pads/form-field-integrations.md) — Provides a signature pad component with full form field accessibility and state management integration. ([source](https://ark-ui.com/vue/docs/components/signature-pad))
- [Drawer State Controllers](https://awesome-repositories.com/f/user-interface-experience/drawers/drawer-state-controllers.md) — Manages drawer open state externally using props or a context provider and hook. ([source](https://ark-ui.com/solid/docs/components/drawer))
- [Trigger Coordination](https://awesome-repositories.com/f/user-interface-experience/drawers/trigger-coordination.md) — Coordinates multiple trigger elements to open a single dialog and updates content based on the active trigger. ([source](https://ark-ui.com/react/docs/components/dialog))
- [Asynchronous Option Loading](https://awesome-repositories.com/f/user-interface-experience/dynamic-option-management/asynchronous-option-loading.md) — Loads options asynchronously, defers mounting, virtualizes long lists, and fits dropdowns within the viewport. ([source](https://ark-ui.com/react/docs/components/select))
- [Empty State Placeholders](https://awesome-repositories.com/f/user-interface-experience/empty-states/empty-state-actions/empty-state-placeholders.md) — Provides empty state placeholders for collections with no items. ([source](https://ark-ui.com/react/docs/components/select))
- [Floating Window Components](https://awesome-repositories.com/f/user-interface-experience/floating-window-components.md) — Provides a draggable, resizable, non-modal floating window component. ([source](https://ark-ui.com/vue/docs/components/floating-panel))
- [Third-Party Form Library Adapters](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/form-handling/react-form-libraries/third-party-form-library-adapters.md) — Connects Ark UI components with React Hook Form, TanStack Form, and Vee Validate for advanced form state management. ([source](https://ark-ui.com/react/docs/guides/forms))
- [Control Grouping](https://awesome-repositories.com/f/user-interface-experience/form-controls/control-grouping.md) — Groups related form controls under a shared label and propagates disabled and invalid states to children. ([source](https://ark-ui.com/react/docs/components/fieldset))
- [Form Handling Libraries](https://awesome-repositories.com/f/user-interface-experience/form-handling-libraries.md) — Works with popular form state management libraries for complex form logic and validation. ([source](https://ark-ui.com/vue/docs/guides/forms))
- [Checkbox Inputs](https://awesome-repositories.com/f/user-interface-experience/form-input-components/checkbox-inputs.md) — Creates an accessible checkbox that integrates with form state and field components for validation and error text. ([source](https://ark-ui.com/vue/docs/components/checkbox))
- [List Layout Arrangements](https://awesome-repositories.com/f/user-interface-experience/grid-layouts/list-layout-arrangements.md) — Provides a list layout component that arranges items in a grid with keyboard navigation support. ([source](https://ark-ui.com/svelte/docs/components/listbox))
- [Grouped Option Lists](https://awesome-repositories.com/f/user-interface-experience/hierarchical-menu-organization/grouped-option-lists.md) — Ships headless combobox and select components that group options into labeled sections. ([source](https://ark-ui.com/react/docs/components/select))
- [Hover Card State Controllers](https://awesome-repositories.com/f/user-interface-experience/hover-state-trackers/hover-card-state-controllers.md) — Ships external state control for hover card open and close behavior. ([source](https://ark-ui.com/svelte/docs/components/hover-card))
- [Checkable Menu Items](https://awesome-repositories.com/f/user-interface-experience/icons/menu-item/checkable-menu-items.md) — Provides menu items that support checkbox and radio button selection behavior. ([source](https://ark-ui.com/vue/docs/components/menu))
- [Interactive Menu Items](https://awesome-repositories.com/f/user-interface-experience/icons/menu-item/interactive-menu-items.md) — Provides menu items with checkboxes, radio groups, and links for interactive selection and navigation. ([source](https://ark-ui.com/svelte/docs/components/menu))
- [Verification Code Inputs](https://awesome-repositories.com/f/user-interface-experience/input-field-enhancements/input-field-initializers/styled-input-fields/verification-code-inputs.md) — Provides a verification code input component with automatic focus shifting and paste support. ([source](https://ark-ui.com/svelte/docs/components/pin-input))
- [List Item Grouping](https://awesome-repositories.com/f/user-interface-experience/item-lists/list-item-grouping.md) — Provides list components that group items by property and filter with custom functions. ([source](https://ark-ui.com/svelte/docs/components/listbox))
- [Component Inventories](https://awesome-repositories.com/f/user-interface-experience/list-components/component-inventories.md) — Returns a complete inventory of available components so an AI agent can reference every part. ([source](https://ark-ui.com/react/docs/ai/mcp-server))
- [List Loading Workflows](https://awesome-repositories.com/f/user-interface-experience/list-views/list-loading-workflows.md) — Provides list loading workflows for managing transitions from skeleton to actual data in list views. ([source](https://ark-ui.com/vue/docs/collections/async-list))
- [Hover Card](https://awesome-repositories.com/f/user-interface-experience/loading-indicators/delay-configurations/hover-card.md) — Adjusts delay before hover card appears and after cursor leaves the trigger. ([source](https://ark-ui.com/svelte/docs/components/hover-card))
- [Destructive Action Confirmation Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs/alert-dialogs/destructive-action-confirmation-dialogs.md) — Shows an alert dialog for destructive actions that requires explicit dismissal and focuses the safest action. ([source](https://ark-ui.com/solid/docs/components/dialog))
- [Scrubbing Interactions](https://awesome-repositories.com/f/user-interface-experience/mouse-event-handlers/scrubbing-trackers/scrubbing-interactions.md) — Implements a scrubbing interaction using the Pointer Lock API for precise numeric value adjustment. ([source](https://ark-ui.com/vue/docs/components/number-input))
- [Grouped Combobox Items](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs/select-inputs/comboboxes/grouped-combobox-items.md) — Groups related items in combobox selection lists under labeled categories. ([source](https://ark-ui.com/vue/docs/components/combobox))
- [Entry and Exit Animations](https://awesome-repositories.com/f/user-interface-experience/notification-customization/entry-and-exit-animations.md) — Provides entry and exit animations for component mount and unmount transitions using CSS keyframes. ([source](https://ark-ui.com/svelte/docs/guides/animation))
- [Layer Index Stacking](https://awesome-repositories.com/f/user-interface-experience/overlay-components/layer-index-stacking.md) — Manages overlay z-index stacking using a CSS variable for correct ordering of nested dialogs and popovers. ([source](https://ark-ui.com/svelte/docs/guides/styling))
- [Dismissal Behavior Configurators](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays/dismissal-behavior-configurators.md) — Configures popover dismissal via outside click or escape key and enables modal mode with focus trapping. ([source](https://ark-ui.com/svelte/docs/components/popover))
- [Interaction Modality Configurators](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays/interaction-modality-configurators.md) — Configures close-on-interaction, escape key, modal mode, and proper z-index layering within dialogs. ([source](https://ark-ui.com/react/docs/components/popover))
- [Modal Popovers](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays/modal-popovers.md) — Provides a modal popover component that traps focus and blocks background interaction. ([source](https://ark-ui.com/solid/docs/components/popover))
- [Nested Popovers](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays/nested-popovers.md) — Allows popovers to be nested with independent open states and positioning for multi-level overlays. ([source](https://ark-ui.com/react/docs/components/popover))
- [Nested Dialog Layers](https://awesome-repositories.com/f/user-interface-experience/overlay-dialogs/prompt-dialogs/nested-dialog-layers.md) — Layers child dialogs on top of parent dialogs with visual styling cues for the interaction depth. ([source](https://ark-ui.com/solid/docs/components/dialog))
- [Password Input Fields](https://awesome-repositories.com/f/user-interface-experience/password-input-fields.md) — Renders an accessible password input with visibility toggle, autocomplete hints, and password manager suppression. ([source](https://ark-ui.com/react/docs/components/password-input))
- [OTP Inputs](https://awesome-repositories.com/f/user-interface-experience/password-input-fields/otp-inputs.md) — Provides a sequence of single-character input fields for OTP entry with autocomplete and keyboard navigation. ([source](https://ark-ui.com/react/docs/components/pin-input))
- [PIN Input Components](https://awesome-repositories.com/f/user-interface-experience/pin-input-components.md) — Provides a segmented PIN input that auto-advances focus and supports paste and keyboard entry for verification codes. ([source](https://ark-ui.com/solid/docs/components/pin-input))
- [Context Menu Triggers](https://awesome-repositories.com/f/user-interface-experience/point-and-click-menu-selectors/context-menu-triggers.md) — Provides context menu components triggered by right-click or long-press interactions. ([source](https://ark-ui.com/solid/docs/components/menu))
- [Trigger Coordination](https://awesome-repositories.com/f/user-interface-experience/popovers/trigger-coordination.md) — Shares a single hover card instance across multiple triggers with repositioning. ([source](https://ark-ui.com/svelte/docs/components/hover-card))
- [Circular Progress Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-bar-widgets/progress-value-displays/circular-progress-indicators.md) — Provides a circular progress indicator with determinate and indeterminate modes. ([source](https://ark-ui.com/react/docs/components/progress-circular))
- [Progress & Value Indicators](https://awesome-repositories.com/f/user-interface-experience/progress-value-indicators.md) — Provides a linear progress indicator with determinate and indeterminate modes, configurable bounds, and accessible labels. ([source](https://ark-ui.com/solid/docs/components/progress-linear))
- [Form Integrations](https://awesome-repositories.com/f/user-interface-experience/radio-groups/form-integrations.md) — Integrates radio groups with native HTML forms via hidden inputs for submission and validation. ([source](https://ark-ui.com/solid/docs/components/radio-group))
- [Keyboard Navigations](https://awesome-repositories.com/f/user-interface-experience/radio-groups/keyboard-navigations.md) — Implements full keyboard navigation for radio groups with arrow key focus movement and space key selection. ([source](https://ark-ui.com/solid/docs/components/radio-group))
- [State Controllers](https://awesome-repositories.com/f/user-interface-experience/radio-groups/state-controllers.md) — Provides a radio group component with external state control via a hook and provider pattern. ([source](https://ark-ui.com/solid/docs/components/radio-group))
- [Circular Sliders](https://awesome-repositories.com/f/user-interface-experience/range-sliders/circular-sliders.md) — Provides a circular slider component for selecting angle values within a 0 to 360 degree range. ([source](https://ark-ui.com/vue/docs/components/angle-slider))
- [Numeric Range Sliders](https://awesome-repositories.com/f/user-interface-experience/range-sliders/time-range-selections/numeric-range-sliders.md) — Provides a range slider with two thumbs for selecting a numeric minimum and maximum value. ([source](https://ark-ui.com/svelte/docs/components/slider))
- [Rating Interfaces](https://awesome-repositories.com/f/user-interface-experience/rating-interfaces.md) — Presents a set of clickable icons for users to assign a rating, with keyboard navigation and form integration. ([source](https://ark-ui.com/svelte/docs/components/rating-group))
- [Searchable Filter Inputs](https://awesome-repositories.com/f/user-interface-experience/search-filters/searchable-filter-inputs.md) — Provides searchable filter inputs for filtering lists based on text input with automatic debouncing. ([source](https://ark-ui.com/svelte/docs/collections/async-list))
- [Native Form Synchronization](https://awesome-repositories.com/f/user-interface-experience/select-components/native-form-synchronization.md) — Synchronizes custom select components with hidden native form elements for submission. ([source](https://ark-ui.com/vue/docs/components/select))
- [Option Grouping](https://awesome-repositories.com/f/user-interface-experience/select-dropdowns/option-grouping.md) — Provides radio group components that enforce mutual exclusivity with full keyboard and ARIA support. ([source](https://ark-ui.com/vue/docs/components/radio-group))
- [Single Selection Option Groups](https://awesome-repositories.com/f/user-interface-experience/select-dropdowns/option-grouping/single-selection-option-groups.md) — Restricts users to choose exactly one item from a predefined list of mutually exclusive options. ([source](https://ark-ui.com/svelte/docs/components/radio-group))
- [Select All Toggles](https://awesome-repositories.com/f/user-interface-experience/selectable-lists/select-all-toggles.md) — Provides a headless list component with a select-all toggle for bulk item management. ([source](https://ark-ui.com/vue/docs/components/listbox))
- [Show More/Less Components](https://awesome-repositories.com/f/user-interface-experience/show-more-less-components.md) — Provides an interactive component that collapses content to a fixed preview and expands on user interaction. ([source](https://ark-ui.com/vue/docs/components/collapsible))
- [Headless Element Factories](https://awesome-repositories.com/f/user-interface-experience/single-element-dom-components/headless-element-factories.md) — Provides a factory to create custom unstyled, accessible elements that behave like library-built primitives. ([source](https://ark-ui.com/react/docs/guides/composition))
- [Data Attribute Styling Guidelines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/component-style-customization/css-variable-styling-systems/data-attribute-styling-guidelines.md) — Delivers the data attributes and CSS variables used by components so styling follows the defined rules. ([source](https://ark-ui.com/react/docs/ai/mcp-server))
- [Rich Text Editable Regions](https://awesome-repositories.com/f/user-interface-experience/text-editing-components/rich-text-editable-regions.md) — Ships an inline editing component that toggles between display and editable input states. ([source](https://ark-ui.com/vue/docs/components/editable))
- [Animation Transition Components](https://awesome-repositories.com/f/user-interface-experience/ui-components/animation-transition-components.md) — Provides animation transition components that manage entry and exit lifecycle using JavaScript hooks. ([source](https://ark-ui.com/svelte/docs/guides/animation))
- [Close Confirmation Prompters](https://awesome-repositories.com/f/user-interface-experience/ui-components/feedback-overlay-components/close-buttons/close-confirmation-prompters.md) — Intercepts dialog close attempts to prompt users for confirmation and prevent accidental data loss. ([source](https://ark-ui.com/react/docs/components/dialog))
- [Calendar Display Configurations](https://awesome-repositories.com/f/user-interface-experience/ui-components/form-input-components/calendar-components/calendar-display-configurations.md) — Configures calendar display with multiple months, inline layout, and fixed weeks. ([source](https://ark-ui.com/react/docs/components/date-picker))
- [Dual Input](https://awesome-repositories.com/f/user-interface-experience/ui-components/form-input-components/calendar-components/dual-input.md) — Ships a date input that lets users type or click a date via a combined segment and calendar interface. ([source](https://ark-ui.com/react/docs/components/date-input))
- [Rating Inputs](https://awesome-repositories.com/f/user-interface-experience/ui-components/form-input-components/rating-inputs.md) — Builds a star-rating input that supports half-star steps, keyboard navigation, and form integration. ([source](https://ark-ui.com/solid/docs/components/rating-group))
- [User Confirmation Dialogs](https://awesome-repositories.com/f/user-interface-experience/user-confirmation-dialogs.md) — Provides dialog components that intercept close attempts to prompt confirmation before dismissal. ([source](https://ark-ui.com/svelte/docs/components/dialog))
- [Dialog Close Interceptors](https://awesome-repositories.com/f/user-interface-experience/user-confirmation-dialogs/dialog-close-interceptors.md) — Intercepts dialog close attempts to display a confirmation prompt for unsaved changes. ([source](https://ark-ui.com/vue/docs/components/dialog))
- [Popover-in-Dialog Integrations](https://awesome-repositories.com/f/user-interface-experience/user-confirmation-dialogs/dialog-close-interceptors/popover-in-dialog-integrations.md) — Integrates a popover within a dialog by either unmounting on dialog close or rendering without a portal for proper layering. ([source](https://ark-ui.com/solid/docs/components/popover))
- [Menu-Dialog Composition](https://awesome-repositories.com/f/user-interface-experience/user-confirmation-dialogs/menu-dialog-composition.md) — Composes menus with dialogs, ensuring proper cleanup and opening confirmation dialogs from menu items. ([source](https://ark-ui.com/vue/docs/components/menu))
- [Locale-Aware Value Formatting](https://awesome-repositories.com/f/user-interface-experience/value-formatting-tags/locale-aware-value-formatting.md) — Applies locale-aware number formatting using Intl.NumberFormat for currency, decimals, and precision. ([source](https://ark-ui.com/vue/docs/components/number-input))
- [Visibility Toggles](https://awesome-repositories.com/f/user-interface-experience/visibility-toggles.md) — Provides a generic visibility toggle mechanism that preserves component state and DOM structure during collapse. ([source](https://ark-ui.com/svelte/docs/components/collapsible))
- [Custom Option Entry](https://awesome-repositories.com/f/user-interface-experience/visual-status-indicators/status-labels/user-defined/custom-option-entry.md) — Lets users add custom entries to selection lists when no exact match exists. ([source](https://ark-ui.com/react/docs/components/combobox))
- [Z-Index Management](https://awesome-repositories.com/f/user-interface-experience/window-management/z-index-management.md) — Coordinates stacking order of dismissible overlays using a shared base z-index and layer index. ([source](https://ark-ui.com/vue/docs/guides/styling))

### Part of an Awesome List

- [Seamless Scrolling Loops](https://awesome-repositories.com/f/awesome-lists/devtools/seamless-scrolling-loops.md) — Provides a component that scrolls content in a continuous, seamless loop without user interaction for displaying announcements or rotating information. ([source](https://ark-ui.com/svelte/docs/components/marquee))
- [Secure Text Inputs](https://awesome-repositories.com/f/awesome-lists/devtools/text-inputs/text-input-fields/secure-text-inputs.md) — Provides a password input component with character masking and accessibility support. ([source](https://ark-ui.com/svelte/docs/components/password-input))
- [Usage Pattern Catalogs](https://awesome-repositories.com/f/awesome-lists/devtools/component-examples/usage-pattern-catalogs.md) — Lists example names for each component to show what usage patterns exist for AI agent reference. ([source](https://ark-ui.com/react/docs/ai/mcp-server))
- [File Upload](https://awesome-repositories.com/f/awesome-lists/devtools/file-upload.md) — Delivers a file upload component supporting drag-and-drop, validation, previews, and multiple sources. ([source](https://ark-ui.com/solid/docs/components/file-upload))
- [Auto-Complete Libraries](https://awesome-repositories.com/f/awesome-lists/devtools/search-libraries/auto-complete-libraries.md) — Highlights and auto-fills the first matching option as the user types in a combobox. ([source](https://ark-ui.com/solid/docs/components/combobox))
- [Masked Text Inputs](https://awesome-repositories.com/f/awesome-lists/devtools/text-inputs/text-input-fields/masked-text-inputs.md) — Provides a masked input field for entering sensitive strings such as passwords or API keys. ([source](https://ark-ui.com/vue/docs/components/password-input))
- [List Filtering](https://awesome-repositories.com/f/awesome-lists/security/vpn-as-a-service/list-filtering.md) — Filters list items in real time by applying a filter function to the collection. ([source](https://ark-ui.com/react/docs/components/listbox))

### Data & Databases

- [Unified Collection Abstractions](https://awesome-repositories.com/f/data-databases/typed-data-collections/data-directory-collections/structured-data-collection-managers/unified-collection-abstractions.md) — Provides a unified collection abstraction for managing hierarchical and flat data sets in UI components.
- [UI List Filtering](https://awesome-repositories.com/f/data-databases/data-querying/table-item-filters/ui-list-filtering.md) — Filters list items dynamically based on user input via a filter function. ([source](https://ark-ui.com/vue/docs/components/listbox))
- [List Sorting Selectors](https://awesome-repositories.com/f/data-databases/data-sorting-engines/list-sorting-selectors.md) — Sort items on the client after fetching, or send sort parameters to the server for server-side sorting. ([source](https://ark-ui.com/svelte/docs/collections/async-list))
- [Date and Time Libraries](https://awesome-repositories.com/f/data-databases/date-and-time-libraries.md) — Adapts date picker locale, week start, and parsing, and integrates a time input for combined date‑time selection. ([source](https://ark-ui.com/react/docs/components/date-picker))
- [Pagination Data Slicers](https://awesome-repositories.com/f/data-databases/dimensional-data-slicing/pagination-data-slicers.md) — Provides a utility that slices a data array to the items for the current page and page size. ([source](https://ark-ui.com/react/docs/components/pagination))

### DevOps & Infrastructure

- [Component State Injectors](https://awesome-repositories.com/f/devops-infrastructure/automation-orchestration/task-execution-frameworks/state-inspection-tools/runtime-state-modifiers/component-state-injectors.md) — Provides a context-based state propagation model that lets any child component read and modify a parent's internal state via hooks and providers. ([source](https://ark-ui.com/vue/docs/guides/component-state))

### Software Engineering & Architecture

- [Hierarchical Data Structures](https://awesome-repositories.com/f/software-engineering-architecture/hierarchical-data-structures.md) — Provides a collection abstraction for managing hierarchical data with traversal and manipulation methods. ([source](https://ark-ui.com/svelte/docs/collections/tree-collection))
- [Accessibility ID Coordination](https://awesome-repositories.com/f/software-engineering-architecture/shared-state-management/component-context-sharing/accessibility-id-coordination.md) — Coordinates shared identifiers between components to produce correct ARIA bindings and interaction behavior. ([source](https://ark-ui.com/react/docs/guides/composition))
- [Context State Propagators](https://awesome-repositories.com/f/software-engineering-architecture/state-synchronization-patterns/context-state-propagators.md) — Distributes component state and methods through provider components and hooks for external control and child access.
- [Virtualized Lists](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations/virtualized-lists.md) — Ships a virtualized list component for efficiently rendering large datasets in dropdowns and select inputs. ([source](https://ark-ui.com/svelte/docs/components/combobox))
- [Optimized Option Lists](https://awesome-repositories.com/f/software-engineering-architecture/performance-reliability/performance-optimization/data-handling-throughput/large-dataset-optimizations/virtualized-lists/optimized-option-lists.md) — Optimizes large option lists with async loading, virtualization, and empty state handling. ([source](https://ark-ui.com/vue/docs/components/select))
- [Hover Card State Accessors](https://awesome-repositories.com/f/software-engineering-architecture/state-synchronization-patterns/context-state-propagators/hover-card-state-accessors.md) — Provides hooks and context to access hover card state from child components. ([source](https://ark-ui.com/svelte/docs/components/hover-card))
- [Structural Navigation](https://awesome-repositories.com/f/software-engineering-architecture/tree-traversal-algorithms/document-tree-traversers/structural-navigation.md) — Delivers built-in tree navigation methods for moving between parent, child, and sibling nodes. ([source](https://ark-ui.com/vue/docs/collections/tree-collection))
- [Animation-Aware Unmounting](https://awesome-repositories.com/f/software-engineering-architecture/trees/component-tree-unmounting/animation-aware-unmounting.md) — Provides animation-aware unmounting that delays DOM removal until exit animations complete. ([source](https://ark-ui.com/vue/docs/guides/animation))

### Web Development

- [Component Composition](https://awesome-repositories.com/f/web-development/component-composition.md) — Implements the asChild pattern to merge custom components into headless primitives while preserving behavior and accessibility. ([source](https://ark-ui.com/react/docs/guides/composition))
- [Headless Element Wrappers](https://awesome-repositories.com/f/web-development/custom-element-frameworks/headless-element-wrappers.md) — Wraps an HTML element with framework-generated attributes and behaviors so it becomes a first-class framework component. ([source](https://ark-ui.com/svelte/docs/guides/composition))
- [DOM Access References](https://awesome-repositories.com/f/web-development/dom-access-references.md) — Exposes refs on every headless component so consumers can directly access the underlying DOM node for imperative operations. ([source](https://ark-ui.com/svelte/docs/guides/ref))
- [Data Attribute Styling](https://awesome-repositories.com/f/web-development/element-attributes/data-attribute-styling.md) — Exposes scoped data attributes on every component part for CSS targeting of structural and state hooks. ([source](https://ark-ui.com/vue/docs/guides/styling))
- [Form Field State Management](https://awesome-repositories.com/f/web-development/form-field-state-management.md) — Provides a flexible container that propagates validation and interaction states to child form elements. ([source](https://ark-ui.com/react/docs/components/field))
- [Dialog State Controllers](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/component-lifecycle-utilities/state-preservation-controls/dialog-state-controllers.md) — Provides a context-based API and controlled props for opening, closing, and toggling dialog visibility from outside the component tree. ([source](https://ark-ui.com/react/docs/components/dialog))
- [HTML Form Integration](https://awesome-repositories.com/f/web-development/html-form-integration.md) — Submits selected date values as part of native HTML forms using a name attribute. ([source](https://ark-ui.com/react/docs/components/date-picker))
- [Infinite Scroll Implementations](https://awesome-repositories.com/f/web-development/infinite-scroll-implementations.md) — Provides infinite scroll implementations for automatically loading additional content as users scroll. ([source](https://ark-ui.com/svelte/docs/collections/async-list))
- [Section Navigation Libraries](https://awesome-repositories.com/f/web-development/section-navigation-libraries.md) — Provides a tab-like navigation component for switching between related sections without leaving the page. ([source](https://ark-ui.com/react/docs/components/segment-group))
- [Programmatic Controllers](https://awesome-repositories.com/f/web-development/state-management/local-widget-state/programmatic-controllers.md) — Exposes programmatic control over menu open, close, reposition, and highlight state. ([source](https://ark-ui.com/vue/docs/components/menu))

### Artificial Intelligence & ML

- [Component Library Integrations](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-agent-integrations/component-library-integrations.md) — Exposes component listings, examples, usage patterns, and styling guidelines so AI agents can generate consistent code. ([source](https://ark-ui.com/vue/docs/ai/mcp-server))
- [Automatic Dependent Propagation](https://awesome-repositories.com/f/artificial-intelligence-ml/codebase-change-summarization/automatic-dependent-propagation.md) — Provides automatic dependent propagation for updating dependents when dependencies change. ([source](https://ark-ui.com/svelte/docs/collections/async-list))
- [Component Catalog Exposers](https://awesome-repositories.com/f/artificial-intelligence-ml/developer-ai-assistance/component-catalog-exposers.md) — Exposes a structured catalog of components, examples, and styling rules so AI agents can generate consistent code. ([source](https://ark-ui.com/svelte/docs/ai/mcp-server))

### Business & Productivity Software

- [Digital Signature Capture Tools](https://awesome-repositories.com/f/business-productivity-software/digital-signature-capture-tools.md) — Provides a headless signature pad component for capturing handwritten signatures. ([source](https://ark-ui.com/svelte/docs/components/signature-pad))

### Development Tools & Productivity

- [Behavior-Inheriting Wrappers](https://awesome-repositories.com/f/development-tools-productivity/custom-component-wrapping/behavior-inheriting-wrappers.md) — Wraps a custom component so it inherits the behavior and accessibility of the parent UI component without losing its own styling. ([source](https://ark-ui.com/solid/docs/guides/composition))
- [Multi-Trigger Menu Sharing](https://awesome-repositories.com/f/development-tools-productivity/keyboard-shortcut-mappers/menu-triggered-shortcut-simulators/multi-trigger-menu-sharing.md) — Attaches a single menu to multiple triggers and repositions it to whichever trigger is activated. ([source](https://ark-ui.com/svelte/docs/components/menu))

### Education & Learning Resources

- [Component Usage Snippets](https://awesome-repositories.com/f/education-learning-resources/educational-resources/reference-and-media/books-docs-reference/code-examples/component-usage-snippets.md) — Fetches the source code and usage pattern for a specific component example to guide code generation. ([source](https://ark-ui.com/react/docs/ai/mcp-server))
- [Runtime Tree Data Managers](https://awesome-repositories.com/f/education-learning-resources/tree-data-structures/runtime-tree-data-managers.md) — Manages hierarchical data in collections with traversal, manipulation, and querying for tree views. ([source](https://ark-ui.com/react/docs/collections/tree-collection))

### Graphics & Multimedia

- [Signature Exporters](https://awesome-repositories.com/f/graphics-multimedia/design-to-image-exporters/signature-exporters.md) — Converts drawn signature paths into image data URLs for preview or submission. ([source](https://ark-ui.com/svelte/docs/components/signature-pad))
- [Signature Previews](https://awesome-repositories.com/f/graphics-multimedia/design-to-image-exporters/signature-exporters/signature-previews.md) — Ships a signature pad component that renders a preview image of the drawn signature for user confirmation. ([source](https://ark-ui.com/vue/docs/components/signature-pad))
- [Image Cropping Tools](https://awesome-repositories.com/f/graphics-multimedia/image-editing-processing/image-editors/image-cropping-tools.md) — Provides an interactive image cropper with controls for zoom, rotation, and aspect ratio adjustment. ([source](https://ark-ui.com/react/docs/components/image-cropper))
- [Branded QR Codes](https://awesome-repositories.com/f/graphics-multimedia/qr-code-generators/branded-qr-codes.md) — Supports adding an image overlay to QR codes for logos or branding, with configurable position and size. ([source](https://ark-ui.com/vue/docs/components/qr-code))

### Operating Systems & Systems Programming

- [Non-Modal Floating Panels](https://awesome-repositories.com/f/operating-systems-systems-programming/display-windowing/tiling-window-managers/floating-window-management/editor-floating-windows/non-modal-floating-panels.md) — Provides a non-modal floating panel component that allows background interaction. ([source](https://ark-ui.com/svelte/docs/components/floating-panel))

### Security & Cryptography

- [QR Code Error Correction Level Selectors](https://awesome-repositories.com/f/security-cryptography/error-correction-codes/barcode-redundancy-levels/qr-code-error-correction-level-selectors.md) — Lets consumers set one of four QR Code error correction levels to balance data density against damage tolerance. ([source](https://ark-ui.com/vue/docs/components/qr-code))
- [Input Integrations](https://awesome-repositories.com/f/security-cryptography/password-management/strength-analyzers/input-integrations.md) — Combines password input with real-time strength analysis and visual feedback. ([source](https://ark-ui.com/solid/docs/components/password-input))
- [Real-Time Feedback](https://awesome-repositories.com/f/security-cryptography/password-management/strength-analyzers/real-time-feedback.md) — Integrates password strength analysis with real-time visual feedback in the input component. ([source](https://ark-ui.com/svelte/docs/components/password-input))