diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 9b94e28..e88c494 100644
--- a/docs/.vitepress/config.mts
+++ b/docs/.vitepress/config.mts
@@ -62,6 +62,10 @@ const components = [
           text: 'Breadcrumb 面包屑',
           link: '/components/Breadcrumb'
         },
+        {
+          text: 'Pagination 分页',
+          link: '/components/Pagination'
+        },
       ]
     },
 ]
diff --git a/docs/components/Pagination.md b/docs/components/Pagination.md
new file mode 100644
index 0000000..f725685
--- /dev/null
+++ b/docs/components/Pagination.md
@@ -0,0 +1,74 @@
+---
+title: Pagination 分页
+lang: zh-CN
+---
+
+# Pagination 分页
+
+采用分页的形式分隔长列表，每次只加载一个页面。
+
+## 基本使用
+
+基本分页。
+
+<demo src="../../../../example/pagination/basic.svelte"  github='Pagination'></demo>
+
+## 更多
+
+更多分页。
+
+<demo src="../../../../example/pagination/more-page.svelte"  github='Pagination'></demo>
+
+
+## 改变
+
+改变每页显示条目数。
+
+<demo src="../../../../example/pagination/size-options.svelte"  github='Pagination'></demo>
+
+## 跳转
+
+快速跳转到某一页。
+
+<demo src="../../../../example/pagination/quick-jumper.svelte"  github='Pagination'></demo>
+
+## 总计
+
+使用`total`插槽展示总计。
+
+<demo src="../../../../example/pagination/total.svelte"  github='Pagination'></demo>
+
+## 全部展示
+
+展示所有配置选项。
+
+<demo src="../../../../example/pagination/all.svelte"  github='Pagination'></demo>
+
+## Props 属性
+
+| 属性             | 说明                                                      | 类型       | 默认值              | 版本 |
+| ---------------- | --------------------------------------------------------- | ---------- | ------------------- | ---- |
+| current          | 当前页数                                                  | `number`   | -                   |      |
+| defaultCurrent   | 默认的当前页数                                            | `number`   | `1`                 |      |
+| defaultPageSize  | 默认的每页条数                                            | `number`   | `10`                |
+| disabled         | 禁用分页                                                  | `boolean`  | -                   |      |
+| hideOnSinglePage | 只有一页时是否隐藏分页器                                  | `boolean`  | `false`             |      |
+| pageSize         | 每页条数                                                  | `number`   | -                   |      |
+| pageSizeOptions  | 指定每页可以显示多少条                                    | `number[]` | `[10, 20, 50, 100]` |      |
+| showQuickJumper  | 是否可以快速跳转至某页                                    | `boolean`  | `false`             |      |
+| showSizeChanger  | 是否展示 pageSize 切换器，当`total`大于`50`时默认为`true` | `boolean`  | `false`             |      |
+| showTitle        | 是否显示原生 tooltip 页码提示                             | `boolean`  | `true`              |      |
+| total            | 数据总数                                                  | `number`   | `0`                 |      |
+
+## Events 事件
+
+| 事件           | 说明                                                     | 类型                                |
+| -------------- | -------------------------------------------------------- | ----------------------------------- |
+| change         | 页码或 pageSize 改变的回调，参数是改变后的页码及每页条数 | `(value: {page, pageSize}) => void` |
+| showSizeChange | pageSize 变化的回调                                      | `(value: {current, size}) => void`  |
+
+## Slots 插槽
+
+| 插槽名 | 说明           |
+| ------ | -------------- |
+| total  | 自定义总计内容 |
\ No newline at end of file
diff --git a/docs/example/pagination/all.svelte b/docs/example/pagination/all.svelte
new file mode 100644
index 0000000..d6126e9
--- /dev/null
+++ b/docs/example/pagination/all.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { Pagination } from 'adorn-ui'
+</script>
+
+<Pagination
+  defaultCurrent={1}
+  total={500}
+  showQuickJumper
+  showSizeChanger
+  showTitle
+>
+  <span slot="total" let:total>总共{total}记录</span>
+</Pagination>
diff --git a/docs/example/pagination/basic.svelte b/docs/example/pagination/basic.svelte
new file mode 100644
index 0000000..498c6cc
--- /dev/null
+++ b/docs/example/pagination/basic.svelte
@@ -0,0 +1,5 @@
+<script>
+  import { Pagination } from 'adorn-ui'
+</script>
+
+<Pagination defaultCurrent={1} total={50} />
diff --git a/docs/example/pagination/more-page.svelte b/docs/example/pagination/more-page.svelte
new file mode 100644
index 0000000..041d49e
--- /dev/null
+++ b/docs/example/pagination/more-page.svelte
@@ -0,0 +1,5 @@
+<script>
+  import { Pagination } from 'adorn-ui'
+</script>
+
+<Pagination defaultCurrent={5} total={500} />
diff --git a/docs/example/pagination/quick-jumper.svelte b/docs/example/pagination/quick-jumper.svelte
new file mode 100644
index 0000000..7a1373d
--- /dev/null
+++ b/docs/example/pagination/quick-jumper.svelte
@@ -0,0 +1,8 @@
+<script>
+  import { Space, Pagination } from 'adorn-ui'
+</script>
+
+<Space direction="vertical">
+  <Pagination defaultCurrent={1} total={50} showQuickJumper />
+  <Pagination defaultCurrent={1} total={50} showQuickJumper disabled />
+</Space>
diff --git a/docs/example/pagination/size-options.svelte b/docs/example/pagination/size-options.svelte
new file mode 100644
index 0000000..3dad35b
--- /dev/null
+++ b/docs/example/pagination/size-options.svelte
@@ -0,0 +1,8 @@
+<script>
+  import { Pagination, Space } from 'adorn-ui'
+</script>
+
+<Space direction="vertical">
+  <Pagination defaultCurrent={1} total={500} />
+  <Pagination defaultCurrent={1} total={500} disabled />
+</Space>
diff --git a/docs/example/pagination/total.svelte b/docs/example/pagination/total.svelte
new file mode 100644
index 0000000..74c1067
--- /dev/null
+++ b/docs/example/pagination/total.svelte
@@ -0,0 +1,7 @@
+<script>
+  import { Pagination } from 'adorn-ui'
+</script>
+
+<Pagination defaultCurrent={1} total={50}>
+  <span slot="total" let:total>总共{total}记录</span>
+</Pagination>
diff --git a/packages/adorn-ui/src/Pagination/index.svelte b/packages/adorn-ui/src/Pagination/index.svelte
new file mode 100644
index 0000000..d7850b6
--- /dev/null
+++ b/packages/adorn-ui/src/Pagination/index.svelte
@@ -0,0 +1,300 @@
+<script lang="ts">
+  import classes from '@renzp/classes'
+  import { Button } from '..'
+  import type { IconName } from '../utils/types'
+  import { createEventDispatcher } from 'svelte'
+  import type { KeyboardEventHandler } from 'svelte/elements'
+
+  export let current: number | undefined = undefined
+  export let defaultCurrent = 1
+  export let defaultPageSize = 10
+  export let disabled: boolean | undefined = undefined
+  export let hideOnSinglePage = false
+  export let pageSize: number | undefined = undefined
+  export let pageSizeOptions: number[] = [10, 20, 50, 100]
+  export let showQuickJumper = false
+  export let showSizeChanger: boolean | undefined = undefined
+  export let showTitle = true
+  export let total = 0
+
+  const dispatch = createEventDispatcher()
+
+  $: hidden = hideOnSinglePage && pages.length < 2
+
+  let pageCurrent = (current ?? defaultCurrent) as number
+  let pageCurrentSize = (pageSize ?? defaultPageSize) as number
+
+  let className = ''
+  export { className as class }
+  $: classList = classes(['adorn-pagination', className])
+
+  $: pages = Array.from({ length: total / pageCurrentSize }).map((_, i) => i + 1)
+
+  $: showPages = pages
+    .filter(page => {
+      // 超过7个才省略
+      if (pages.length <= 7) {
+        return true
+      }
+
+      if (pageCurrent > 4) {
+        if (page === 1) {
+          return true
+        }
+
+        if (
+          page === pageCurrent - 2 ||
+          page === pageCurrent - 1 ||
+          page === pageCurrent + 1 ||
+          page === pageCurrent + 2 ||
+          page === pageCurrent
+        ) {
+          return true
+        }
+      } else if (page <= 4) {
+        return true
+      }
+
+      if (pageCurrent > pages.length - 4) {
+        if (page >= pages.length - 4) {
+          return true
+        }
+      } else if (page === pages.length) {
+        return true
+      }
+    })
+    .reduce((prev, page) => {
+      const prevPage = prev.at(-1)
+      const nextPages = [page]
+      if (page - 1 > 0 && page - 1 !== prevPage) {
+        const flag = prev.includes(-1) ? -2 : -1
+        nextPages.unshift(flag)
+      }
+
+      return [...prev, ...nextPages]
+    }, [] as number[])
+
+  const onJumpPage = (page: number) => {
+    pageCurrent = page
+    dispatch('change', { page, pageSize: pageCurrentSize })
+  }
+  let ellipsisNumber = 0
+  const onMouseEnter = (page: number) => {
+    if (!disabled) {
+      ellipsisNumber = page
+    }
+  }
+  const onMouseLeave = () => {
+    if (!disabled) {
+      ellipsisNumber = 0
+    }
+  }
+
+  const onPrev = () => onJumpPage(pageCurrent - 1)
+  $: prevDisabled = pageCurrent === 1 || disabled
+  const onNext = () => onJumpPage(pageCurrent + 1)
+  $: nextDisabled = pageCurrent === pages.length || disabled
+  $: getPageButtonType = (page: number) => (pageCurrent === page ? 'primary' : 'text')
+
+  $: getEllipsisIcon = (page: number, index: number): IconName => {
+    return ellipsisNumber !== page ? 'more' : `arrow-${index === 1 ? 'left' : 'right'}-double`
+  }
+
+  const onFastJumpPage = (index: number) => {
+    if (disabled) {
+      return
+    }
+    let jumpPage = 1
+    let gap = 5
+    if (index === 1) {
+      jumpPage = pageCurrent - gap
+      jumpPage = jumpPage > 0 ? jumpPage : 1
+    } else {
+      jumpPage = pageCurrent + gap
+      jumpPage = jumpPage > pages.length ? pages.length : jumpPage
+    }
+
+    onJumpPage(jumpPage)
+  }
+
+  $: {
+    if (total > 50) {
+      showSizeChanger = true
+    }
+  }
+
+  const onPageSizeChange = () => {
+    let page = pageCurrent
+    if (pages.length < pageCurrent) {
+      page = pages.length
+    }
+
+    dispatch('showSizeChange', { current: page, size: pageCurrentSize })
+    onJumpPage(page)
+  }
+  let inputPage: number | undefined
+  const onSearchKeyup: KeyboardEventHandler<any> = e => {
+    if (e.key === 'Enter') {
+      onSearch()
+    }
+  }
+  const onSearch = () => {
+    if (inputPage) {
+      let jumpPage = 1
+      if (inputPage >= 1) {
+        jumpPage = inputPage > pages.length ? pages.length : parseInt(`${inputPage}`)
+      }
+
+      onJumpPage(jumpPage)
+      inputPage = undefined
+    }
+  }
+</script>
+
+{#if !hidden}
+  <div class={classList}>
+    {#if $$slots.total}
+      <span class="adorn-pagination-total">
+        <slot name="total" {total} />
+      </span>
+    {/if}
+    <span class="adorn-pagination--prev">
+      <Button type="text" disabled={prevDisabled} icon="arrow-left-s" on:click={onPrev} />
+    </span>
+    {#each showPages as page, index}
+      {#if page < 0}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <span
+          class="adorn-pagination--ellipsis"
+          class:disabled
+          on:mouseenter={() => onMouseEnter(page)}
+          on:mouseleave={onMouseLeave}
+          on:click={() => onFastJumpPage(index)}
+        >
+          <Button icon={getEllipsisIcon(page, index)} {disabled} type="text" />
+        </span>
+      {:else}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <!-- svelte-ignore a11y-no-static-element-interactions -->
+        <span
+          class="adorn-pagination-item"
+          title={showTitle ? `${page}` : undefined}
+          on:mouseenter={onMouseLeave}
+        >
+          <Button
+            type={getPageButtonType(page)}
+            ghost={pageCurrent === page}
+            {disabled}
+            on:click={() => onJumpPage(page)}
+          >
+            {page}
+          </Button>
+        </span>
+      {/if}
+    {/each}
+    <span class="adorn-pagination--next">
+      <Button icon="arrow-right-s" type="text" disabled={nextDisabled} on:click={onNext} />
+    </span>
+    {#if showSizeChanger}
+      <select
+        class="adorn-pagination-options"
+        bind:value={pageCurrentSize}
+        {disabled}
+        class:disabled
+        on:change={onPageSizeChange}
+      >
+        {#each pageSizeOptions as item}
+          <option value={item}>{item}条/页</option>
+        {/each}
+      </select>
+    {/if}
+    {#if showQuickJumper}
+      <div class="adorn-pagination-jumper">
+        <span>跳至</span>
+        <input
+          type="number"
+          class="adorn-pagination-input"
+          class:disabled
+          {disabled}
+          on:keyup={onSearchKeyup}
+          on:blur={onSearch}
+          bind:value={inputPage}
+        />
+        <span>页</span>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style lang="less" global>
+  .adorn-pagination {
+    font-size: var(--adorn-font-size);
+
+    :global(.adorn-btn) {
+      padding: 0 !important;
+      height: 32px;
+      width: 32px;
+    }
+
+    &-item {
+      margin-right: 8px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    :global(.adorn-icon) {
+      position: relative;
+      top: 2px;
+      font-size: 22px !important;
+    }
+
+    &--ellipsis {
+      :global(.adorn-btn.adorn-btn--text) {
+        color: var(--adorn-disabled-text-color);
+        margin-right: 8px;
+
+        &:hover {
+          color: var(--adorn-primary-color);
+        }
+      }
+
+      :global(.adorn-icon) {
+        top: 4px;
+      }
+
+      &.disabled :global(.adorn-btn.adorn-btn--text:hover) {
+        color: var(--adorn-disabled-text-color);
+      }
+    }
+
+    &-options {
+      cursor: pointer;
+    }
+
+    &-options,
+    &-input {
+      border: 1px solid var(--adorn-border-color);
+      padding: var(--adorn-padding-mini) var(--adorn-padding);
+      border-radius: var(--adorn-radius-sm);
+
+      &.disabled {
+        background-color: var(--adorn-disabled-bg-color);
+        color: var(--adorn-disabled-text-color);
+        cursor: not-allowed;
+      }
+    }
+
+    &-jumper {
+      display: inline-flex;
+      align-items: center;
+      margin-left: 8px;
+    }
+    &-input {
+      width: 50px;
+      margin: 0 8px;
+    }
+  }
+</style>
diff --git a/packages/adorn-ui/src/index.js b/packages/adorn-ui/src/index.js
index 5de222f..44975e7 100644
--- a/packages/adorn-ui/src/index.js
+++ b/packages/adorn-ui/src/index.js
@@ -8,5 +8,6 @@ export { FloatButton } from './FloatButton'
 export { Row, Col } from './Grid'
 export { default as Icon } from './Icon/index.svelte'
 export { Layout } from './Layout'
+export { default as Pagination } from './Pagination/index.svelte'
 export { default as Space } from './Space/index.svelte'
 export { Typography } from './Typography'