diff --git a/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.mdx b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.mdx
new file mode 100644
index 00000000000..8a5917ef97f
--- /dev/null
+++ b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.mdx
@@ -0,0 +1,14 @@
+import { Props } from '@storybook/addon-docs/blocks';
+import { FormattedValueDisplay } from './FormattedValueDisplay';
+
+# FormattedValueDisplay
+
+Used to display a value, which also supports prefix and suffix.
+### Usage
+
+```jsx
+ <FormattedValueDisplay value={{ text: 'Test value' }} style={{ fontSize: 12 }} />
+```
+
+### Props
+<Props of={FormattedValueDisplay} />
diff --git a/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.story.tsx b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.story.tsx
new file mode 100644
index 00000000000..d81bceb6b8b
--- /dev/null
+++ b/packages/grafana-ui/src/components/FormattedValueDisplay/FormattedValueDisplay.story.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { FormattedValueDisplay } from './FormattedValueDisplay';
+import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
+import mdx from './FormattedValueDisplay.mdx';
+
+export default {
+  title: 'Visualizations/FormattedValueDisplay',
+  component: FormattedValueDisplay,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const basic = () => {
+  return <FormattedValueDisplay value={{ text: 'Test value' }} style={{ fontSize: 12 }} />;
+};