# Ark UI > Headless component library for React. Use when building UI components with @ark-ui/react, implementing accessible form inputs, overlays, navigation patterns, or needing guidance on Ark UI's data attributes, composition (asChild), and state management patterns. - Skill: `majiayu000/ark-ui` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds add majiayu000/ark-ui` - Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/ark-ui/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: AGPL-3.0 - Author: majiayu000 (https://skillmd.com/u/majiayu000) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/majiayu000/ark-ui --- # Ark UI Headless component library providing accessible, unstyled React primitives for building custom UI components with full control over styling and behavior. ## Key Patterns - **Root pattern**: `Slider.Root`, `Slider.Track`, etc. - **CSS styling**: `[data-scope="slider"][data-part="track"]` - **State styling**: `[data-state="open"]`, `[data-state="checked"]` - **Composition**: Use `asChild` to render as custom element while keeping behavior - **State access**: Use `Component.Context` with render props - **Programmatic control**: Use hooks like `useAccordion()` ## Core Concepts | Topic | URL | | --- | --- | | Getting Started | https://ark-ui.com/react/docs/overview/getting-started | | Styling (data attributes) | https://ark-ui.com/react/docs/guides/styling | | Composition (asChild) | https://ark-ui.com/react/docs/guides/composition | | Component State | https://ark-ui.com/react/docs/guides/component-state | | Animation | https://ark-ui.com/react/docs/guides/animation | | Forms Integration | https://ark-ui.com/react/docs/guides/forms | | Refs | https://ark-ui.com/react/docs/guides/ref | | Closed Components | https://ark-ui.com/react/docs/guides/closed-components | ## Components ### Form Inputs | Component | URL | | --- | --- | | Checkbox | https://ark-ui.com/react/docs/components/checkbox | | Combobox | https://ark-ui.com/react/docs/components/combobox | | Color Picker | https://ark-ui.com/react/docs/components/color-picker | | Date Picker | https://ark-ui.com/react/docs/components/date-picker | | Editable | https://ark-ui.com/react/docs/components/editable | | Field | https://ark-ui.com/react/docs/components/field | | Fieldset | https://ark-ui.com/react/docs/components/fieldset | | File Upload | https://ark-ui.com/react/docs/components/file-upload | | Listbox | https://ark-ui.com/react/docs/components/listbox | | Number Input | https://ark-ui.com/react/docs/components/number-input | | Password Input | https://ark-ui.com/react/docs/components/password-input | | Pin Input | https://ark-ui.com/react/docs/components/pin-input | | Radio Group | https://ark-ui.com/react/docs/components/radio-group | | Select | https://ark-ui.com/react/docs/components/select | | Signature Pad | https://ark-ui.com/react/docs/components/signature-pad | | Slider | https://ark-ui.com/react/docs/components/slider | | Switch | https://ark-ui.com/react/docs/components/switch | | Tags Input | https://ark-ui.com/react/docs/components/tags-input | ### Overlays and Popups | Component | URL | | --- | --- | | Dialog | https://ark-ui.com/react/docs/components/dialog | | Floating Panel | https://ark-ui.com/react/docs/components/floating-panel | | Hover Card | https://ark-ui.com/react/docs/components/hover-card | | Menu | https://ark-ui.com/react/docs/components/menu | | Popover | https://ark-ui.com/react/docs/components/popover | | Toast | https://ark-ui.com/react/docs/components/toast | | Tooltip | https://ark-ui.com/react/docs/components/tooltip | | Tour | https://ark-ui.com/react/docs/components/tour | ### Layout and Navigation | Component | URL | | --- | --- | | Accordion | https://ark-ui.com/react/docs/components/accordion | | Carousel | https://ark-ui.com/react/docs/components/carousel | | Collapsible | https://ark-ui.com/react/docs/components/collapsible | | Pagination | https://ark-ui.com/react/docs/components/pagination | | Scroll Area | https://ark-ui.com/react/docs/components/scroll-area | | Splitter | https://ark-ui.com/react/docs/components/splitter | | Steps | https://ark-ui.com/react/docs/components/steps | | Tabs | https://ark-ui.com/react/docs/components/tabs | | Tree View | https://ark-ui.com/react/docs/components/tree-view | ### Display and Feedback | Component | URL | | --- | --- | | Avatar | https://ark-ui.com/react/docs/components/avatar | | Clipboard | https://ark-ui.com/react/docs/components/clipboard | | Marquee | https://ark-ui.com/react/docs/components/marquee | | Progress Circular | https://ark-ui.com/react/docs/components/progress-circular | | Progress Linear | https://ark-ui.com/react/docs/components/progress-linear | | QR Code | https://ark-ui.com/react/docs/components/qr-code | | Rating Group | https://ark-ui.com/react/docs/components/rating-group | | Timer | https://ark-ui.com/react/docs/components/timer | ### Selection and Toggle | Component | URL | | --- | --- | | Angle Slider | https://ark-ui.com/react/docs/components/angle-slider | | Segment Group | https://ark-ui.com/react/docs/components/segment-group | | Toggle | https://ark-ui.com/react/docs/components/toggle | | Toggle Group | https://ark-ui.com/react/docs/components/toggle-group | ## Collections | Collection | URL | | --- | --- | | Async List | https://ark-ui.com/react/docs/collections/async-list | | List Collection | https://ark-ui.com/react/docs/collections/list-collection | | List Selection | https://ark-ui.com/react/docs/collections/list-selection | | Tree Collection | https://ark-ui.com/react/docs/collections/tree-collection | ## Utilities | Utility | URL | | --- | --- | | Client Only | https://ark-ui.com/react/docs/utilities/client-only | | Download Trigger | https://ark-ui.com/react/docs/utilities/download-trigger | | Environment | https://ark-ui.com/react/docs/utilities/environment | | Focus Trap | https://ark-ui.com/react/docs/utilities/focus-trap | | Format Byte | https://ark-ui.com/react/docs/utilities/format-byte | | Format Number | https://ark-ui.com/react/docs/utilities/format-number | | Format Relative Time | https://ark-ui.com/react/docs/utilities/format-relative-time | | Frame | https://ark-ui.com/react/docs/utilities/frame | | Highlight | https://ark-ui.com/react/docs/utilities/highlight | | JSON Tree View | https://ark-ui.com/react/docs/utilities/json-tree-view | | Locale | https://ark-ui.com/react/docs/utilities/locale | | Presence | https://ark-ui.com/react/docs/utilities/presence |