diff --git a/.changeset/mosaic-pagination.md b/.changeset/mosaic-pagination.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/mosaic-pagination.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/mosaic/src/components/pagination/index.ts b/packages/mosaic/src/components/pagination/index.ts
new file mode 100644
index 00000000000..afa801cd83d
--- /dev/null
+++ b/packages/mosaic/src/components/pagination/index.ts
@@ -0,0 +1,2 @@
+export { Pagination } from './pagination';
+export type { PaginationProps } from './pagination';
diff --git a/packages/mosaic/src/components/pagination/page-items.ts b/packages/mosaic/src/components/pagination/page-items.ts
new file mode 100644
index 00000000000..b1d94647ea7
--- /dev/null
+++ b/packages/mosaic/src/components/pagination/page-items.ts
@@ -0,0 +1,33 @@
+export type PageItem = number | 'start-ellipsis' | 'end-ellipsis';
+
+function range(start: number, end: number): number[] {
+  const pages: number[] = [];
+  for (let page = start; page <= end; page++) {
+    pages.push(page);
+  }
+  return pages;
+}
+
+export function getPageItems(page: number, pageCount: number, siblingCount: number): PageItem[] {
+  if (pageCount <= 1) {
+    return [1];
+  }
+
+  const windowStart = Math.max(Math.min(page - siblingCount, pageCount - 2 * siblingCount - 2), 3);
+  const windowEnd = Math.min(Math.max(page + siblingCount, 2 * siblingCount + 3), pageCount - 2);
+
+  const items: PageItem[] = [1];
+  if (windowStart > 3) {
+    items.push('start-ellipsis');
+  } else if (pageCount > 3) {
+    items.push(2);
+  }
+  items.push(...range(windowStart, windowEnd));
+  if (windowEnd < pageCount - 2) {
+    items.push('end-ellipsis');
+  } else if (pageCount > 2) {
+    items.push(pageCount - 1);
+  }
+  items.push(pageCount);
+  return items;
+}
diff --git a/packages/mosaic/src/components/pagination/pagination.styles.ts b/packages/mosaic/src/components/pagination/pagination.styles.ts
new file mode 100644
index 00000000000..19e7e7bf259
--- /dev/null
+++ b/packages/mosaic/src/components/pagination/pagination.styles.ts
@@ -0,0 +1,53 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { colorVars, space, typeScaleVars } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  root: {
+    gap: space['4'],
+    alignItems: 'center',
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+  },
+  controls: {
+    gap: space['1'],
+    alignItems: 'center',
+    display: 'flex',
+  },
+  hitTarget: {
+    position: 'relative',
+    '::after': {
+      insetBlock: 0,
+      insetInline: `calc(${space['1']} / -2)`,
+      content: '""',
+      position: 'absolute',
+    },
+  },
+  page: {
+    color: {
+      default: colorVars['--cl-color-foreground-secondary'],
+      ':where([aria-current="page"])': colorVars['--cl-color-foreground'],
+    },
+  },
+  ellipsis: {
+    alignItems: 'center',
+    color: colorVars['--cl-color-foreground-secondary'],
+    display: 'inline-flex',
+    justifyContent: 'center',
+    height: space['7'],
+    width: space['7'],
+  },
+  pageSize: {
+    gap: space['2'],
+    alignItems: 'center',
+    display: 'flex',
+  },
+  pageSizeOption: {
+    paddingBlock: 0,
+    paddingInline: space['2'],
+    fontSize: typeScaleVars['--cl-text-xs-size'],
+    lineHeight: typeScaleVars['--cl-text-xs-leading'],
+    minHeight: space['7'],
+  },
+});
diff --git a/packages/mosaic/src/components/pagination/pagination.test.tsx b/packages/mosaic/src/components/pagination/pagination.test.tsx
new file mode 100644
index 00000000000..e693b0d07e3
--- /dev/null
+++ b/packages/mosaic/src/components/pagination/pagination.test.tsx
@@ -0,0 +1,427 @@
+import * as stylex from '@stylexjs/stylex';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { rtl } from '../../utils/rtl.styles';
+import { getPageItems } from './page-items';
+import { Pagination } from './pagination';
+import { styles } from './pagination.styles';
+
+const atoms = stylex.create({
+  spaced: { marginTop: '8px' },
+});
+
+function controls(): ReturnType<typeof within> {
+  const element = document.querySelector('.cl-pagination-controls');
+  if (!(element instanceof HTMLElement)) {
+    throw new Error('Pagination controls did not render');
+  }
+  return within(element);
+}
+
+describe('getPageItems', () => {
+  it('shows every page when they all fit', () => {
+    expect(getPageItems(1, 2, 1)).toEqual([1, 2]);
+    expect(getPageItems(2, 3, 1)).toEqual([1, 2, 3]);
+    expect(getPageItems(1, 5, 1)).toEqual([1, 2, 3, 4, 5]);
+    expect(getPageItems(1, 7, 1)).toEqual([1, 2, 3, 4, 5, 6, 7]);
+  });
+
+  it('keeps the sequence the same length as the page moves', () => {
+    expect(getPageItems(1, 10, 1)).toEqual([1, 2, 3, 4, 5, 'end-ellipsis', 10]);
+    expect(getPageItems(10, 10, 1)).toEqual([1, 'start-ellipsis', 6, 7, 8, 9, 10]);
+  });
+
+  it('keeps the current page, its siblings, and both ends', () => {
+    expect(getPageItems(5, 10, 1)).toEqual([1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10]);
+    expect(getPageItems(5, 10, 2)).toEqual([1, 2, 3, 4, 5, 6, 7, 'end-ellipsis', 10]);
+  });
+
+  it('shows the page instead of an ellipsis that would hide only one', () => {
+    expect(getPageItems(4, 10, 1)).toEqual([1, 2, 3, 4, 5, 'end-ellipsis', 10]);
+    expect(getPageItems(7, 10, 1)).toEqual([1, 'start-ellipsis', 6, 7, 8, 9, 10]);
+  });
+
+  it('renders a single page', () => {
+    expect(getPageItems(1, 1, 1)).toEqual([1]);
+  });
+});
+
+describe('Mosaic Pagination', () => {
+  it('renders a labelled nav with the styling contract', () => {
+    render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={10}
+      />,
+    );
+    const nav = screen.getByRole('navigation', { name: 'Pagination' });
+    expect(nav).toHaveClass('cl-pagination');
+  });
+
+  it('uses the label prop as the accessible name', () => {
+    render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={10}
+        label='Invoices'
+      />,
+    );
+    expect(screen.getByRole('navigation', { name: 'Invoices' })).toBeInTheDocument();
+  });
+
+  it('derives the page count from totalItems and pageSize', () => {
+    render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={10}
+      />,
+    );
+    const pages = controls()
+      .getAllByRole('button')
+      .map(button => button.textContent)
+      .filter(Boolean);
+    expect(pages).toEqual(['1', '2', '3', '4', '5', '10']);
+  });
+
+  it('marks the current page', () => {
+    render(
+      <Pagination
+        page={3}
+        totalItems={100}
+        pageSize={10}
+      />,
+    );
+    expect(screen.getByRole('button', { name: '3' })).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByRole('button', { name: '2' })).not.toHaveAttribute('aria-current');
+  });
+
+  it('calls onChange with the clicked page', async () => {
+    const onChange = vi.fn();
+    render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={10}
+        onChange={onChange}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: '2' }));
+    expect(onChange).toHaveBeenCalledWith(2);
+  });
+
+  it('moves by step from the previous and next buttons', async () => {
+    const onChange = vi.fn();
+    render(
+      <Pagination
+        page={5}
+        totalItems={100}
+        pageSize={10}
+        step={2}
+        onChange={onChange}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Previous page' }));
+    expect(onChange).toHaveBeenLastCalledWith(3);
+    await userEvent.click(screen.getByRole('button', { name: 'Next page' }));
+    expect(onChange).toHaveBeenLastCalledWith(7);
+  });
+
+  it('clamps a step that would overshoot the ends', async () => {
+    const onChange = vi.fn();
+    render(
+      <Pagination
+        page={9}
+        totalItems={100}
+        pageSize={10}
+        step={5}
+        onChange={onChange}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Next page' }));
+    expect(onChange).toHaveBeenLastCalledWith(10);
+  });
+
+  it('disables previous on the first page and next on the last', () => {
+    const { rerender } = render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={10}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Previous page' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Next page' })).toBeEnabled();
+
+    rerender(
+      <Pagination
+        page={10}
+        totalItems={100}
+        pageSize={10}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Previous page' })).toBeEnabled();
+    expect(screen.getByRole('button', { name: 'Next page' })).toBeDisabled();
+  });
+
+  it('renders first and last buttons only when asked', async () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <Pagination
+        page={5}
+        totalItems={100}
+        pageSize={10}
+        onChange={onChange}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: 'First page' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Last page' })).not.toBeInTheDocument();
+
+    rerender(
+      <Pagination
+        page={5}
+        totalItems={100}
+        pageSize={10}
+        onChange={onChange}
+        hasFirstLast
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'First page' }));
+    expect(onChange).toHaveBeenLastCalledWith(1);
+    await userEvent.click(screen.getByRole('button', { name: 'Last page' }));
+    expect(onChange).toHaveBeenLastCalledWith(10);
+  });
+
+  it('disables every control when disabled', () => {
+    render(
+      <Pagination
+        page={5}
+        totalItems={100}
+        pageSize={10}
+        hasFirstLast
+        disabled
+      />,
+    );
+    expect(screen.getByRole('navigation')).toHaveAttribute('data-disabled', '');
+    for (const button of screen.getAllByRole('button')) {
+      expect(button).toBeDisabled();
+    }
+    expect(screen.getByRole('combobox')).toBeDisabled();
+  });
+
+  it('shows the page size in the results-per-page select', () => {
+    render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={25}
+      />,
+    );
+    expect(screen.getByRole('combobox', { name: 'Results per page 25' })).toBeInTheDocument();
+  });
+
+  it('calls onPageSizeChange with the chosen page size', async () => {
+    const onPageSizeChange = vi.fn();
+    render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={10}
+        onPageSizeChange={onPageSizeChange}
+      />,
+    );
+    await userEvent.click(screen.getByRole('combobox'));
+    await userEvent.click(screen.getByRole('option', { name: '50' }));
+    expect(onPageSizeChange).toHaveBeenCalledWith(50);
+  });
+
+  it('uses the pageSizeLabel prop as the page size label', () => {
+    render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={10}
+        pageSizeLabel='Rows per page'
+      />,
+    );
+    expect(screen.getByText('Rows per page')).toHaveClass('cl-text');
+    expect(screen.getByRole('combobox', { name: 'Rows per page 10' })).toBeInTheDocument();
+  });
+
+  it('uses the control label props as the control names', () => {
+    render(
+      <Pagination
+        page={2}
+        totalItems={100}
+        pageSize={10}
+        hasFirstLast
+        firstPageLabel='Start'
+        previousPageLabel='Back'
+        nextPageLabel='Forward'
+        lastPageLabel='End'
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Start' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Forward' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'End' })).toBeInTheDocument();
+  });
+
+  it('mirrors the direction-aware control icons under rtl', () => {
+    render(
+      <Pagination
+        page={2}
+        totalItems={100}
+        pageSize={10}
+        hasFirstLast
+      />,
+    );
+    const mirror = stylex.props(rtl.mirror).className ?? '';
+    for (const name of ['First page', 'Previous page', 'Next page', 'Last page']) {
+      expect(screen.getByRole('button', { name }).querySelector('svg')).toHaveClass(mirror);
+    }
+  });
+
+  it('extends every control hit target across the gap', () => {
+    render(
+      <Pagination
+        page={2}
+        totalItems={100}
+        pageSize={10}
+        hasFirstLast
+      />,
+    );
+    const hitTarget = stylex.props(styles.hitTarget).className ?? '';
+    for (const name of ['First page', 'Previous page', '2', 'Next page', 'Last page']) {
+      expect(screen.getByRole('button', { name })).toHaveClass(hitTarget);
+    }
+  });
+
+  it('renders the page size label as secondary sm text', () => {
+    render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={10}
+      />,
+    );
+    const label = screen.getByText('Results per page');
+    expect(label).toHaveClass('cl-text', 'cl-pagination-label');
+    expect(label).toHaveAttribute('data-size', 'sm');
+    expect(label).toHaveAttribute('data-color', 'foreground-secondary');
+  });
+
+  it('sizes the page size options to match the trigger', async () => {
+    render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={10}
+      />,
+    );
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getByRole('option', { name: '10' })).toHaveClass(stylex.props(styles.pageSizeOption).className ?? '');
+  });
+
+  it('offers the given page sizes plus the current one', async () => {
+    render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={15}
+        pageSizeOptions={[10, 20]}
+      />,
+    );
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getAllByRole('option').map(option => option.textContent)).toEqual(['10', '15', '20']);
+  });
+
+  it('drops invalid and duplicate page size options', async () => {
+    render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={10}
+        pageSizeOptions={[25, 25, 0, -5, 12.7, Number.NaN, Number.POSITIVE_INFINITY]}
+      />,
+    );
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getAllByRole('option').map(option => option.textContent)).toEqual(['10', '12', '25']);
+  });
+
+  it('treats a page size below one as one', async () => {
+    const onChange = vi.fn();
+    render(
+      <Pagination
+        page={1}
+        totalItems={5}
+        pageSize={0}
+        onChange={onChange}
+      />,
+    );
+    const pages = controls()
+      .getAllByRole('button')
+      .map(button => button.textContent)
+      .filter(Boolean);
+    expect(pages).toEqual(['1', '2', '3', '4', '5']);
+    await userEvent.click(controls().getByRole('button', { name: '5' }));
+    expect(onChange).toHaveBeenCalledWith(5);
+  });
+
+  it('treats a step below one as one', async () => {
+    const onChange = vi.fn();
+    render(
+      <Pagination
+        page={2}
+        totalItems={100}
+        pageSize={10}
+        step={0}
+        onChange={onChange}
+      />,
+    );
+    await userEvent.click(screen.getByRole('button', { name: 'Next page' }));
+    expect(onChange).toHaveBeenCalledWith(3);
+  });
+
+  it('treats a negative sibling count as zero', () => {
+    render(
+      <Pagination
+        page={5}
+        totalItems={100}
+        pageSize={10}
+        siblingCount={-2}
+      />,
+    );
+    expect(controls().getByRole('button', { name: '5' })).toHaveAttribute('aria-current', 'page');
+  });
+
+  it('renders one page when there are no items', () => {
+    render(
+      <Pagination
+        page={1}
+        totalItems={0}
+        pageSize={10}
+      />,
+    );
+    expect(screen.getByRole('button', { name: '1' })).toHaveAttribute('aria-current', 'page');
+    expect(screen.getByRole('button', { name: 'Previous page' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Next page' })).toBeDisabled();
+  });
+
+  it('merges xstyle atoms after the slot atoms', () => {
+    render(
+      <Pagination
+        page={1}
+        totalItems={100}
+        pageSize={10}
+        xstyle={atoms.spaced}
+      />,
+    );
+    expect(screen.getByRole('navigation')).toHaveClass('cl-pagination', stylex.props(atoms.spaced).className ?? '');
+  });
+});
diff --git a/packages/mosaic/src/components/pagination/pagination.tsx b/packages/mosaic/src/components/pagination/pagination.tsx
new file mode 100644
index 00000000000..8c245aef1ce
--- /dev/null
+++ b/packages/mosaic/src/components/pagination/pagination.tsx
@@ -0,0 +1,251 @@
+import * as stylex from '@stylexjs/stylex';
+import React from 'react';
+
+import type { MosaicElementProps } from '../../props';
+import { mergeStyleProps, themeProps } from '../../props';
+import { reset } from '../../utils/reset.styles';
+import { rtl } from '../../utils/rtl.styles';
+import { Button } from '../button';
+import { ButtonContext } from '../button/button.context';
+import { Icon } from '../icon';
+import { Select } from '../select';
+import { Text } from '../text';
+import { getPageItems } from './page-items';
+import { styles } from './pagination.styles';
+
+export interface PaginationProps extends Omit<MosaicElementProps<'nav'>, 'onChange'> {
+  page: number;
+  totalItems: number;
+  pageSize: number;
+  onChange?: (page: number) => void;
+  pageSizeOptions?: number[];
+  onPageSizeChange?: (pageSize: number) => void;
+  hasFirstLast?: boolean;
+  step?: number;
+  siblingCount?: number;
+  disabled?: boolean;
+  label?: string;
+  pageSizeLabel?: string;
+  firstPageLabel?: string;
+  previousPageLabel?: string;
+  nextPageLabel?: string;
+  lastPageLabel?: string;
+}
+
+function atLeast(value: number, min: number): number {
+  return Number.isFinite(value) && value > min ? Math.floor(value) : min;
+}
+
+const defaultPageSizeOptions = [10, 25, 50, 100];
+
+/**
+ * Page navigation for a paged list. Renders a labelled `nav` with previous/next controls, the
+ * page numbers around the current one, and a results-per-page control. Pages are 1-based;
+ * `onChange` receives the page the user asked for.
+ *
+ * @example
+ * <Pagination page={page} totalItems={120} pageSize={10} onChange={setPage} />
+ *
+ * @example
+ * // With jump-to-ends controls and a wider window of pages
+ * <Pagination page={page} totalItems={120} pageSize={10} onChange={setPage} hasFirstLast siblingCount={2} />
+ */
+export const Pagination = React.forwardRef<HTMLElement, PaginationProps>(function MosaicPagination(
+  {
+    page,
+    totalItems,
+    pageSize,
+    onChange,
+    pageSizeOptions = defaultPageSizeOptions,
+    onPageSizeChange,
+    hasFirstLast = false,
+    step = 1,
+    siblingCount = 1,
+    disabled = false,
+    label = 'Pagination',
+    pageSizeLabel = 'Results per page',
+    firstPageLabel = 'First page',
+    previousPageLabel = 'Previous page',
+    nextPageLabel = 'Next page',
+    lastPageLabel = 'Last page',
+    xstyle,
+    ...rest
+  },
+  ref,
+) {
+  const itemsPerPage = atLeast(pageSize, 1);
+  const pageStep = atLeast(step, 1);
+  const siblings = atLeast(siblingCount, 0);
+  const pageCount = Math.max(1, Math.ceil(atLeast(totalItems, 0) / itemsPerPage));
+  const current = Math.min(atLeast(page, 1), pageCount);
+  const labelId = React.useId();
+  const pageSizeItems = React.useMemo(() => {
+    const sizes = new Set(
+      [...pageSizeOptions, itemsPerPage].filter(size => Number.isFinite(size) && size >= 1).map(Math.floor),
+    );
+    return [...sizes].sort((a, b) => a - b).map(size => ({ value: String(size), label: String(size) }));
+  }, [pageSizeOptions, itemsPerPage]);
+  const isFirst = current <= 1;
+  const isLast = current >= pageCount;
+
+  const pageDefaults = React.useMemo(
+    () =>
+      ({
+        color: 'neutral',
+        variant: 'ghost',
+        size: 'sm',
+        disabled,
+        styles: styles.page,
+      }) as const,
+    [disabled],
+  );
+
+  const goTo = (next: number) => onChange?.(Math.min(Math.max(next, 1), pageCount));
+
+  return (
+    <nav
+      ref={ref}
+      aria-label={label}
+      {...mergeStyleProps(themeProps('pagination', { disabled }), stylex.props(reset.base, styles.root, xstyle), rest)}
+    >
+      <div {...mergeStyleProps(themeProps('pagination-controls'), stylex.props(reset.base, styles.controls))}>
+        {hasFirstLast && (
+          <Button
+            aria-label={firstPageLabel}
+            color='neutral'
+            variant='outline'
+            size='sm'
+            shape='square'
+            touchTarget={false}
+            disabled={disabled || isFirst}
+            xstyle={styles.hitTarget}
+            onClick={() => goTo(1)}
+          >
+            <Icon
+              name='chevron-double-left'
+              xstyle={rtl.mirror}
+              size='sm'
+            />
+          </Button>
+        )}
+        <Button
+          aria-label={previousPageLabel}
+          color='neutral'
+          variant='outline'
+          size='sm'
+          shape='square'
+          touchTarget={false}
+          disabled={disabled || isFirst}
+          xstyle={styles.hitTarget}
+          onClick={() => goTo(current - pageStep)}
+        >
+          <Icon
+            name='chevron-left'
+            xstyle={rtl.mirror}
+            size='sm'
+          />
+        </Button>
+        <ButtonContext.Provider value={pageDefaults}>
+          {getPageItems(current, pageCount, siblings).map(item =>
+            typeof item === 'number' ? (
+              <Button
+                key={item}
+                aria-current={item === current ? 'page' : undefined}
+                touchTarget={false}
+                xstyle={styles.hitTarget}
+                onClick={() => goTo(item)}
+              >
+                {item}
+              </Button>
+            ) : (
+              <span
+                key={item}
+                aria-hidden
+                {...mergeStyleProps(themeProps('pagination-ellipsis'), stylex.props(reset.base, styles.ellipsis))}
+              >
+                <Icon
+                  name='ellipsis'
+                  size='sm'
+                />
+              </span>
+            ),
+          )}
+        </ButtonContext.Provider>
+        <Button
+          aria-label={nextPageLabel}
+          color='neutral'
+          variant='outline'
+          size='sm'
+          shape='square'
+          touchTarget={false}
+          disabled={disabled || isLast}
+          xstyle={styles.hitTarget}
+          onClick={() => goTo(current + pageStep)}
+        >
+          <Icon
+            name='chevron-right'
+            xstyle={rtl.mirror}
+            size='sm'
+          />
+        </Button>
+        {hasFirstLast && (
+          <Button
+            aria-label={lastPageLabel}
+            color='neutral'
+            variant='outline'
+            size='sm'
+            shape='square'
+            touchTarget={false}
+            disabled={disabled || isLast}
+            xstyle={styles.hitTarget}
+            onClick={() => goTo(pageCount)}
+          >
+            <Icon
+              name='chevron-double-right'
+              xstyle={rtl.mirror}
+              size='sm'
+            />
+          </Button>
+        )}
+      </div>
+      <div {...mergeStyleProps(themeProps('pagination-page-size'), stylex.props(reset.base, styles.pageSize))}>
+        <Text
+          id={labelId}
+          render={<span />}
+          size='sm'
+          color='foreground-secondary'
+          {...themeProps('pagination-label')}
+        >
+          {pageSizeLabel}
+        </Text>
+        <Select.Root
+          items={pageSizeItems}
+          value={String(itemsPerPage)}
+          onValueChange={value => onPageSizeChange?.(Number(value))}
+        >
+          <Select.Trigger
+            aria-labelledby={labelId}
+            disabled={disabled}
+            render={props => (
+              <Button
+                color='neutral'
+                variant='outline'
+                size='sm'
+                {...props}
+              />
+            )}
+          />
+          <Select.Popup>
+            {pageSizeItems.map(item => (
+              <Select.Option
+                key={item.value}
+                xstyle={styles.pageSizeOption}
+                {...item}
+              />
+            ))}
+          </Select.Popup>
+        </Select.Root>
+      </div>
+    </nav>
+  );
+});
diff --git a/packages/mosaic/src/icons/registry.tsx b/packages/mosaic/src/icons/registry.tsx
index 493a8ba4f1b..22bf2b9f850 100644
--- a/packages/mosaic/src/icons/registry.tsx
+++ b/packages/mosaic/src/icons/registry.tsx
@@ -44,6 +44,32 @@ const ChevronLeft = glyph(
   />,
 );
 
+const ChevronDoubleLeft = glyph(
+  <>
+    <path
+      d='M7.25 11.25L3.75 8L7.25 4.75'
+      {...strokeProps}
+    />
+    <path
+      d='M11.75 11.25L8.25 8L11.75 4.75'
+      {...strokeProps}
+    />
+  </>,
+);
+
+const ChevronDoubleRight = glyph(
+  <>
+    <path
+      d='M8.75 11.25L12.25 8L8.75 4.75'
+      {...strokeProps}
+    />
+    <path
+      d='M4.25 11.25L7.75 8L4.25 4.75'
+      {...strokeProps}
+    />
+  </>,
+);
+
 const ChevronDown = glyph(
   <path
     d='M4.75 6.75L8 10.25L11.25 6.75'
@@ -375,6 +401,8 @@ export const iconRegistry = {
   'arrow-right-top': ArrowRightTop,
   'chevron-right': ChevronRight,
   'chevron-left': ChevronLeft,
+  'chevron-double-left': ChevronDoubleLeft,
+  'chevron-double-right': ChevronDoubleRight,
   'chevron-down': ChevronDown,
   'chevron-up': ChevronUp,
   'chevron-up-down': ChevronUpDown,
diff --git a/packages/mosaic/src/styles/index.ts b/packages/mosaic/src/styles/index.ts
index 1685197b650..cc8a1cccd47 100644
--- a/packages/mosaic/src/styles/index.ts
+++ b/packages/mosaic/src/styles/index.ts
@@ -68,6 +68,8 @@ export { Input } from '../components/input';
 export type { InputProps, InputVariant } from '../components/input';
 export { InputGroup } from '../components/input-group';
 export type { InputGroupAddonProps, InputGroupRootProps } from '../components/input-group';
+export { Pagination } from '../components/pagination';
+export type { PaginationProps } from '../components/pagination';
 export { PhoneInput } from '../components/phone-input';
 export type { CountryIso, PhoneInputProps } from '../components/phone-input';
 export { Item } from '../components/item';
diff --git a/packages/swingset/src/components/DocsViewer.tsx b/packages/swingset/src/components/DocsViewer.tsx
index 373059cda2a..f4cadf172f1 100644
--- a/packages/swingset/src/components/DocsViewer.tsx
+++ b/packages/swingset/src/components/DocsViewer.tsx
@@ -57,6 +57,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
     'data-list': dynamic(() => import('../stories/data-list.mdx')),
     input: dynamic(() => import('../stories/input.mdx')),
     'input-group': dynamic(() => import('../stories/input-group.mdx')),
+    pagination: dynamic(() => import('../stories/pagination.mdx')),
     'phone-input': dynamic(() => import('../stories/phone-input.mdx')),
     item: dynamic(() => import('../stories/item.mdx')),
     dialog: dynamic(() => import('../stories/dialog.component.mdx')),
diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts
index 240125f4246..63ce6e97639 100644
--- a/packages/swingset/src/lib/registry.ts
+++ b/packages/swingset/src/lib/registry.ts
@@ -132,6 +132,14 @@ import {
   Success as OtpComponentSuccess,
 } from '../stories/otp.component.stories';
 import { meta as otpMeta } from '../stories/otp.stories';
+import {
+  Disabled as PaginationDisabled,
+  FirstLast as PaginationFirstLast,
+  meta as paginationMeta,
+  Primary as PaginationPrimary,
+  Siblings as PaginationSiblings,
+  SinglePage as PaginationSinglePage,
+} from '../stories/pagination.stories';
 import {
   Default as PhoneInputDefault,
   Disabled as PhoneInputDisabled,
@@ -432,6 +440,15 @@ const inputGroupModule: StoryModule = {
   Invalid: InputGroupInvalid,
 };
 
+const paginationModule: StoryModule = {
+  meta: paginationMeta,
+  Primary: PaginationPrimary,
+  FirstLast: PaginationFirstLast,
+  Siblings: PaginationSiblings,
+  SinglePage: PaginationSinglePage,
+  Disabled: PaginationDisabled,
+};
+
 const phoneInputModule: StoryModule = {
   meta: phoneInputMeta,
   Default: PhoneInputDefault,
@@ -795,6 +812,7 @@ export const registry: StoryModule[] = [
   iconFrameModule,
   menuComponentModule,
   otpComponentModule,
+  paginationModule,
   popoverComponentModule,
   profileComponentModule,
   sectionModule,
diff --git a/packages/swingset/src/stories/pagination.mdx b/packages/swingset/src/stories/pagination.mdx
new file mode 100644
index 00000000000..3edae7ddb0f
--- /dev/null
+++ b/packages/swingset/src/stories/pagination.mdx
@@ -0,0 +1,84 @@
+import * as PaginationStories from './pagination.stories';
+
+# Pagination
+
+Page navigation for a paged list. Renders a labelled `nav` with previous and next controls, the page numbers around the current one, and a results-per-page control. Pages are 1-based and the component is controlled: `onChange` receives the page the user asked for, and `onPageSizeChange` receives the size chosen from the results-per-page `Select`.
+
+## Example
+
+<Story
+  name='Primary'
+  storyModule={PaginationStories}
+/>
+
+## Props
+
+<PropTable
+  meta={PaginationStories.meta}
+  extra={[
+    { name: 'page', type: 'number', default: '—', description: 'The current page, 1-based.' },
+    { name: 'totalItems', type: 'number', default: '—', description: 'Total number of items across every page.' },
+    { name: 'pageSize', type: 'number', default: '—', description: 'Items per page. The page count is derived from this and `totalItems`.' },
+    { name: 'onChange', type: '(page: number) => void', default: '—', description: 'Called with the page the user navigated to.' },
+    { name: 'pageSizeOptions', type: 'number[]', default: '[10, 25, 50, 100]', description: 'Sizes offered by the results-per-page select. The current `pageSize` is always included.' },
+    { name: 'onPageSizeChange', type: '(pageSize: number) => void', default: '—', description: 'Called with the page size the user chose.' },
+    { name: 'step', type: 'number', default: '1', description: 'How many pages the previous and next controls move.' },
+    { name: 'siblingCount', type: 'number', default: '1', description: 'Pages shown on each side of the current one.' },
+    { name: 'label', type: 'string', default: "'Pagination'", description: 'Accessible name of the `nav`.' },
+    {
+      name: 'pageSizeLabel',
+      type: 'string',
+      default: "'Results per page'",
+      description: 'Text of the label beside the page size select.',
+    },
+    { name: 'firstPageLabel', type: 'string', default: "'First page'", description: 'Accessible name of the first page control.' },
+    {
+      name: 'previousPageLabel',
+      type: 'string',
+      default: "'Previous page'",
+      description: 'Accessible name of the previous page control.',
+    },
+    { name: 'nextPageLabel', type: 'string', default: "'Next page'", description: 'Accessible name of the next page control.' },
+    { name: 'lastPageLabel', type: 'string', default: "'Last page'", description: 'Accessible name of the last page control.' },
+  ]}
+/>
+
+## Usage
+
+<Usage
+  component='Pagination'
+  module='@clerk/mosaic/components/pagination'
+  props={{ page: 1, totalItems: 100, pageSize: 10 }}
+/>
+
+---
+
+## Examples
+
+### First and last
+
+<Story
+  name='FirstLast'
+  storyModule={PaginationStories}
+/>
+
+### Sibling count
+
+<Story
+  name='Siblings'
+  storyModule={PaginationStories}
+/>
+
+### Single page
+
+<Story
+  name='SinglePage'
+  storyModule={PaginationStories}
+/>
+
+### Disabled
+
+<Story
+  name='Disabled'
+  storyModule={PaginationStories}
+/>
diff --git a/packages/swingset/src/stories/pagination.stories.tsx b/packages/swingset/src/stories/pagination.stories.tsx
new file mode 100644
index 00000000000..b8a2755d379
--- /dev/null
+++ b/packages/swingset/src/stories/pagination.stories.tsx
@@ -0,0 +1,104 @@
+import type { PaginationProps } from '@clerk/mosaic/components/pagination';
+import { Pagination } from '@clerk/mosaic/components/pagination';
+import { useState } from 'react';
+
+import type { StoryMeta } from '@/lib/types';
+
+// Exposes this file's own source (via the `?raw` webpack rule) so each `<Story>` example
+// renders a code footer with its function's source. See `StoryModule.__source`.
+export { default as __source } from './pagination.stories?raw';
+
+// StyleX has no runtime recipe to derive knobs from, so the variant surface is described
+// here to drive the playground + prop table. Keys mirror `PaginationProps`.
+export const meta: StoryMeta = {
+  group: 'Components',
+  status: 'wip',
+  substatus: 'needs design',
+  title: 'Pagination',
+  source: 'packages/mosaic/src/components/pagination/pagination.tsx',
+  styles: {
+    _variants: {
+      hasFirstLast: { true: {}, false: {} },
+      disabled: { true: {}, false: {} },
+    },
+    _defaultVariants: {
+      hasFirstLast: false,
+      disabled: false,
+    },
+  },
+};
+
+// Story functions accept Record<string,unknown> (knob values) and cast to PaginationProps.
+// The cast is unavoidable: knobs are dynamically typed; Pagination has a strict prop interface.
+function knobsAsProps(props: Record<string, unknown>) {
+  return props as unknown as Partial<PaginationProps>;
+}
+
+export function Primary(props: Record<string, unknown>) {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  return (
+    <Pagination
+      page={page}
+      totalItems={100}
+      pageSize={pageSize}
+      onChange={setPage}
+      onPageSizeChange={size => {
+        setPageSize(size);
+        setPage(1);
+      }}
+      {...knobsAsProps(props)}
+    />
+  );
+}
+
+export function FirstLast(props: Record<string, unknown>) {
+  const [page, setPage] = useState(1);
+  return (
+    <Pagination
+      {...knobsAsProps(props)}
+      page={page}
+      totalItems={250}
+      pageSize={10}
+      onChange={setPage}
+      hasFirstLast
+    />
+  );
+}
+
+export function Siblings(props: Record<string, unknown>) {
+  const [page, setPage] = useState(10);
+  return (
+    <Pagination
+      {...knobsAsProps(props)}
+      page={page}
+      totalItems={200}
+      pageSize={10}
+      onChange={setPage}
+      siblingCount={2}
+    />
+  );
+}
+
+export function SinglePage(props: Record<string, unknown>) {
+  return (
+    <Pagination
+      {...knobsAsProps(props)}
+      page={1}
+      totalItems={8}
+      pageSize={10}
+    />
+  );
+}
+
+export function Disabled(props: Record<string, unknown>) {
+  return (
+    <Pagination
+      {...knobsAsProps(props)}
+      page={4}
+      totalItems={100}
+      pageSize={10}
+      disabled
+    />
+  );
+}