diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx b/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx
new file mode 100644
index 00000000000..409e7814f8b
--- /dev/null
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx
@@ -0,0 +1,8 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { TagsInput } from './TagsInput';
+
+<Meta title="MDX|TagsInput" component={TagsInput} />
+
+# TagsInput
+
+A set of an input field and a button next to it that allows the user to add new tags. The added tags are previewed under the input and can be removed there by clicking the "X" icon. You can customize the width of the input.
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx
index ac585847cf4..25af1e9bb8e 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx
@@ -3,6 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 import { TagsInput } from '@grafana/ui';
+import mdx from './TagsInput.mdx';
 
 const mockTags = ['Some', 'Tags', 'With', 'This', 'New', 'Component'];
 
@@ -10,6 +11,11 @@ export default {
   title: 'Forms/TagsInput',
   component: TagsInput,
   decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const basic = () => {