diff --git a/build/bin/build-entry.js b/build/bin/build-entry.js
index 997ef8fb7..0e735e9f3 100644
--- a/build/bin/build-entry.js
+++ b/build/bin/build-entry.js
@@ -114,6 +114,8 @@ ComponentNames.forEach((name) => {
       'notification',
       'page-header',
       'message',
+      'timeline',
+      'timeline-item',
       'input-number',
       'step',
       'steps',
diff --git a/packages/color-picker/src/components/picker-dropdown.vue b/packages/color-picker/src/components/picker-dropdown.vue
index d254d3cd6..160cab1c1 100644
--- a/packages/color-picker/src/components/picker-dropdown.vue
+++ b/packages/color-picker/src/components/picker-dropdown.vue
@@ -6,7 +6,7 @@
           ref="hue"
           :color="color"
           vertical
-          style="float: right;"
+          style="float: right"
         ></hue-slider>
         <sv-panel ref="sl" :color="color"></sv-panel>
       </div>
diff --git a/packages/timeline/src/item.vue b/packages/timeline-item/TimelineItem.vue
similarity index 100%
rename from packages/timeline/src/item.vue
rename to packages/timeline-item/TimelineItem.vue
diff --git a/packages/timeline-item/__tests__/TimelineItem.spec.js b/packages/timeline-item/__tests__/TimelineItem.spec.js
new file mode 100644
index 000000000..cac0fabaf
--- /dev/null
+++ b/packages/timeline-item/__tests__/TimelineItem.spec.js
@@ -0,0 +1,19 @@
+import TimelineItem from '../TimelineItem.vue'
+import { mount } from '@vue/test-utils'
+describe('TimelineItem.vue', () => {
+  it('should timeline works', () => {
+    const wrapper = mount(TimelineItem, {
+      props: {
+        timestamp: '2018-04-15'
+      },
+      slots: {
+        default: '吃饭饭'
+      }
+    })
+
+    expect(wrapper.find('.el-timeline-item__timestamp').text()).toBe(
+      '2018-04-15'
+    )
+    expect(wrapper.find('.el-timeline-item__content').text()).toBe('吃饭饭')
+  })
+})
diff --git a/packages/timeline-item/index.js b/packages/timeline-item/index.js
index 2830b4d7f..79a485f02 100644
--- a/packages/timeline-item/index.js
+++ b/packages/timeline-item/index.js
@@ -1,4 +1,4 @@
-import ElTimelineItem from '../timeline/src/item'
+import ElTimelineItem from './TimelineItem'
 
 /* istanbul ignore next */
 ElTimelineItem.install = function (app) {
diff --git a/packages/timeline/src/main.vue b/packages/timeline/Timeline.vue
similarity index 53%
rename from packages/timeline/src/main.vue
rename to packages/timeline/Timeline.vue
index e0018285a..f80b6bde5 100644
--- a/packages/timeline/src/main.vue
+++ b/packages/timeline/Timeline.vue
@@ -1,4 +1,5 @@
 <script>
+import { Fragment } from 'vue'
 export default {
   name: 'ElTimeline',
 
@@ -21,10 +22,20 @@ export default {
       'el-timeline': true,
       'is-reverse': reverse
     }
-    let slots = this.$slots.default || []
-    if (reverse) {
-      slots = slots.reverse()
+    let slots
+    if (this.$slots.default) {
+      slots = this.$slots.default()
+      let children
+      if (slots.length > 0 && slots[0].type === Fragment) {
+        children = slots[0].children
+      } else {
+        children = slots
+      }
+      if (reverse) {
+        children.reverse()
+      }
     }
+
     return <ul class={classes}>{slots}</ul>
   }
 }
diff --git a/packages/timeline/__tests__/Timeline.spec.js b/packages/timeline/__tests__/Timeline.spec.js
new file mode 100644
index 000000000..a17c1c9f5
--- /dev/null
+++ b/packages/timeline/__tests__/Timeline.spec.js
@@ -0,0 +1,38 @@
+import Timeline from '../Timeline.vue'
+import { mount } from '@vue/test-utils'
+describe('Timeline.vue', () => {
+  it('should slot works', () => {
+    const wrapper = mount(Timeline, {
+      slots: {
+        default: [`A`, `B`]
+      }
+    })
+    expect(wrapper.find('.el-timeline').text()).toBe('AB')
+  })
+
+  it('should props reverse works', () => {
+    const wrapper = mount(Timeline, {
+      props: {
+        reverse: true
+      },
+      slots: {
+        default: [`A`, `B`]
+      }
+    })
+    expect(wrapper.find('.el-timeline').text()).toBe('BA')
+  })
+
+  it('should slot null', () => {
+    const wrapper = mount(Timeline, {})
+    expect(wrapper.find('.el-timeline').text()).toBe('')
+  })
+
+  it('should slot empty array', () => {
+    const wrapper = mount(Timeline, {
+      slots: {
+        default: []
+      }
+    })
+    expect(wrapper.find('.el-timeline').text()).toBe('')
+  })
+})
diff --git a/packages/timeline/index.js b/packages/timeline/index.js
index a6182ff3c..80f95e031 100644
--- a/packages/timeline/index.js
+++ b/packages/timeline/index.js
@@ -1,4 +1,4 @@
-import Timeline from './src/main'
+import Timeline from './Timeline'
 
 /* istanbul ignore next */
 Timeline.install = function (app) {