diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.tsx
similarity index 62%
rename from packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js
rename to packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.tsx
index b5c4aff9f4be..f6473f52caeb 100644
--- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.js
+++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder.tsx
@@ -10,12 +10,24 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
-const SkeletonPlaceholder = ({ className, ...other }) => {
+export interface SkeletonPlaceholderProps {
+  /**
+   * Add a custom class to the component to set the height and width
+   */
+  className?: string;
+}
+
+const SkeletonPlaceholder = ({
+  className,
+  ...other
+}: SkeletonPlaceholderProps) => {
   const prefix = usePrefix();
-  const skeletonPlaceholderClasses = classNames({
-    [`${prefix}--skeleton__placeholder`]: true,
-    [className]: className,
-  });
+  const skeletonPlaceholderClasses = classNames(
+    {
+      [`${prefix}--skeleton__placeholder`]: true,
+    },
+    className
+  );
 
   return <div className={skeletonPlaceholderClasses} {...other} />;
 };
diff --git a/packages/react/src/components/SkeletonPlaceholder/index.js b/packages/react/src/components/SkeletonPlaceholder/index.ts
similarity index 100%
rename from packages/react/src/components/SkeletonPlaceholder/index.js
rename to packages/react/src/components/SkeletonPlaceholder/index.ts