Hash 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.

install

source · Clone the upstream repo

git clone https://github.com/hashintel/hash

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/hashintel/hash "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.codex/skills/ark-ui" ~/.claude/skills/hashintel-hash-ark-ui-67c6ee && rm -rf "$T"

manifest: .codex/skills/ark-ui/SKILL.md

source content

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