diff --git a/components/SLDSMenuPicklist/List.jsx b/components/SLDSMenuList/List.jsx
similarity index 100%
rename from components/SLDSMenuPicklist/List.jsx
rename to components/SLDSMenuList/List.jsx
diff --git a/components/SLDSMenuPicklist/ListItem.jsx b/components/SLDSMenuList/ListItem.jsx
similarity index 100%
rename from components/SLDSMenuPicklist/ListItem.jsx
rename to components/SLDSMenuList/ListItem.jsx
diff --git a/components/SLDSMenuPicklist/ListItemLabel.jsx b/components/SLDSMenuList/ListItemLabel.jsx
similarity index 98%
rename from components/SLDSMenuPicklist/ListItemLabel.jsx
rename to components/SLDSMenuList/ListItemLabel.jsx
index 7341857efe..00df703f41 100644
--- a/components/SLDSMenuPicklist/ListItemLabel.jsx
+++ b/components/SLDSMenuList/ListItemLabel.jsx
@@ -18,7 +18,7 @@ const propTypes = {
   isHighlighted: React.PropTypes.bool,
   isSelected: React.PropTypes.bool,
   label: React.PropTypes.string,
-  value: React.PropTypes.string,
+  value: React.PropTypes.any,
 };
 const defaultProps = {
   data: {},
diff --git a/components/SLDSMenuList/index.jsx b/components/SLDSMenuList/index.jsx
new file mode 100644
index 0000000000..6551da9246
--- /dev/null
+++ b/components/SLDSMenuList/index.jsx
@@ -0,0 +1,155 @@
+/*
+Copyright (c) 2015, salesforce.com, inc. All rights reserved.
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+
+import React from "react";
+import ReactDOM from "react-dom";
+import isEqual from "lodash.isequal";
+
+import {KEYS, EventUtil} from "../utils";
+import SLDSIcon from "../SLDSIcon";
+import List from "./List";
+import ListItemLabel from "./ListItemLabel";
+
+const displayName = "SLDSMenuList";
+const propTypes = {
+  className: React.PropTypes.string,
+  /**
+   * If true, renders checkmark icon on the selected Menu Item.
+   */
+  checkmark: React.PropTypes.bool,
+  label: React.PropTypes.string,
+  /**
+   * Custom element that overrides the default Menu Item component.
+   */
+  listItemRenderer: React.PropTypes.node,
+  /**
+   * If true, component renders specifically to work inside Modal.
+   */
+  onClick: React.PropTypes.func,
+  onSelect: React.PropTypes.func,
+  /**
+   * Menu item data.
+   */
+  options: React.PropTypes.array.isRequired,
+};
+const defaultProps = {
+  checkmark: true
+};
+
+/**
+ * The SLDSMenuPicklist component is a variant of the Ligtning Design System Menu component.
+ */
+class SLDSMenuPicklist extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      highlightedIndex: 0,
+      isOpen: false,
+      lastBlurredIndex: -1,
+      lastBlurredTimeStamp: -1,
+      selectedIndex: this.props.selectedIndex,
+      /* triggerId is the id of the element that triggers the Menu to open.
+      * Need this for aria-labelledby on <ul> in Menu for accessibility. */
+      triggerId: this.props.label ? this.props.label.replace(/\s+/g, '') + '_Button': 'Picklist_Button',
+    };
+
+  }
+
+  componentWillUnmount(){
+    this.isUnmounting = true;
+  }
+
+  componentDidUpdate( prevProps, prevState) {
+    if(this.state.lastBlurredTimeStamp !== prevState.lastBlurredTimeStamp){
+      if(this.state.lastBlurredIndex === this.state.highlightedIndex){
+        this.handleClose();
+      }
+    }
+    if(this.state.selectedIndex !== prevState.selectedIndex){
+      this.handleClose();
+    }
+
+    if(this.props.selectedIndex !== prevProps.selectedIndex ||
+        !isEqual(this.props.options, prevProps.options)){
+      if (this.props.selectedIndex !== this.state.selectedIndex) {
+        this.handleSelect(this.props.selectedIndex);
+      }
+    }
+  }
+
+  handleSelect(index) {
+    this.setState({selectedIndex: index})
+    if(this.props.onSelect){
+      this.props.onSelect(index);
+    }
+  }
+
+  handleClose() {
+    if(this.props.onCancel){
+      this.props.onCancel();
+    }
+  }
+
+  handleMouseDown(event){
+    EventUtil.trapImmediate(event);
+  }
+
+  handleUpdateHighlighted(nextIndex){
+    this.setState({highlightedIndex: nextIndex});
+  }
+
+  handleListBlur(){
+    if(this.props.onListBlur){
+      this.props.onListBlur();
+    }
+  }
+
+  handleCancel () {
+    if(this.props.onCancel){
+      this.props.onCancel();
+    }
+  }
+
+  getListItemRenderer() {
+    return this.props.listItemRenderer?this.props.listItemRenderer:ListItemLabel;
+  }
+
+  handleListItemBlur (index, relatedTarget) {
+    this.setState({
+      lastBlurredIndex: index,
+      lastBlurredTimeStamp: Date.now()
+    });
+  }
+
+  render() {
+    return <List
+            checkmark={this.props.checkmark}
+            highlightedIndex={this.state.highlightedIndex}
+            itemRenderer={this.getListItemRenderer()}
+            onCancel={this.handleCancel.bind(this)}
+            onListBlur={this.handleListBlur.bind(this)}
+            onListItemBlur={this.handleListItemBlur.bind(this)}
+            onSelect={this.handleSelect.bind(this)}
+            onUpdateHighlighted={this.handleUpdateHighlighted.bind(this)}
+            options={this.props.options}
+            ref="list"
+            selectedIndex={this.state.selectedIndex}
+            />;
+  }
+
+}
+
+
+SLDSMenuPicklist.displayName = displayName;
+SLDSMenuPicklist.propTypes = propTypes;
+SLDSMenuPicklist.defaultProps = defaultProps;
+
+module.exports = SLDSMenuPicklist;
+module.exports.ListItemLabel = ListItemLabel;
+
diff --git a/components/SLDSMenuPicklist/index.jsx b/components/SLDSMenuPicklist/index.jsx
index a2dca9852a..ca0ecf3735 100644
--- a/components/SLDSMenuPicklist/index.jsx
+++ b/components/SLDSMenuPicklist/index.jsx
@@ -14,9 +14,8 @@ import isEqual from "lodash.isequal";
 import SLDSPopover from "../SLDSPopover";
 import {KEYS, EventUtil} from "../utils";
 import SLDSIcon from "../SLDSIcon";
