Track a collection of DOM elements in the exact order they're rendered in the DOM and watch the DOM for any change to their order.

Open preview in a new tab
Items count: 0
ğŸŽ Apple
🍇 Grape
🍊 Orange
Edit withViteNext.js
import "./style.css";
import * as Ariakit from "@ariakit/react";
export default function Example() {
const collection = Ariakit.useCollectionStore();
const length = collection.useState((state) => state.renderedItems.length);
return (
<Ariakit.Collection store={collection} className="collection">
<div>Items count: {length}</div>


Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.

Read latest issue

No Spam. Unsubscribe at any time.