diff --git a/packages/react-docs/pages/components/text/index.page.mdx b/packages/react-docs/pages/components/text/index.page.mdx
index f884ffa311..e3770ee2b0 100644
--- a/packages/react-docs/pages/components/text/index.page.mdx
+++ b/packages/react-docs/pages/components/text/index.page.mdx
@@ -40,6 +40,14 @@ You can format the `Text` component by passing `fontSize`, `lineHeight`, or othe
 
 {render('./the-as-prop')}
 
+## Commonly Asked Questions
+
+### Show bullet when using as `li` props
+
+The default value for `display` props is `block` which causes the bullet points of list items to disappear. Setting `display="list-item"` will restore their visibility.
+
+{render('./text-as-li')}
+
 ## Props
 
 ### Text
diff --git a/packages/react-docs/pages/components/text/text-as-li.js b/packages/react-docs/pages/components/text/text-as-li.js
new file mode 100644
index 0000000000..1a218061a2
--- /dev/null
+++ b/packages/react-docs/pages/components/text/text-as-li.js
@@ -0,0 +1,18 @@
+import { Text } from '@tonic-ui/react';
+import React from 'react';
+
+const App = () => (
+  <>
+    <Text as="li" display="list-item">
+      This is an example with bullet points.
+    </Text>
+    <Text as="li" display="list-item">
+      This is an example with bullet points.
+    </Text>
+    <Text as="li" display="list-item">
+      This is an example with bullet points.
+    </Text>
+  </>
+);
+
+export default App;