majiayu000 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
asChildto render as custom element while keeping behavior - State access: Use
Component.Contextwith 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
Overlays and Popups
Layout and Navigation
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 |