-import List from "./List";
-import ListItem from "./ListItem";
-import ListItemLabel from "./ListItemLabel";
+import List from "../SLDSMenuList/List";
+import ListItemLabel from "../SLDSMenuList/ListItemLabel";
 
 const displayName = "SLDSMenuPicklist";
 const propTypes = {
@@ -298,6 +297,5 @@ SLDSMenuPicklist.propTypes = propTypes;
 SLDSMenuPicklist.defaultProps = defaultProps;
 
 module.exports = SLDSMenuPicklist;
-module.exports.ListItem = ListItem;
 module.exports.ListItemLabel = ListItemLabel;
 
diff --git a/components/SLDSTimepicker/index.jsx b/components/SLDSTimepicker/index.jsx
new file mode 100644
index 0000000000..bbdaf5ba78
--- /dev/null
+++ b/components/SLDSTimepicker/index.jsx
@@ -0,0 +1,270 @@
+/*
+Copyright (c) 2015, salesforce.com, inc. All rights reserved.
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+
+'use strict';
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import SLDSPopover from '../SLDSPopover';
+import InputIcon from '../SLDSIcon/InputIcon';
+import SLDSMenuList from '../SLDSMenuList';
+import ListItemLabel from '../SLDSMenuList/ListItemLabel';
+
+import {KEYS,EventUtil} from '../utils';
+
+const displayName = 'SLDSTimepicker';
+const propTypes = {
+
+  /**
+   * Time formatting function
+   */
+  formatter: React.PropTypes.func,
+
+  /**
+   * Parsing date string into Date
+   */
+  parser: React.PropTypes.func,
+
+  /**
+   * Date
+   */
+  value: React.PropTypes.instanceOf(Date),
+
+  stepInMinutes: React.PropTypes.number,
+
+  strValue: React.PropTypes.string,
+
+
+
+};
+const defaultProps = {
+  formatter (date) {
+    if(date){
+      return date.toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'});
+    }
+  },
+  onDateChange (date) {
+    console.log('onDateChange should be defined');
+  },
+  parser (timeStr) {
+    const date = new Date();
+    const dateStr = date.toLocaleString(navigator.language, {year: 'numeric', month: 'numeric', day: 'numeric'});
+    return new Date(dateStr+' '+timeStr);
+  },
+  placeholder: 'Pick Time',
+  value: null,
+  stepInMinutes: 30
+};
+
+module.exports = React.createClass({
+
+  displayName: displayName,
+
+  propTypes: propTypes,
+
+  getDefaultProps(){
+    return defaultProps;
+  },
+
+  getInitialState(){
+    return {
+      isOpen:false,
+      value:this.props.value,
+      strValue:this.props.strValue,
+      options:this.getOptions()
+    };
+  },
+
+  handleChange(date, strValue) {
+    this.setState({
+      value:date,
+      strValue:strValue,
+      isOpen:false
+    });
+    if(this.props.onDateChange){
+      this.props.onDateChange(date, strValue);
+    }
+  },
+
+  handleClose() {
+    this.setState({isOpen:false});
+    this.setFocus();
+  },
+
+  handleClick() {
+    this.setState({isOpen:true});
+  },
+
+  handleFocus() {
+//    this.setState({isOpen:true})
+  },
+
+  handleBlur() {
+//    this.setState({isOpen:false})
+  },
+
+  setFocus () {
+    if(this.isMounted()){
+      ReactDOM.findDOMNode(this.refs.date).focus();
+    }
+  },
+
+  parseDate(strValue) {
+    const d = this.props.parser(strValue);
+    if ( Object.prototype.toString.call(d) === "[object Date]" ) {
+      if ( !isNaN( d.getTime() ) ) {
+        return d;
+      }
+    }
+    return new Date();
+  },
+
+  getOptions() {
+    const d = new Date();
+    let options = [];
+    d.setHours(0);
+    d.setMinutes(0);
+    d.setSeconds(0);
+    d.setMilliseconds(0);
+    const curDate = new Date(d);
+    while(d.getDate() === curDate.getDate()){
+      const formatted = this.props.formatter(curDate);
+      options.push({
+        label:formatted,
+        value:new Date(curDate)
+      });
+      curDate.setMinutes(curDate.getMinutes()+this.props.stepInMinutes);
+    }
+    return options;
+  },
+
+  getListItemRenderer() {
+    return this.props.listItemRenderer?this.props.listItemRenderer:ListItemLabel;
+  },
+
+  getValueByIndex(index){
+    const option = this.state.options[index];
+    if(option){
+      return this.state.options[index];
+    }
+  },
+
+  handleSelect(index) {
+    const val = this.getValueByIndex(index);
+    if(val && val.value){
+      this.handleChange(val.value, val.label);
+    }
+    this.handleClose();
+  },
+
+  handleCancel(){
+    this.handleClose();
+  },
+
+  getPopoverContent() {
+    return <SLDSMenuList
+            checkmark={false}
+            itemRenderer={this.getListItemRenderer()}
+            onCancel={this.handleCancel}
+            onSelect={this.handleSelect}
+            options={this.state.options}
+            ref="list"
+            triggerId={this.state.triggerId}
+          />;
+  },
+
+  getSimplePopover() {
+    return (
+      !this.props.disabled && this.state.isOpen?
+        <div
+          className="slds-dropdown slds-dropdown--left slds-dropdown--menu"
+          style={{
+            maxHeight: "20em",
+            overflowX: "hidden",
+            minWidth: "100%"
+          }}>
+          {this.getPopoverContent()}
+        </div>:null
+    );
+  },
+
+  getModalPopover() {
+    return (
+      !this.props.disabled && this.state.isOpen?
+        <SLDSPopover
+          className="slds-dropdown slds-dropdown--left "
+          closeOnTabKey={true}
+          constrainToScrollParent={true}
+          dropClass="slds-picklist"
+          flippable={true}
+          onClose={this.handleCancel.bind(this)}
+          targetElement={this.refs.triggerbutton}>
+          {this.getPopoverContent()}
+        </SLDSPopover>:null
+    );
+  },
+
+  handleInputChange() {
+    const string = ReactDOM.findDOMNode(this.refs.date).value;
+    this.setState({
+      strValue:string
+    });
+    if(this.props.onDateChange){
+      const d = this.props.parser(string);
+      this.props.onDateChange(d, string);
+    }
+  },
+
+  handleKeyDown(event) {
+    if (event.keyCode){
+      const isShift = !!event.shiftKey;
+      if (!isShift && (event.keyCode === KEYS.ENTER ||
+//          event.keyCode === KEYS.SPACE ||
+          event.keyCode === KEYS.DOWN ||
+          event.keyCode === KEYS.UP)){
+        EventUtil.trapEvent(event);
+
+        this.setState({
+          isOpen:true
+        });
+      }
+    }
+  },
+
+  getInputIcon(){
+    return <InputIcon name='clock' style={{pointerEvents: 'none'}} />;
+  },
+
+  render() {
+    return (
+      <div className='slds-form-element'>
+        <label className='slds-form-element__label' htmlFor='date'>{this.props.label}</label>
+        <div className='slds-form-element__control'>
+          <div className='slds-input-has-icon slds-input-has-icon--right'>
+
+            { this.getInputIcon() }
+            <input
+              name='date'
+              ref='date'
+              className='slds-input'
+              type='text'
+              placeholder={this.props.placeholder}
+              value={this.state.strValue}
+              onKeyDown={this.handleKeyDown}
+              onChange={this.handleInputChange}
+              onClick={this.handleClick}
+              onBlur={this.handleBlur}
+              onFocus={this.handleFocus}/>
+          </div>
+        </div>
+        {this.props.modal?this.getModalPopover():this.getSimplePopover()}
+      </div>
+    );
+  }
+});
diff --git a/components/index.js b/components/index.js
index 940287fdc5..0b8cad78a0 100644
--- a/components/index.js
+++ b/components/index.js
@@ -21,6 +21,7 @@ import SLDSModalTrigger from './SLDSModal/trigger';
 import SLDSNotification from './SLDSNotification';
 import SLDSPopoverTooltip from './SLDSPopoverTooltip';
 import SLDSDatepickerSingleSelect from './SLDSDatepickerSingleSelect';
