AI SummaryHeadless component library providing accessible, unstyled React primitives for building custom UI components with full control over styling and behavior.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "ark-ui" prompt rules to my project. Repository: https://github.com/hashintel/hash Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
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.
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 |
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 |
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts