diff --git a/package.json b/package.json
index 581aae5b75..86a97c4ba8 100644
--- a/package.json
+++ b/package.json
@@ -23,5 +23,8 @@
   "devDependencies": {
     "dtslint": "Microsoft/dtslint#production",
     "types-publisher": "Microsoft/types-publisher#production"
+  },
+  "dependencies": {
+    "jslint": "^0.10.3"
   }
 }
diff --git a/types/zui/index.d.ts b/types/zui/index.d.ts
new file mode 100644
index 0000000000..62f553ae7f
--- /dev/null
+++ b/types/zui/index.d.ts
@@ -0,0 +1,842 @@
+// Type definitions for zui 1.7
+// Project: http://zui.sexy
+// Definitions by: YuanXu <https://github.com/yuanxu>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+/// <reference types="jquery" />
+
+type CallBack = () => void;
+/**
+ * bootstrap
+ */
+interface ModalOptions {
+    backdrop?: boolean | string;
+    keyboard?: boolean;
+    show?: boolean;
+    remote?: string;
+}
+
+interface ModalOptionsBackdropString {
+    backdrop?: string; // for "static"
+    keyboard?: boolean;
+    show?: boolean;
+    remote?: string;
+}
+
+interface ScrollSpyOptions {
+    offset?: number;
+    target?: string;
+}
+
+interface TooltipOptions {
+    animation?: boolean;
+    html?: boolean;
+    placement?: string | CallBack;
+    selector?: string;
+    title?: string | CallBack;
+    trigger?: string;
+    template?: string;
+    delay?: number | object;
+    container?: string | boolean;
+    viewport?: string | CallBack | object;
+}
+
+interface PopoverOptions {
+    animation?: boolean;
+    html?: boolean;
+    placement?: string | CallBack;
+    selector?: string;
+    trigger?: string;
+    title?: string | CallBack;
+    template?: string;
+    content?: any;
+    delay?: number | object;
+    container?: string | boolean;
+    viewport?: string | CallBack | object;
+}
+
+interface CollapseOptions {
+    parent?: any;
+    toggle?: boolean;
+}
+
+interface CarouselOptions {
+    interval?: number;
+    pause?: string;
+    wrap?: boolean;
+    keyboard?: boolean;
+}
+
+interface TypeaheadOptions {
+    source?: any;
+    items?: number;
+    minLength?: number;
+    matcher?(item: any): boolean;
+    sorter?(items: any[]): any[];
+    updater?(item: any): any;
+    highlighter?(item: any): string;
+}
+
+interface AffixOptions {
+    offset?: number | CallBack | object;
+    target?: any;
+}
+
+interface TransitionEventNames {
+    end: string;
+}
+
+interface JQuery {
+    modal(options?: ModalOptions | ModalOptionsBackdropString): JQuery;
+    modal(command: string): JQuery;
+
+    dropdown(command?: string): JQuery;
+
+    scrollspy(options?: ScrollSpyOptions | string): JQuery;
+
+    tab(command?: string): JQuery;
+
+    tooltip(options?: TooltipOptions): JQuery;
+    tooltip(command: string, params?: string): JQuery;
+
+    popover(options?: PopoverOptions | string): JQuery;
+
+    alert(command?: string): JQuery;
+
+    button(command?: string): JQuery;
+
+    collapse(options?: CollapseOptions | string): JQuery;
+
+    carousel(options?: CarouselOptions | string): JQuery;
+
+    typeahead(options?: TypeaheadOptions): JQuery;
+
+    affix(options?: AffixOptions): JQuery;
+
+    emulateTransitionEnd(duration: number): JQuery;
+}
+
+interface JQuerySupport {
+    transition: boolean | TransitionEventNames;
+}
+
+/**
+ * datetime picker
+ */
+
+interface DatetimepickerChangeEventObject extends DatetimepickerEventObject {
+    oldDate: any;
+}
+
+interface DatetimepickerEventObject extends JQueryEventObject {
+    date: any;
+}
+
+interface DatetimepickerIcons {
+    time?: string;
+    date?: string;
+    up?: string;
+    down?: string;
+}
+
+interface DatetimepickerOptions {
+    weekStart?: number;
+    todayBtn?: number | boolean;
+    autoclose?: number | boolean;
+    todayHighlight?: number | boolean;
+    startView?: number;
+    forceParse?: number | boolean;
+    showMeridian?: boolean | number;
+    minView?: number;
+    maxView?: number;
+    pickDate?: boolean;
+    pickTime?: boolean;
+    useMinutes?: boolean;
+    useSeconds?: boolean;
+    useCurrent?: boolean;
+    minuteStepping?: number;
+    minDate?: Date | string | any;
+    maxDate?: Date | string | any;
+    showToday?: boolean;
+    collapse?: boolean;
+    language?: string;
+    defaultDate?: Date | string | any;
+    disabledDates?: Array<Date | string | object>;
+    enabledDates?: Array<Date | string | object>;
+    icons?: DatetimepickerIcons;
+    useStrict?: boolean;
+    direction?: string;
+    sideBySide?: boolean;
+    daysOfWeekDisabled?: number[];
+    calendarWeeks?: boolean;
+    format?: string | boolean;
+    locale?: string;
+    showTodayButton?: boolean;
+    viewMode?: string;
+    inline?: boolean;
+    toolbarPlacement?: string;
+    showClear?: boolean;
+    ignoreReadonly?: boolean;
+}
+
+interface Datetimepicker {
+    date(date: Date | string | object): void;
+    date(): object;
+    minDate(date: Date | string | object): void;
+    minDate(): boolean | object;
+    maxDate(date: Date | string | object): void;
+    maxDate(): boolean | object;
+    show(): void;
+    disable(): void;
+    enable(): void;
+    destroy(): void;
+    toggle(): void;
+}
+
+interface JQuery {
+    datetimepicker(options?: DatetimepickerOptions): JQuery;
+
+    // off(events: "dp.change", selector?: string, handler?: (eventobject: DatetimepickerChangeEventObject) => any): JQuery;
+    // off(events: "dp.change", handler: (eventobject: DatetimepickerChangeEventObject) => any): JQuery;
+
+    // on(events: "dp.change", selector: string, data: any, handler?: (eventobject: DatetimepickerChangeEventObject) => any): JQuery;
+    // on(events: "dp.change", selector: string, handler: (eventobject: DatetimepickerChangeEventObject) => any): JQuery;
+    // on(events: 'dp.change', handler: (eventObject: DatetimepickerChangeEventObject) => any): JQuery;
+
+    // off(events: "dp.show", selector?: string, handler?: (eventobject: DatetimepickerEventObject) => any): JQuery;
+    // off(events: "dp.show", handler: (eventobject: DatetimepickerEventObject) => any): JQuery;
+
+    // on(events: "dp.show", selector: string, data: any, handler?: (eventobject: DatetimepickerEventObject) => any): JQuery;
+    // on(events: "dp.show", selector: string, handler: (eventobject: DatetimepickerEventObject) => any): JQuery;
+    // on(events: 'dp.show', handler: (eventObject: DatetimepickerEventObject) => any): JQuery;
+
+    // off(events: "dp.hide", selector?: string, handler?: (eventobject: DatetimepickerEventObject) => any): JQuery;
+    // off(events: "dp.hide", handler: (eventobject: DatetimepickerEventObject) => any): JQuery;
+
+    // on(events: "dp.hide", selector: string, data: any, handler?: (eventobject: DatetimepickerEventObject) => any): JQuery;
+    // on(events: "dp.hide", selector: string, handler: (eventobject: DatetimepickerEventObject) => any): JQuery;
+    // on(events: 'dp.hide', handler: (eventObject: DatetimepickerEventObject) => any): JQuery;
+
+    // off(events: "dp.error", selector?: string, handler?: (eventobject: DatetimepickerEventObject) => any): JQuery;
+    // off(events: "dp.error", handler: (eventobject: DatetimepickerEventObject) => any): JQuery;
+
+    // on(events: "dp.error", selector: string, data: any, handler?: (eventobject: DatetimepickerEventObject) => any): JQuery;
+    // on(events: "dp.error", selector: string, handler: (eventobject: DatetimepickerEventObject) => any): JQuery;
+    // on(events: 'dp.error', handler: (eventObject: DatetimepickerEventObject) => any): JQuery;
+
+    data(key: 'DateTimePicker'): Datetimepicker;
+}
+
+/**
+ * store
+ */
+interface StoreStatic {
+    enable: boolean;
+    storage: any;
+    length(): number;
+    remove(key: string): any;
+    get<T>(key: string): T;
+    set<T>(key: string, value?: T): any;
+    key(index: number): string;
+    forEach<T>(cb: (key: string, value: T) => any): any;
+    serialize(value: any): string;
+    deserialize<T>(value: string): T;
+    getAll<T>(): T;
+    removeItem(key: string): any;
+    getItem(key: string): string;
+    setItem(key: string, value: any): any;
+    clear(): void;
+
+    page: any;
+    pageGet(key: string): any;
+    pageSet(key: string, value: any): any;
+    pageRemove(key: string): any;
+    pageSave(): any;
+    pageClear(): any;
+}
+
+/**
+ * messager
+ */
+declare enum MessagerTypeEnum {
+    'default', 'primary', 'success', 'info', 'warning', 'danger', 'important', 'special'
+}
+interface Action {
+    name?: string;
+    icon?: string;
+    text?: string;
+    html?: string;
+    action?: ActionFunc;
+}
+
+type ActionFunc = () => boolean;
+
+type OnActionFunc = (name: string, action: string, messager: Messager) => any;
+
+interface MessagerOption {
+    type?: MessagerTypeEnum | string;
+    placement?: string;
+    time?: number;
+    message?: string;
+    parent?: string;
+    icon?: string;
+    close?: boolean;
+    fade?: boolean;
+    scale?: boolean;
+    actions?: Action[];
+    onAction?: OnActionFunc;
+    cssClass?: string;
+    contentClass?: string;
+    show?: boolean;
+}
+interface Messager {
+    show(cb?: CallBack): any;
+    show(message: string, cb?: CallBack): any;
+
+    hide(cb?: CallBack): any;
+}
+interface MessagerStatic {
+    new(option?: MessagerOption): Messager;
+    new(message: string, option?: MessagerOption): Messager;
+}
+
+interface ZuiStatic {
+    // $.zui.messager
+    messager: Messager;
+    Messager: MessagerStatic;
+
+    store: StoreStatic;
+}
+
+/**
+ * modal trigger
+ */
+interface ModalTriggerOption {
+    name?: string;
+    className?: string;
+    type?: string;
+    url?: string;
+    remote?: string;
+    iframe?: string;
+    size?: string;
+    width?: string;
+    height?: string;
+    showHeader?: boolean;
+    title?: string;
+    icon?: string;
+    fade?: boolean;
+    postion?: string;
+    backdrop?: boolean;
+    keyboard?: boolean;
+    moveable?: boolean;
+    rememberPos?: boolean;
+    waittime?: number;
+    loadingIcon?: string;
+
+    show?(): any;
+    onShow?(): any;
+    onHide?(): any;
+    hidden?(): any;
+    loaded?(): any;
+    broken?(): any;
+}
+
+interface ModalTrigger {
+    show(option?: ModalTriggerOption): any;
+    close(): any;
+    toggle(option?: ModalTriggerOption): any;
+    adjustPostion(option?: ModalTriggerOption): any;
+}
+interface ModalTriggerStatic {
+    new(option?: ModalTriggerOption): ModalTrigger;
+}
+
+interface JQuery {
+    modalTrigger(option?: ModalTriggerOption): JQuery; // $('#modal').modalTrigger()
+    data(value: string): JQuery;
+}
+
+interface ZuiStatic {
+    ModalTrigger: ModalTriggerStatic;
+    modalTrigger: ModalTrigger;
+}
+
+interface JQueryStatic {
+    zui: ZuiStatic;
+}
+
+/**
+ * color
+ */
+
+interface Color {
+    rgb(rgbaColor?: string): object;
+    hue(hue: string): string;
+    darken(percent: number): string;
+    lighten(percent: number): string;
+    clone(): Color;
+    fade(percent: number): any;
+    toHsl(): object;
+    luma(): string;
+    saturate(): string;
+    contrast(dark: string, light: string, threshold: number): string;
+    hexStr(): string;
+    toCssStr(): string;
+}
+
+interface ColorStatic {
+    new(r: number, g: number, b: number, a?: number): Color;
+    new(hexStrOrrgbColorOrRgbaColorOrName?: string): Color;
+    isColor(str: string): boolean;
+    names: string[];
+}
+interface ColorSet {
+    get(name: string): Color;
+}
+interface ZuiStatic {
+    Color: ColorStatic;
+    colorset: ColorSet;
+}
+
+/**
+ * draggable
+ */
+
+interface Postion {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+interface DraggableEvent {
+    event?: object;
+    element?: JQuery | object;
+    target?: JQuery | object;
+    pos?: Postion;
+    offset?: object;
+    smallOffset?: object;
+    startOffset?: object;
+}
+interface DraggableOption {
+    container?: string;
+    move?: boolean;
+    selector?: string;
+    handle?: string;
+    mouseButton?: string;
+    stopPropagation?: boolean;
+    before?(e?: DraggableEvent): boolean;
+    drag?(e: DraggableEvent): void;
+    finish?(e: DraggableEvent): void;
+}
+interface JQuery {
+    draggable(option: DraggableOption | string): JQuery;
+}
+
+/**
+ * droppable
+ */
+
+interface Postion {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+
+interface DroppableEvent {
+    event?: object;
+    element?: JQuery;
+    target?: JQuery;
+    pos?: Postion;
+    offset?: object;
+    smallOffset?: object;
+    startOffset?: object;
+}
+
+interface DroppableOption {
+    container?: string;
+    selector?: string;
+    handle?: string;
+    target: JQuery | string;
+
+    flex?: boolean;
+    deviation?: number;
+    sensorOffsetX?: number;
+    sensorOffsetY?: number;
+
+    before?(e?: DroppableEvent): boolean;
+    start?(e?: DroppableEvent): void;
+    drag?(e: DroppableEvent): void;
+    beforeDrop?(e: DroppableEvent): boolean;
+    drop?(e: DroppableEvent): void;
+    finish?(e: DroppableEvent): void;
+    always?(e: DroppableEvent): void;
+}
+interface JQuery {
+    droppable(option: DroppableOption | string): JQuery;
+}
+
+/**
+ * sortable
+ */
+
+interface SortEvent extends Event {
+    list: Array<JQuery | object>;
+    element: JQuery | object;
+}
+
+interface SortableOption {
+    selector?: string;
+    trigger?: string;
+    reverse?: boolean;
+    dragCssClass?: string;
+    sortingClass?: string;
+    mouseButton?: string;
+    start?(e?: SortEvent): void;
+    order?(e?: SortEvent): void;
+    finish?(e?: SortEvent): void;
+}
+interface JQuery {
+    sortable(option?: SortableOption | string): JQuery;
+}
+
+/**
+ * selectable
+ */
+
+interface SelectableEvent extends Event {
+    selections: Map<number, boolean>;
+    selected: number[];
+}
+interface SelectableOption {
+    selector?: string;
+    trigger?: string;
+    rangeStyle?: string | object;
+    clickBehavior?: string;
+    mouseButton?: string;
+    ignoreVal?: number;
+
+    start?(e?: SelectableEvent): boolean;
+    finish?(e?: SelectableEvent): void;
+    select?(e?: SelectableEvent): void;
+    unselect?(e?: SelectableEvent): void;
+}
+
+interface Selectable {
+    toggle(elementOrId?: string | object | JQuery): any;
+    select(elementOrId?: string | object | JQuery): any;
+    unselect(elementOrId?: string | object | JQuery): any;
+}
+interface JQuery {
+    selectable(option?: SelectableOption): JQuery;
+}
+
+/**
+ * image cutter
+ */
+
+interface ImageCutterOption {
+    coverColor?: string;
+    coverOpacity?: number;
+    defaultWidth?: number;
+    defaultHeight?: number;
+    fixedRatio?: boolean;
+    minWidth?: number;
+    minHeight?: number;
+    post?: string;
+    get?: string;
+}
+interface ImageData {
+    originWidth: number;
+    originHeight: number;
+    scaled: boolean;
+    scaleHeight: number;
+    scaleWidth: number;
+    // width: number;
+    // height: number;
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+}
+interface ImageCutter {
+    resetImage(img: string): any;
+    getData(): ImageData;
+}
+
+interface JQuery {
+    imgCutter(option: ImageCutterOption): JQuery;
+    data(cmd: string): ImageCutter;
+}
+
+/**
+ * treeview
+ */
+
+interface TreeNode {
+    title?: string;
+    url?: string;
+    html?: string;
+    children?: TreeNode[];
+    open?: boolean;
+    id?: string;
+}
+interface TreeMenuOption {
+    animate?: boolean;
+    initialState?: string;
+    data?: TreeNode[];
+    itemCreator?(li: JQuery | object, item: TreeNode): any;
+    itemWrapper?: boolean;
+}
+
+interface TreeMenu {
+    expand(params?: JQuery, disableAnimate?: boolean): void;
+
+    collapse(params?: JQuery, disableAnimate?: boolean): void;
+
+    toggle(params?: JQuery, disableAnimate?: boolean): void;
+
+    show(params?: JQuery, disableAnimate?: boolean): void;
+
+    add(element: JQuery, items: TreeNode[], expand?: boolean, disabledAnimate?: boolean): void;
+    toData($ul?: JQuery, filter?: string): object;
+
+    reload(data: TreeNode[]): void;
+    remove(): void;
+    empty(): void;
+}
+
+interface JQuery {
+    tree(option?: TreeMenuOption): JQuery;
+}
+
+interface Column {
+    width?: number;
+    text?: string;
+    type?: string;
+    flex?: boolean;
+    colClass?: string;
+    sort?: string;
+    ignore?: boolean;
+}
+interface Row {
+    id?: string;
+    checked?: boolean;
+    cssClass?: string;
+    css?: string;
+    data?: [number, string, string];
+}
+interface DataTableData {
+    rows: Row[];
+    cols: Column[];
+}
+interface AfterLoadEvent extends Event {
+    data: DataTableData;
+}
+interface SortEvent extends Event {
+    sorter: {
+        index: number;
+        sortUp: boolean;
+    };
+}
+interface SizeChangeEvent extends Event {
+    changes: {
+        change: string;
+        oldWidth: number;
+        newWidth: number;
+        colIndex: number;
+    };
+}
+interface ChecksChangeEvent extends Event {
+    checks: {
+        checkedAll: boolean;
+        checks: number[];
+    };
+}
+interface DataTableOption {
+    checkable?: boolean;
+    checkByClickRow?: boolean;
+    checkedClass?: string;
+    storage?: boolean;
+    sortable?: boolean;
+    fixedHeader?: boolean;
+    fixedHeaderOffset?: number;
+    fixedLeftWidth?: string;
+    fixedRightWidth?: string;
+    flexHeadDrag?: boolean;
+    scrollPos?: string;
+    rowHover?: boolean;
+    colHover?: boolean;
+    fixCellHeight?: boolean;
+    minColWidth?: number;
+    minFixedLeftWidth?: number;
+    minFixedRightWidth?: number;
+    minFlexAreaWidth?: number;
+    selectable?: boolean | object;
+
+    afterLoad?(event: AfterLoadEvent): void;
+    ready?(): void;
+    sort?(event: SortEvent): void;
+    sizeChanged?(event: SizeChangeEvent): void;
+    checksChanged?(event: ChecksChangeEvent): void;
+}
+
+interface DataTable {
+    checks: { checkedAll: boolean, checks: number[] };
+}
+
+interface JQuery {
+    datatable(option?: DataTableOption): JQuery;
+    datatable(command: string, optionOrData: DataTableOption | DataTableData): JQuery;
+}
+
+/**
+ * uploader
+ */
+
+interface UploaderOption {
+    drop_element?: string;
+    browse_button?: string;
+    url: string;
+    qiniu?: object;
+    filters?: {
+        mime_type: Array<{
+            title?: string;
+            extensions?: string;
+        }>,
+        max_file_size?: string;
+        prevent_duplicates?: string;
+    };
+    fileList?: string;
+    fileTemplate?: string;
+    fileFormater?($file: JQuery, file: FileObj, status: STATUS): void;
+    fileIconCreator?(fileType: string, file: FileObj, uploader: Uploader): void;
+    staticFiles?: Array<{
+        id?: string;
+        name?: string;
+        type?: string;
+        size?: string;
+        origSize?: string;
+        lastModifiedDate?: Date;
+    }>;
+    rename?: boolean;
+    renameExtension?: boolean;
+    renameByClick?: boolean;
+    autoUpload?: boolean;
+    browseByClickList?: boolean;
+    dropPlaceholder?: boolean;
+    previewImageIcon?: boolean;
+    sendFileName?: boolean;
+    sendFileId?: boolean;
+    responseHandler?: boolean | CallBack;
+    limitFilesCount?: boolean | number;
+    deleteConfirm?: boolean | string;
+    removeUploaded?: boolean;
+    statusCreator?(total: UploadProgress, state: STATUS, uploader: Uploader): void;
+    previewImageSize?: { width: number, height: number };
+    uploadedMessage?: boolean;
+    deleteActionOnDone?: boolean;
+    renameActionOnDone?: boolean;
+    headers?: object;
+    multipart?: boolean;
+    multipart_params?: object | CallBack;
+    max_retries?: number;
+    chunk_size?: string;
+    resize?: {
+        width?: number;
+        height?: number;
+        crop?: boolean;
+        quuality?: number;
+        preserve_headers?: boolean;
+    };
+    multi_selection?: boolean;
+    unique_names?: boolean;
+    runtimes?: string;
+    file_data_name?: string;
+    flash_swf_url?: string;
+    silverlight_xap_url?: string;
+    lang?: string;
+
+    onInit?(): void;
+    onFilesAdded?(fiels: FileObj[]): void;
+    onUploadProgress?(file: FileObj): void;
+    onFileUploaded?(file: FileObj, responseObject: ResponseObject): void;
+    onUploadComplete?(files: FileObj[]): void;
+    onFilesRemoved?(files: FileObj[]): void;
+    onChunkUploaded?(file: FileObj, responseObject: ResponseObject): void;
+    onUploadFile?(file: FileObj): void;
+    onBeforeUpload?(file: FileObj): void;
+    onStateChanged?(status: STATUS): void;
+    onQueueChanged?(): void;
+    onError?(error: { error: ERRORS, message: string, file: FileObj }): void;
+}
+interface ResponseObject {
+    response?: string;
+    responseHeaders?: object;
+    status?: number;
+    offset?: number;
+    total?: number;
+}
+declare enum STATUS {
+    STOPPED = 1, STARTED = 2, QUEUED = 1, UPLOADING = 2, FAILED = 3, DONE = 4
+}
+interface FileObj {
+    id?: string;
+    name?: string;
+    type?: string;
+    ext?: string;
+    isImage?: boolean;
+    previewImage?: string;
+    size?: number;
+    origSize?: number;
+    loaded?: number;
+    percent?: number;
+    status?: STATUS;
+    lastModifiedDate?: Date;
+    getNative(): File;
+    destroy(): void;
+}
+interface UploadProgress {
+    size?: number;
+    loaded?: number;
+    uploaded?: number;
+    failed?: number;
+    queued?: number;
+    percent?: number;
+    bytesPerSec?: number;
+}
+declare enum ERRORS {
+    GENERIC_ERROR = -100,
+    HTTP_ERROR = -200,
+    IO_ERROR = -300,
+    SECURITY_ERROR = -400,
+    INIT_ERROR = -500,
+    FILE_SIZE_ERROR = -600,
+    FILE_EXTENSION_ERROR = -601,
+    FILE_DUPLICATE_ERROR = -602,
+    IMAGE_FORMAT_ERROR = -700,
+    IMAGE_MEMORY_ERROR = -701,
+    IMAGE_DIMENSIONS_ERROR = -702
+}
+interface Uploader {
+    showMessage(message: string, type: string, time?: number): void;
+    hideMessage(): void;
+    start(): void;
+    stop(): void;
+    getState(): STATUS;
+    isStarted(): boolean;
+    isStopped(): boolean;
+    getFiles(): FileObj[];
+    getTotal(): UploadProgress;
+    disableBrowse(disable: boolean): void;
+    getFile(id: string): FileObj;
+    showFile(file: FileObj | FileObj[]): void;
+    removeFile(file: FileObj): void;
+    destroy(): void;
+    showStatus(): void;
+}
+
+interface JQuery {
+    uploader(option: UploaderOption): JQuery;
+}
diff --git a/types/zui/package.json b/types/zui/package.json
new file mode 100644
index 0000000000..d33ff913ce
--- /dev/null
+++ b/types/zui/package.json
@@ -0,0 +1,5 @@
+{
+    "dependencies": {
+        "moment": ">=2.14.0"
+    }
+}
diff --git a/types/zui/tsconfig.json b/types/zui/tsconfig.json
new file mode 100644
index 0000000000..36f8848110
--- /dev/null
+++ b/types/zui/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "target": "es6",
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "zui-tests.ts"
+    ]
+}
\ No newline at end of file
diff --git a/types/zui/tslint.json b/types/zui/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/zui/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }
diff --git a/types/zui/zui-tests.ts b/types/zui/zui-tests.ts
new file mode 100644
index 0000000000..cccc6e3109
--- /dev/null
+++ b/types/zui/zui-tests.ts
@@ -0,0 +1,335 @@
+/// <reference types="node" />
+
+new $.zui.Messager();
+
+new $.zui.Messager('提示消息：成功', {
+    type: 'success' // 定义颜色主题
+}).show();
+new $.zui.Messager("message");
+let messagarOption: MessagerOption = {};
+new $.zui.Messager(messagarOption);
+new $.zui.Messager("message", messagarOption);
+$.zui.messager.show("ok");
+
+/********   store  *****/
+$.zui.store.set('name', 'catouse');                      // 使用本地存储设置'name'值为'catouse'
+$.zui.store.set('date', { year: 2014, month: 8, day: 6 }); // 将一个对象存储到本地存储
+
+console.log($.zui.store.get('name'));                    // 从本地存储获取'name'的值
+console.log($.zui.store.get<any>('date').year);               // 从本地存储获取'date'值的year属性
+
+$.zui.store.forEach((key: string, value: any) => {               // 遍历所有本地存储的条目
+    console.log(value);
+});
+
+console.log($.zui.store.key(0));                         // 获取本地存储第一个条目的名称
+
+$.zui.store.remove('name');                              // 从本地存储移除‘name’的值
+$.zui.store.clear();                                     // 清空所有本地存储的条目
+
+/* 以下操作的键值仅针对当前页面 */
+$.zui.store.pageSet('name', 'catouse');                      // 使用本地存储设置'name'值为'catouse'
+$.zui.store.pageSet('date', { year: 2014, month: 8, day: 6 }); // 将一个对象存储到本地存储
+
+console.log($.zui.store.pageGet('name'));                    // 从本地存储获取'name'的值
+console.log($.zui.store.pageGet('date').year);               // 从本地存储获取'date'值的year属性
+
+$.zui.store.pageRemove('name');                              // 从本地存储移除‘name’的值
+$.zui.store.pageClear();                                     // 清空所有本地存储的条目
+
+/**
+ * modal
+ */
+$('#myModal').modal({
+    keyboard: false,
+    show: true
+});
+
+/**
+ * modal trigger
+ */
+
+$('#triggerButton').modalTrigger({ title: '新的标题' });
+
+/* 使用触发器对象直接显示 */
+(new $.zui.ModalTrigger({ title: '新的标题' })).show();
+$.zui.modalTrigger.show({ title: '标题' });
+
+/**
+ * tabs
+ */
+$().tab('show');
+$('#myTabLink').tab('show');
+
+/**
+ * tooltip
+ */
+$('[data-toggle="tooltip"]').tooltip();
+$('#element').tooltip('show');
+$('#element').tooltip('show', '这是新的工具提示内容');
+
+/**
+ * popover
+ */
+// 或者在初始化时指定弹出方向
+$('[data-toggle="popover"]').popover({
+    placement: 'bottom'
+});
+$('#myPopover').popover('show');
+
+/**
+ * collapse
+ */
+$('#myCollapseContent').collapse({
+    toggle: false
+});
+$().collapse('show');
+
+$('#myCollapseContent').on('hidden.zui.collapse', () => {
+    console.log('折叠内容已隐藏。');
+});
+
+/**
+ * carousel
+ */
+$('.carousel').carousel();
+
+/**
+ * datetime picker
+ */
+// 仅选择日期
+$(".form-date").datetimepicker(
+    {
+        language: "zh-CN",
+        weekStart: 1,
+        todayBtn: 1,
+        autoclose: 1,
+        todayHighlight: 1,
+        startView: 2,
+        minView: 2,
+        forceParse: 0,
+        format: "yyyy-mm-dd"
+    });
+// 选择时间
+$(".form-time").datetimepicker({
+    language: "zh-CN",
+    weekStart: 1,
+    todayBtn: 1,
+    autoclose: 1,
+    todayHighlight: 1,
+    startView: 1,
+    minView: 0,
+    maxView: 1,
+    forceParse: 0,
+    format: 'hh:ii'
+});
+// 选择时间和日期
+$(".form-datetime").datetimepicker(
+    {
+        weekStart: 1,
+        todayBtn: 1,
+        autoclose: 1,
+        todayHighlight: 1,
+        startView: 2,
+        forceParse: 0,
+        showMeridian: 1,
+        format: "yyyy-mm-dd hh:ii"
+    });
+
+// 仅选择日期
+$(".form-date").datetimepicker(
+    {
+        language: "zh-CN",
+        weekStart: 1,
+        todayBtn: 1,
+        autoclose: 1,
+        todayHighlight: 1,
+        startView: 2,
+        minView: 2,
+        forceParse: 0,
+        format: "yyyy-mm-dd"
+    });
+// 选择时间
+$(".form-time").datetimepicker({
+    language: "zh-CN",
+    weekStart: 1,
+    todayBtn: 1,
+    autoclose: 1,
+    todayHighlight: 1,
+    startView: 1,
+    minView: 0,
+    maxView: 1,
+    forceParse: 0,
+    format: 'hh:ii'
+});
+
+// /**
+//  * chosen
+//  */
+
+// $('select.chosen-select').chosen({
+//     no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
+//     disable_search_threshold: 10, // 10 个以下的选择项则不显示检索框
+//     search_contains: true         // 从任意位置开始检索
+// });
+
+/**
+ * color
+ */
+// 创建颜色实例
+const myColor = new $.zui.Color('#095823');
+
+// 调用实例方法
+const myHsl = myColor.toHsl();
+
+const zuiPrimaryColor = $.zui.colorset.get('primary');
+console.log('ZUI primary color is', zuiPrimaryColor.toCssStr());
+
+/**
+ * draggable
+ */
+let count = 0;
+$('#draggableBtn').draggable({
+    container: '#draggableBox',
+    before: () => {
+        console.log(count++ + ': ' + '[开始] 拖动...\n');
+        return true;
+    },
+    drag: (e: DraggableEvent) => {
+        console.log(count++ + ': ' + '拖动: pos = ' + JSON.stringify(e.pos) + ', offset = ' + JSON.stringify(e.offset) + '\n');
+        //        console.log('(' + e.pos.left + ', ' + e.pos.top + ')');
+    },
+    finish: (e: DraggableEvent) => {
+        console.log(count++ + ': ' + '[完毕]：pos = ' + JSON.stringify(e.pos) + ', offset = ' + JSON.stringify(e.offset) + '\n');
+    }
+});
+
+/**
+ * droppable
+ */
+$('#multiDroppableContainer').droppable({
+    selector: '.btn-droppable', // 定义允许拖放的元素
+    target: '.droppable-target',
+    start: () => {
+        $('#multiDroppableContainer .droppable-target').removeClass('panel-warning').removeClass('panel-success').find('.panel-heading').text('拖动到这里吗？');
+    },
+    drop: (event: DroppableEvent) => {
+        $('#multiDroppableContainer .droppable-target').removeClass('panel-success').removeClass('panel-warning');
+        if (event.target && event.element) {
+            const elementId = event.element.find('.btn-droppable-id').text();
+            let msg = '真棒！';
+            event.target.addClass('panel-success').find('.panel-heading').text('成功将【按钮#' + elementId + '】拖到目的地。');
+            msg += '成功拖动【按钮#' + elementId + '】到区域 ' + event.target.find('.area-name').text();
+
+            $.zui.messager.show(msg);
+        }
+    },
+    drag: (event: DroppableEvent) => {
+        $('#multiDroppableContainer .droppable-target').removeClass('panel-success').removeClass('panel-warning');
+        if (event.target) event.target.addClass('panel-warning');
+    }
+});
+
+/**
+ * sortable
+ */
+// 定义选项对象
+const options = {
+    selector: '.sortable-item',
+    finish: (e: SortEvent) => {
+        console.log('排序完成：', e);
+    },
+    // 设置更多选项...
+};
+
+// 初始化时传入选项参数
+$('#sortableList').sortable(options);
+
+/**
+ * selectable
+ */
+
+$('#selectable').selectable({
+    selector: 'div', // #selectable 内的所有 div 都可以进行选中
+    rangeStyle: {
+        border: '1px solid red' // 拖选范围指示矩形边框设置为红色
+    },
+    finish: (data: SelectableEvent) => {  // 选择结束时的回调函数
+        // 所有元素的选中或非选中状态
+        console.log(data.selections);
+
+        // 所有已选中的元素 ID 值的数组
+        console.log(data.selected);
+    }
+});
+
+/**
+ * image cutter
+ */
+
+// 获取 imgCutter 实例
+const myImgCutter = $('#imgCutter').data('zui.imgCutter');
+
+// 调用 resetImg 方法
+myImgCutter.resetImage('http://zui.sexy/docs/img/img1.jpg');
+
+// 调用 getData 方法
+const myImgCutterData = myImgCutter.getData();
+
+/**
+ * treemenu
+ */
+const myTreeData = [{
+    title: '水果',
+    url: 'http://zui.sexy',
+    open: true,
+    children: [
+        { title: '橘子' },
+        {
+            title: '瓜',
+            children: [
+                { title: '西瓜' },
+                { title: '黄瓜' }
+            ]
+        }
+    ]
+}, {
+    title: '坚果',
+    children: [
+        { title: '向日葵' },
+        { title: '瓜子' }
+    ]
+}, {
+    title: '蔬菜'
+}];
+
+$('#myTree').tree({ data: myTreeData });
+
+/**
+ * datatable
+ */
+$('table.datatable').datatable({ sortable: true });
+// 使用data参数更新数据：
+$('table.datatable').datatable('load', {
+    cols: [
+        { width: 80, text: '#', type: 'number', flex: false, colClass: 'text-center' },
+        { width: 160, text: '时间', type: 'date', flex: false, sort: 'down' },
+        { width: 80, text: '名称', type: 'string', flex: true, colClass: '' }
+    ],
+    rows: [
+        { checked: false, data: [1, '2016-01-18 11:09:36', '新的名称示例1'] },
+        { checked: false, data: [2, '2016-01-22 12:06:16', '新的名称示例2'] },
+        // 更多数据
+    ]
+});
+
+/**
+ * uplaoder
+ */
+$('#myUploader').uploader({
+    url: '...',
+    // ...,
+    onUploadFile: (file: FileObj) => {
+        console.log('上传成功', file);
+    }
+});