diff --git a/types/storybook-readme/components/Marked.d.ts b/types/storybook-readme/components/Marked.d.ts
new file mode 100644
index 0000000000..62d5e78ec8
--- /dev/null
+++ b/types/storybook-readme/components/Marked.d.ts
@@ -0,0 +1,3 @@
+import * as React from "react";
+
+export default function Marked(props: { md: string }): JSX.Element;
diff --git a/types/storybook-readme/index.d.ts b/types/storybook-readme/index.d.ts
new file mode 100644
index 0000000000..4a541d8f6a
--- /dev/null
+++ b/types/storybook-readme/index.d.ts
@@ -0,0 +1,42 @@
+// Type definitions for storybook-readme 4.0
+// Project: https://github.com/tuchk4/storybook-readme
+// Definitions by: Taeheon Kim  <https://github.com/lonyele>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+// Shared Types
+export type Renderable = React.ComponentType | JSX.Element;
+export type RenderFunction = () => Renderable | Renderable[];
+export type Readme = string | string[];
+
+export type DecoratorPattern = (
+  story: RenderFunction,
+  context: { kind: string; story: string }
+) => Renderable | null;
+
+export type HOCPattern = (story: RenderFunction) => Renderable | null;
+
+// WithReadme Types
+export function withReadme(readme: Readme): DecoratorPattern;
+export function withReadme(
+  readme: Readme,
+  story: RenderFunction
+): RenderFunction;
+
+// WithDocs Types
+export interface CustomComponents {
+  PreviewComponent: (props: { children: JSX.Element }) => JSX.Element;
+  FooterComponent: (props: { children: JSX.Element }) => JSX.Element;
+}
+
+export function withDocs(
+  custom: CustomComponents
+): (readme: Readme) => HOCPattern;
+export function withDocs(readme: Readme, story: RenderFunction): RenderFunction;
+export function withDocs(readme: Readme): DecoratorPattern;
+export namespace withDocs {
+  function addFooterDocs(footerDoc: string): void;
+}
+
+// Doc Types
+export function doc(readme: string): RenderFunction;
diff --git a/types/storybook-readme/storybook-readme-tests.tsx b/types/storybook-readme/storybook-readme-tests.tsx
new file mode 100644
index 0000000000..57ee811cae
--- /dev/null
+++ b/types/storybook-readme/storybook-readme-tests.tsx
@@ -0,0 +1,77 @@
+import * as React from "react";
+import { storiesOf } from "@storybook/react";
+import { withDocs, withReadme, doc } from "storybook-readme";
+import Marked from "storybook-readme/components/Marked";
+
+// Possibly any .md files or strings
+const DocExample1 = `
+## Eaxmple Markdown 1 for component
+A very simple component with markdown
+`;
+
+const DocExample2 = `
+## Example Markdown 2 for component
+A very simple component with markdown
+`;
+
+// Here are the examples for a type compatibility. Please look https://github.com/tuchk4/storybook-readme for actual usages
+
+// withReadme usages. Both Decorator/HOC style
+storiesOf("withReadme Example", module)
+  .addDecorator(withReadme(DocExample1))
+  .addDecorator(withReadme([DocExample1, DocExample2]))
+  .add(
+    "StoryName Here",
+    withReadme(DocExample1, () => <div>your react component</div>)
+  )
+  .add(
+    "StoryName Here",
+    withReadme([DocExample1, DocExample2], () => (
+      <div>your react component</div>
+    ))
+  );
+
+// withDocs usages.
+const withDocsCustom = withDocs({
+  PreviewComponent: ({ children }) => <div>{children}</div>,
+  FooterComponent: ({ children }) => <div>{children}</div>
+});
+
+withDocs.addFooterDocs(DocExample1);
+
+storiesOf("withDocs Example", module)
+  .addDecorator(withDocs(DocExample1))
+  .addDecorator(withDocs([DocExample1, DocExample2]))
+  .addDecorator(withDocsCustom(DocExample1))
+  .addDecorator(withDocsCustom([DocExample1, DocExample2]))
+  .add(
+    "StoryName Here",
+    withDocs(DocExample1, () => <div>your react component</div>)
+  )
+  .add(
+    "StoryName Here",
+    withDocs([DocExample1, DocExample2], () => <div>your react component</div>)
+  );
+
+// doc usage.
+storiesOf("Doc", module).add("StoryName Here", doc(DocExample1));
+
+// Marked usage.
+storiesOf("Custom Layout", module).add("StoryName Here", () => {
+  return (
+    <React.Fragment>
+      <div>
+        <div>your react component</div>
+      </div>
+      <Marked md={"### INTRO "} />
+      <div>
+        <div>your react component</div>
+      </div>
+      <Marked md={DocExample1} />
+      <div>
+        <div>your react component</div>
+      </div>
+      <Marked md={"### OUTRO "} />
+    </React.Fragment>
+  );
+});
diff --git a/types/storybook-readme/tsconfig.json b/types/storybook-readme/tsconfig.json
new file mode 100644
index 0000000000..7afd9d3ee0
--- /dev/null
+++ b/types/storybook-readme/tsconfig.json
@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": ["dom", "es6"],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "jsx": "react",
+        "typeRoots": ["../"],
+        "paths": {
+            "@storybook/react": ["storybook__react"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "components/Marked.d.ts",
+        "storybook-readme-tests.tsx"
+    ]
+}
diff --git a/types/storybook-readme/tslint.json b/types/storybook-readme/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/storybook-readme/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }