diff --git a/apps/docs/content/components/Testimoinial/index.mdx b/apps/docs/content/components/Testimoinial/index.mdx
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/docs/content/components/Testimoinial/react.mdx b/apps/docs/content/components/Testimoinial/react.mdx
new file mode 100644
index 000000000..625329a45
--- /dev/null
+++ b/apps/docs/content/components/Testimoinial/react.mdx
@@ -0,0 +1,209 @@
+---
+title: Testimonial
+figma: 'https://www.figma.com/file/BJ95AjraesmRCWsKA013GS/Primer-Brand?node-id=1852%3A27522'
+source: https://github.com/primer/brand/blob/main/packages/react/src/Testimonial/Testimonial.tsx
+storybook: '/brand/storybook/?path=/story/components-testimonial'
+description: Use the testimonial component to display a quote from a customer or user.
+---
+
+import ComponentLayout from '../../../src/layouts/component-layout'
+export default ComponentLayout
+
+import {
+ TestimonialQuoteMarkColors,
+ TestimonialVariants,
+ defaultTestimonialVariant,
+} from '@primer/react-brand'
+import {Box as Container, Label} from '@primer/react'
+import {PropTableValues} from '../../../src/components'
+
+```js
+import {Testimonial} from '@primer/react-brand'
+```
+
+## Examples
+
+### Default
+
+```jsx live
+
+
+ GitHub helps us ensure that we have our security controls baked into our
+ pipelines all the way from the first line of code we're writing.
+
+
+ David Ross
+
+
+
+```
+
+### Variants
+
+For an alternative visual appearance and layout, without altering semantic meaning.
+
+```jsx live
+
+
+
+ GitHub helps us ensure that we have our security controls baked into our
+ pipelines all the way from the first line of code we're writing.
+
+
+ David Ross
+
+
+
+
+
+ GitHub helps us ensure that we have our security controls baked into our
+ pipelines all the way from the first line of code we're writing.
+
+
+ David Ross
+
+
+
+
+```
+
+### Logo
+
+A logo (or similar) visual can be provided as an alternative to avatars.
+
+```jsx live
+
+
+ GitHub helps us ensure that we have our security controls baked into our
+ pipelines all the way from the first line of code we're writing.
+
+ David Ross
+
+
+
+
+```
+
+### Size
+
+Use `size` to alternate the text size. Available options are `small` (default) and `large`.
+
+```jsx live
+
+
+ GitHub helps us ensure that we have our security controls baked into our
+ pipelines all the way from the first line of code we're writing.
+
+
+ David Ross
+
+
+```
+
+### Layout
+
+`Testimonial` will expand to fill the width of its parent by default.
+
+Use `Stack` to help position multiple, adjacent Testimonials alongside one another.
+
+```jsx live
+
+
+
+ GitHub helps us ensure that we have our security controls baked into our
+ pipelines all the way from the first line of code we're writing.
+
+ David Ross
+
+
+
+ GitHub helps us ensure that we have our security controls baked into our
+ pipelines all the way from the first line of code we're writing.
+
+ David Ross
+
+
+```
+
+### Position
+
+Pass additional content about the testimonial provider using `position`.
+
+```jsx live
+
+
+ GitHub helps us ensure that we have our security controls baked into our
+ pipelines all the way from the first line of code we're writing.
+
+
+ David Ross
+
+
+```
+
+## Component props
+
+### Testimonial
+
+`Testimonial` passes contextual data to its child inputs, labels, validation messaging and more.
+
+| Name | Type | Default | Description |
+| :--------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------- | :---------: | :-------------------------------------------- |
+| `children` | | | Valid child nodes |
+| `className` | `string` | | Sets a custom class |
+| `id` | `string` | | Sets a custom id |
+| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |
+| `size` | | `'small'` | Set size of quote's text |
+| `quoteMarkColor` | | `'default'` | Color or gradient fill of the the quote mark. |
+| `variant` | | `'minimal'` | Alternative visual appearance |
+
+
+ Testimonial.Name
+
+
+`Testimonial.Name` indicates the name of the person (or organisation) that provided the testimonial.
+
+| Name | Type | Default | Description |
+| :---------- | :---------------- | :-----: | :------------------------------------------------------------------ |
+| `children` | `string` | | Label text |
+| `className` | `string` | | Applies a custom class |
+| `id` | `string` | | Sets a custom id |
+| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |
+| `position` | `string` | | Optional. Applies additional content adjancent to the primary text. |
+
+
Testimonial.Avatar
+
+`Testimonial.Avatar` represent users or organizations.
+
+| Name | Type | Default | Description |
+| :---------- | :---------------- | :-----: | :----------------------------------------------------------------- |
+| `children` | `string` | | Label text |
+| `className` | `string` | | Applies a custom class |
+| `id` | `string` | | Sets a custom id |
+| `ref` | `React.RefObject` | | Forward a Ref to the underlying DOM node |
+| `src` | `string` | | Required. A url to the user or organisations GitHub profile avatar |
+| `alt` | `string` | | Required. Applied as alt text to the avatar. |
+
+
Testimonial.Logo
+
+`Testimonial.Logo` passes a visual that represents the users or organizations.
+
+| Name | Type | Default | Description |
+| :---------- | :---------------------------------------------------------------------------- | :-----: | :----------------------------------------------------- |
+| `children` | | | Accepts `` and `
+