diff --git a/sample-app/package-lock.json b/sample-app/package-lock.json
index 8fe1a713..55eaac95 100644
--- a/sample-app/package-lock.json
+++ b/sample-app/package-lock.json
@@ -105,6 +105,7 @@
         "@types/jest": "^27.0.2",
         "@typescript-eslint/eslint-plugin": "^4.28.5",
         "@typescript-eslint/parser": "^4.28.5",
+        "@yext/eslint-plugin-export-star": "^1.0.0",
         "eslint": "^7.32.0",
         "eslint-config-react-app": "^6.0.0",
         "eslint-plugin-flowtype": "^5.8.2",
@@ -25091,6 +25092,7 @@
         "@typescript-eslint/eslint-plugin": "^4.28.5",
         "@typescript-eslint/parser": "^4.28.5",
         "@yext/answers-headless": "^0.1.0-beta.4",
+        "@yext/eslint-plugin-export-star": "^1.0.0",
         "eslint": "^7.32.0",
         "eslint-config-react-app": "^6.0.0",
         "eslint-plugin-flowtype": "^5.8.2",
diff --git a/sample-app/src/components/DirectAnswer.tsx b/sample-app/src/components/DirectAnswer.tsx
new file mode 100644
index 00000000..be9fd6aa
--- /dev/null
+++ b/sample-app/src/components/DirectAnswer.tsx
@@ -0,0 +1,53 @@
+import { useAnswersState } from "@yext/answers-headless-react";
+import { DirectAnswerType } from '@yext/answers-headless';
+import renderWithHighlighting from './utils/renderWithHighlighting';
+import classNames from "classnames";
+import '../sass/DirectAnswer.scss';
+
+interface DirectAnswerProps {
+  cssClasses?: {
+    container?: string,
+    containerLoading?: string,
+    title?: string,
+    content?: string,
+    description?: string
+  }
+}
+
+const defaultCSSClasses = {
+  container: 'DirectAnswer',
+  containerLoading: 'DirectAnswer--loading',
+  title: 'DirectAnswer__title',
+  content: 'DirectAnswer__content',
+  description: 'DirectAnswer__contentDescription'
+};
+
+export default function DirectAnswer(props: DirectAnswerProps): JSX.Element | null {
+  const directAnswerResult = useAnswersState(state => state.directAnswer.result);
+  const isLoading = useAnswersState(state => state.searchStatus.isLoading);
+  if (!directAnswerResult) {
+    return null;
+  }
+  const { cssClasses: customCssClasses } = props;
+  const cssClasses = Object.assign(defaultCSSClasses, customCssClasses);
+  const containerCssClasses = classNames(cssClasses.container, { [cssClasses.containerLoading]: isLoading });
+
+  return (
+    <div className={containerCssClasses}>
+      <div className={cssClasses.title}>
+        {directAnswerResult.type === DirectAnswerType.FeaturedSnippet
+          ? directAnswerResult.value
+          : `${directAnswerResult.entityName} / ${directAnswerResult.fieldName}`}
+      </div>
+      <div className={cssClasses.content}>
+        <div className={cssClasses.description}>
+          {directAnswerResult.type === DirectAnswerType.FeaturedSnippet 
+            ? renderWithHighlighting(directAnswerResult.snippet)
+            : directAnswerResult.value}
+        </div>
+        {directAnswerResult.relatedResult.link 
+          && <a href={directAnswerResult.relatedResult.link}>View More</a>}
+      </div>
+    </div>
+  )
+}
diff --git a/sample-app/src/pages/UniversalSearchPage.tsx b/sample-app/src/pages/UniversalSearchPage.tsx
index 977725a3..6444dae5 100644
--- a/sample-app/src/pages/UniversalSearchPage.tsx
+++ b/sample-app/src/pages/UniversalSearchPage.tsx
@@ -1,4 +1,5 @@
 import UniversalResults from '../components/UniversalResults';
+import DirectAnswer from '../components/DirectAnswer';
 import { useLayoutEffect } from 'react';
 import { useAnswersActions } from '@yext/answers-headless-react';
 import { SearchIntent } from '@yext/answers-headless';
@@ -36,6 +37,7 @@ export default function UniversalSearchPage(props: { universalResultsConfig: Uni
 
   return (
     <div className='UniversalSearchPage'>
+      <DirectAnswer />
       <UniversalResults
         appliedFiltersConfig={universalResultsFilterConfig}
         verticalConfigs={universalResultsConfig}
diff --git a/sample-app/src/pages/VerticalSearchPage.tsx b/sample-app/src/pages/VerticalSearchPage.tsx
index a1108d84..15737961 100644
--- a/sample-app/src/pages/VerticalSearchPage.tsx
+++ b/sample-app/src/pages/VerticalSearchPage.tsx
@@ -1,6 +1,7 @@
 import ResultsCount from '../components/ResultsCount';
 import AlternativeVerticals from '../components/AlternativeVerticals';
 import DecoratedAppliedFilters from '../components/DecoratedAppliedFilters';
+import DirectAnswer from '../components/DirectAnswer';
 import StaticFilters from '../components/StaticFilters';
 import VerticalResults from '../components/VerticalResults';
 import SpellCheck from '../components/SpellCheck';
@@ -108,6 +109,7 @@ export default function VerticalSearchPage(props: {
         />
       </div>
       <div className='end'>
+        <DirectAnswer />
         <ResultsCount />
         <DecoratedAppliedFilters
           showFieldNames={true}
diff --git a/sample-app/src/sass/DirectAnswer.scss b/sample-app/src/sass/DirectAnswer.scss
new file mode 100644
index 00000000..5e2294fa
--- /dev/null
+++ b/sample-app/src/sass/DirectAnswer.scss
@@ -0,0 +1,9 @@
+.DirectAnswer {
+
+  border: 1px solid #dcdcdc;
+  padding: 10px;
+
+  &--loading {
+    opacity: 0.5;
+  }
+}
\ No newline at end of file