Pagination
Structural pagination primitives with optional direction support.
import * as Pagination from '@gentleduck/primitives/pagination'import * as Pagination from '@gentleduck/primitives/pagination'Anatomy
<Pagination.Root>
<Pagination.Content>
<Pagination.Item />
</Pagination.Content>
</Pagination.Root><Pagination.Root>
<Pagination.Content>
<Pagination.Item />
</Pagination.Content>
</Pagination.Root>Example
<Pagination.Root className="flex justify-center" dir="rtl">
<Pagination.Content className="flex items-center gap-2">
<Pagination.Item>
<button type="button">التالي</button>
</Pagination.Item>
<Pagination.Item>
<button type="button">١</button>
</Pagination.Item>
</Pagination.Content>
</Pagination.Root><Pagination.Root className="flex justify-center" dir="rtl">
<Pagination.Content className="flex items-center gap-2">
<Pagination.Item>
<button type="button">التالي</button>
</Pagination.Item>
<Pagination.Item>
<button type="button">١</button>
</Pagination.Item>
</Pagination.Content>
</Pagination.Root>API
Pagination.Root
Renders a semantic <nav> container (aria-label="pagination" by default).
| Prop | Type | Default | Description |
|---|---|---|---|
dir | 'ltr' | 'rtl' | 'ltr' | Text direction for pagination context. Resolved with useDirection (dir prop -> DirectionProvider -> 'ltr'). |
...props | React.ComponentPropsWithoutRef<'nav'> | -- | Additional props for the root nav element |
Pagination.Content
Renders a <ul> element inside Pagination.Root and inherits direction from root context.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.ComponentPropsWithoutRef<'ul'> | -- | Additional props for the list element |
Pagination.Item
Renders a <li> element inside Pagination.Content and inherits direction from root context.
| Prop | Type | Default | Description |
|---|---|---|---|
...props | React.ComponentPropsWithoutRef<'li'> | -- | Additional props for the list item element |