+import SLDSTimepicker from './SLDSTimepicker';
 import SLDSSettings from './SLDSSettings';
 import SLDSUtilityIcon from './SLDSUtilityIcon';
 
@@ -37,6 +38,7 @@ module.exports = {
   SLDSModalTrigger: SLDSModalTrigger,
   SLDSNotification: SLDSNotification,
   SLDSPopoverTooltip: SLDSPopoverTooltip,
+  SLDSTimepicker: SLDSTimepicker,
   SLDSSettings: SLDSSettings,
   SLDSUtilityIcon: SLDSUtilityIcon,
 };
diff --git a/demo/CodeMirror.jsx b/demo/CodeMirror.jsx
index aeb1f3866d..561f46a7fd 100644
--- a/demo/CodeMirror.jsx
+++ b/demo/CodeMirror.jsx
@@ -9,7 +9,6 @@ const ReactDOM = require('react-dom');
 const classNames = require('classnames');
 const trim = require('lodash.trim');
 
-
 const SLDSButton =  require('../components/SLDSButton');
 const SLDSButtonStateful =  require('../components/SLDSButtonStateful');
 const SLDSButtonGroup =  require('../components/SLDSButtonGroup');
@@ -22,7 +21,7 @@ const SLDSModal =  require('../components/SLDSModal');
 const SLDSNotification =  require('../components/SLDSNotification');
 const SLDSPopoverTooltip =  require('../components/SLDSPopoverTooltip');
 const SLDSDatepickerSingleSelect =  require('../components/SLDSDatepickerSingleSelect');
