diff --git a/playbook/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx b/playbook/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
index 1ca601f0f3..3e1e9b5291 100644
--- a/playbook/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
+++ b/playbook/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
@@ -29,6 +29,7 @@ import { noop, buildDataProps } from '../utilities/props'
 
 type TypeaheadProps = {
   async?: boolean,
+  className?: string,
   components?: object,
   createable?: boolean,
   dark?: boolean,
@@ -49,6 +50,7 @@ type TypeaheadProps = {
 
 const Typeahead = ({
   async,
+  className,
   components = {},
   createable,
   error = "",
@@ -111,8 +113,12 @@ const Typeahead = ({
   }
 
   const dataProps = buildDataProps(data)
+  const classes = classnames(
+    'pb_typeahead_kit react-select',
+    globalProps(props),
+    className
+  )
 
-  const classes = `pb_typeahead_kit react-select ${globalProps(props)}`
   const inlineClass = selectProps.inline ? 'inline' : null
 
   return (
diff --git a/playbook/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx b/playbook/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx
index fe70d510fb..80a4574d5e 100644
--- a/playbook/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx
+++ b/playbook/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx
@@ -93,3 +93,18 @@ test('typeahead multi select with badges and small pills', () => {
   expect(badge).toBeInTheDocument()
 })
 
+test('should pass className prop', () => {
+  const className = 'custom-class-name'
+  render(
+    <Typeahead
+        className={className}
+        data={{ testid: 'typeahead-test' }}
+        defaultValue={[options[0]]}
+        label="Colors"
+        options={options}
+    />
+  )
+
+  const kit = screen.getByTestId('typeahead-test')
+  expect(kit).toHaveClass(className)
+})
\ No newline at end of file