--- name: hashintel-ark-ui description: "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." license: "NOASSERTION" metadata: decimalai-skill-id: "dd40c12d-7e39-4353-a4c3-d2895b955fa0" decimalai-version-id: "e806fefa-bc37-47f9-8a8f-af1ad0e5ca02" decimalai-version: "1" decimalai-body-sha256: "92bca252c5e5cf4dd6cb2594fc5f28344e75e0e47af48ad9d190b71b18d1a3ab" decimalai-name: "hashintel/ark-ui" decimalai-format: "1" decimalai-invocation: "model" decimalai-category: "frontend" decimalai-source: "https://app.decimal.ai/s/hashintel-ark-ui@1/SKILL.md" --- # 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 |