-
+const SLDSTimepicker =  require('../components/SLDSTimepicker');
 
 const displayName = 'CodeMirror';
 const propTypes = {
diff --git a/demo/Samples.js b/demo/Samples.js
index 16b81d3c2a..535c54d567 100644
--- a/demo/Samples.js
+++ b/demo/Samples.js
@@ -22,6 +22,7 @@ const Samples =  {
   Tooltips2: require('fs').readFileSync('demo/code-snippets/TooltipExamples2.js', 'utf8'),
   Tooltips3: require('fs').readFileSync('demo/code-snippets/TooltipExamples3.js', 'utf8'),
   DatepickerSingleSelect: require('fs').readFileSync('demo/code-snippets/DateInputExample-1.js', 'utf8'),
+  Timepicker: require('fs').readFileSync('demo/code-snippets/TimepickerExample.js', 'utf8'),
 };
 
 module.exports = Samples;
diff --git a/demo/code-snippets/TimepickerExample.js b/demo/code-snippets/TimepickerExample.js
new file mode 100644
index 0000000000..82e383b8f7
--- /dev/null
+++ b/demo/code-snippets/TimepickerExample.js
@@ -0,0 +1,5 @@
+<SLDSTimepicker 
+  onDateChange = {function(date, inputStr){
+    console.log('>>> onDateChange ', date, ' inputStr: ',inputStr);
+  }}
+/>
\ No newline at end of file
diff --git a/demo/docs/components.json b/demo/docs/components.json
index ffe6aac576..e59e6ca501 100644
--- a/demo/docs/components.json
+++ b/demo/docs/components.json
@@ -1319,7 +1319,7 @@
                 "required": false,
                 "description": "Date formatting function",
                 "defaultValue": {
-                    "value": "function(date) {\n  return (date.getMonth()+1) +\n    '/'+date.getDate() +\n    '/'+date.getFullYear();\n}",
+                    "value": "function(date) {\n  if(date){\n    return (date.getMonth()+1) +\n      '/'+date.getDate() +\n      '/'+date.getFullYear();\n  }\n}",
                     "computed": false
                 }
             },
