diff --git a/one/docs/components/lightbox.md b/one/docs/components/lightbox.md
new file mode 100644
index 0000000..0ee11ec
--- /dev/null
+++ b/one/docs/components/lightbox.md
@@ -0,0 +1,109 @@
+# Lightbox <small>灯箱</small>
+
+## 示例
+
+[[ demo src="/demo/lightbox/default.vue" ]]
+
+## API
+
+### 属性
+
+| 名称 | 类型 | 默认值 | 描述 |
+| -- | -- | -- | -- |
+| `ui` | `string=` | - | 预设样式。`veui-theme-dls` 未提供，可自定义。 |
+| `open` | `boolean` | `false` | [^open] |
+| `datasource` | `Array<Object>` | `[]` | [^datasource] |
+| `index` | `number=` | `0` | [^index] |
+| `wrap` | `boolean=` | `false` | 是否可以循环播放。 |
+| `closable` | `boolean=` | `true` | 是否显示关闭按钮。 |
+| `escapable` | `boolean=` | `true` | 按下 <kbd>esc</kbd> 键是否可以关闭浮层。仅在 `closable` 为 `true` 时生效。 |
+| `priority` | `number=` | - | 浮层层叠权重，参考 [`Overlay`](./overlay) 组件的 [`priority`](./overlay#props) 属性。 |
+| `before-close` | `function(string): boolean=|Promise<boolean=>` | - | [^before-close] |
+| `overlay-class` | `string|Array|Object=` | - | 浮层根元素类名，参考 [`Overlay`](./overlay) 组件的 [`overlay-class`](./overlay#props) 属性。 |
+| `indicator` | `string=` | `'number'` | [^indicator] |
+| `options` | `object=` | `{video: {muted: true, autoplay: true, controls: true}}` | 额外配置。 |
+
+^^^open
+:::badges
+`.sync`
+:::
+
+是否显示浮层。
+^^^
+
+^^^datasource
+灯箱数据源，项目类型为：`{src, alt, type}`。
+
++++字段详情
+| 名称 | 类型 | 描述 |
+| -- | -- | -- |
+| `src` | `string` | 媒体源地址。 |
+| `type` | `string=` | 默认图片类型，`video` 表示视频。 |
+| `alt` | `string=` | 图片的降级描述文本。 |
+| `desc` | `string=` | 该项目的描述文本。 |
++++
+^^^
+
+^^^index
+:::badges
+`.sync`
+:::
+
+当前播放序号。
+^^^
+
+^^^indicator
+播放进度指示器的显示模式。
+
++++枚举值
+| 值 | 描述 |
+| -- | -- |
+| `number` | 显示「当前页数/全部页数」文字提示。 |
+| `none` | 不显示指示器。 |
+^^^
+
+^^^before-close
+在将触发浮层关闭的操作发生后执行，类型为 `function(type: string): boolean=|Promise<boolean=>`。`type` 为触发关闭的类型，默认情况下可选值为 `'ok'|'cancel'`。返回值可以是一个 `boolean`，也可以是一个 resolve `boolean` 的 `Promise`，用来处理可能需要异步决定浮层关闭状态的情况。返回值或 resolve 值非 `false` 时才会关闭浮层。
+
++++调用示例
+```html
+<veui-lightbox :open.sync="dialogOpen" :before-close="submit">...</veui-lightbox>
+```
+^^^
+
+### 插槽
+
+| 名称 | 描述 |
+| -- | -- |
+| `item` | [^slot-item] |
+| `desc` | [^slot-desc] |
+
+^^^slot-item
+可用来定制每个灯箱项的媒体展示区域。
+
+默认内容：每项图片或视频。
+
+作用域参数为 `datasource` 属性每个列表项的内容（可以有自定义字段）加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, type, desc, index, ...}`。
+^^^
+
+^^^slot-desc
+可用来定制每个灯箱项的描述区域。
+
+默认内容：每项描述文字。
+
+作用域参数为 `datasource` 属性每个列表项的内容（可以有自定义字段）加上 `index: number` 表示轮播项的序号。即整个 `slot-scope` 绑定的值为 `{src, alt, type, desc, index, ...}`。
+^^^
+
+### 事件
+
+| 名称 | 描述 |
+| -- | -- |
+| `cancel` | 灯箱关闭后触发。 |
+
+### 图标
+
+| 名称 | 描述 |
+| -- | -- |
+| `close` | 关闭。 |
+| `prev` | 上一页。 |
+| `next` | 下一页。 |
diff --git a/one/docs/demo/lightbox/default.vue b/one/docs/demo/lightbox/default.vue
new file mode 100644
index 0000000..f4082ed
--- /dev/null
+++ b/one/docs/demo/lightbox/default.vue
@@ -0,0 +1,83 @@
+<template>
+<article>
+  <div>
+    <veui-check-box
+      v-model="wrap"
+    >循环播放</veui-check-box>
+    <veui-check-box
+      v-model="indicator"
+      true-value="number"
+      false-value="none"
+    >头部页码</veui-check-box>
+  </div>
+  <veui-button
+    class="mt-3p"
+    ui="primary"
+    @click="open = true"
+  >展现灯箱</veui-button>
+  <veui-lightbox
+    :open.sync="open"
+    :datasource="items"
+    :wrap="wrap"
+    :indicator="indicator"
+  />
+</article>
+</template>
+
+<script>
+import { Lightbox, Checkbox, Button } from 'veui'
+
+export default {
+  components: {
+    'veui-lightbox': Lightbox,
+    'veui-check-box': Checkbox,
+    'veui-button': Button
+  },
+  data () {
+    return {
+      wrap: false,
+      indicator: 'number',
+      open: false
+    }
+  },
+  computed: {
+    items() {
+      return [
+        {
+          src:
+            'https://ecmb.bdimg.com/public01/one-design/2b77cc4a4c5c906993c0e512f3ddaf03.jpg',
+          alt: 'A cute kitty looking at you with its greenish eyes.',
+          desc: 'Cat'
+        },
+        {
+          src:
+            'https://ecmb.bdimg.com/public01/one-design/6fedc62b9221846ce5114c7447622e47.jpeg',
+          alt: 'A common kingfisher flying above river.',
+          desc: 'Kingfisher'
+        },
+        {
+          src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm',
+          alt: 'flower video',
+          desc: '花',
+          type: 'video'
+        },
+        {
+          src:
+            'https://ecmb.bdimg.com/public01/one-design/e1b6473c898d9e456452ee79d7533a86.jpeg',
+          alt: 'A white and gray dolphin in blue water.',
+          desc: 'Dolphin'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-checkbox {
+  margin-right: 15px;
+}
+.mt-3p {
+  margin-top: 12px;
+}
+</style>
\ No newline at end of file
diff --git a/one/docs/nav.json b/one/docs/nav.json
index c5efd15..9210262 100644
--- a/one/docs/nav.json
+++ b/one/docs/nav.json
@@ -302,6 +302,10 @@
         {
           "title": "Accordion - 手风琴面板",
           "slug": "accordion"
+        },
+        {
+          "title": "Lightbox - 灯箱",
+          "slug": "lightbox"
         }
       ]
     },