@@ -1390,6 +1390,13 @@
                     "computed": false
                 }
             },
+            "strValue": {
+                "type": {
+                    "name": "string"
+                },
+                "required": false,
+                "description": ""
+            },
             "weekDayLabels": {
                 "type": {
                     "name": "array"
@@ -1414,5 +1421,75 @@
                 }
             }
         }
+    },
+    "SLDSTimepicker": {
+        "description": "",
+        "displayName": "SLDSTimepicker",
+        "props": {
+            "formatter": {
+                "type": {
+                    "name": "func"
+                },
+                "required": false,
+                "description": "Time formatting function",
+                "defaultValue": {
+                    "value": "function(date) {\n  if(date){\n    return date.toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'});\n  }\n}",
+                    "computed": false
+                }
+            },
+            "parser": {
+                "type": {
+                    "name": "func"
+                },
+                "required": false,
+                "description": "Parsing date string into Date",
+                "defaultValue": {
+                    "value": "function(timeStr) {\n  const date = new Date();\n  const dateStr = date.toLocaleString(navigator.language, {year: 'numeric', month: 'numeric', day: 'numeric'});\n  return new Date(dateStr+' '+timeStr);\n}",
+                    "computed": false
+                }
+            },
+            "value": {
+                "type": {
+                    "name": "instanceOf",
+                    "value": "Date"
+                },
+                "required": false,
+                "description": "Date",
+                "defaultValue": {
+                    "value": "null",
+                    "computed": false
+                }
+            },
+            "stepInMinutes": {
+                "type": {
+                    "name": "number"
+                },
+                "required": false,
+                "description": "",
+                "defaultValue": {
+                    "value": "30",
+                    "computed": false
+                }
+            },
+            "strValue": {
+                "type": {
+                    "name": "string"
+                },
+                "required": false,
+                "description": ""
+            },
+            "onDateChange": {
+                "defaultValue": {
+                    "value": "function(date) {\n  console.log('onDateChange should be defined');\n}",
+                    "computed": false
+                }
+            },
+            "placeholder": {
+                "defaultValue": {
+                    "value": "'Pick Time'",
+                    "computed": false
+                }
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/demo/index.js b/demo/index.js
index 9eb6ddbf68..7cf6632ab5 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -17,6 +17,7 @@ import ButtonStatefulSection from './pages/ButtonStatefulSection';
 import ButtonGroupSection from './pages/ButtonGroupSection';
 import DateInputSection from './pages/DateInputSection';
 import DatePickerSingleSelectSection from './pages/DatePickerSingleSelectSection';
+import TimePickerSection from './pages/TimePickerSection';
 import DropdownBaseSection from './pages/DropdownSection';
 import IconSection from './pages/IconSection';
 import LookupSection from './pages/LookupSection';
@@ -37,6 +38,7 @@ const routes = (
       <Route name="button-stateful" path="button-stateful" handler={ButtonStatefulSection}/>
       <Route name="button-group" path="button-group" handler={ButtonGroupSection}/>
       <Route name="dateinput" path="dateinput" handler={DateInputSection}/>
+      <Route name="timepicker" path="timepicker" handler={TimePickerSection}/>
       <Route name="datepicker" path="datepicker" handler={DatePickerSingleSelectSection}/>
       <Route name="dropdown" path="dropdown" handler={DropdownBaseSection}/>
       <Route name="icon" path="icon" handler={IconSection}/>
diff --git a/demo/pages/TimePickerSection.js b/demo/pages/TimePickerSection.js
new file mode 100644
index 0000000000..96b3d0b44a
--- /dev/null
+++ b/demo/pages/TimePickerSection.js
@@ -0,0 +1,57 @@
+/*
+Copyright (c) 2015, salesforce.com, inc. All rights reserved.
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*/
+
+import React from 'react';
+import CodeMirror from 'demo/CodeMirror';
+import Samples from 'demo/Samples';
+import PropTable from 'demo/PropTable';
+import DOCS from 'docs';
+import ComponentHeader from 'demo/pages/components/componentHeader';
+
+const displayName = "DatepickerSingleSelectSection";
+const propTypes = {};
+const defaultProps = {};
+
+class DatepickerSingleSelectSection extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  getDescription() {
+    const desc = DOCS["DatepickerSingleSelect"].description;
+    return {__html: desc };
+  }
+
+  render(){
+    const docs = DOCS["Timepicker"] ? true : false;
+    return (
+      <div className='slds-p-around--medium'>
+        <ComponentHeader cmpName="SLDSTimepicker" cmpUrl="http://www.lightningdesignsystem.com/components/datepickers#timepicker" />
+        <div className="copy-text">
+          {docs ? <p dangerouslySetInnerHTML={this.getDescription()} className="slds-p-vertical--small" style={{ "maxWidth": "800px"}}  /> : null}
+        </div>
+
+        <section className="slds-p-vertical--large">
+          <CodeMirror codeText={Samples.Timepicker} />
+        </section>
+        <PropTable component="SLDSTimepicker" />
+      </div>
+    );
+  }
+
+}
+
+DatepickerSingleSelectSection.displayName = displayName;
+DatepickerSingleSelectSection.propTypes = propTypes;
+DatepickerSingleSelectSection.defaultProps = defaultProps;
+
+module.exports = DatepickerSingleSelectSection;
+
diff --git a/demo/pages/index.jsx b/demo/pages/index.jsx
index 2bb011aea0..fc55f6133f 100644
--- a/demo/pages/index.jsx
+++ b/demo/pages/index.jsx
@@ -69,6 +69,8 @@ module.exports = React.createClass( {
               <li><Link to="modal" className="a-plain slds-p-horizontal--x-large slds-p-vertical--x-small">Modal</Link></li>
               <li><Link to="notification" className="a-plain slds-p-horizontal--x-large slds-p-vertical--x-small">Notification</Link></li>
               <li><Link to="tooltip" className="a-plain slds-p-horizontal--x-large slds-p-vertical--x-small">PopoverTooltip</Link></li>
+              <li><Link to="timepicker" className="a-plain slds-p-horizontal--x-large slds-p-vertical--x-small">TimePicker</Link></li>
+
             </ul>
           </aside>
 
diff --git a/scripts/component-docs.js b/scripts/component-docs.js
index fae7bd46ba..dea34a3624 100644
--- a/scripts/component-docs.js
+++ b/scripts/component-docs.js
@@ -14,6 +14,7 @@ var componentNames = [
   'SLDSNotification',
   'SLDSPopoverTooltip',
   'SLDSDatepickerSingleSelect',
+  'SLDSTimepicker',
   //'SLDSGrid',
   //'SLDSUtilityIcon',
 ];