diff --git a/src/components/ui/Accordion/Accordion.js b/src/components/ui/Accordion/Accordion.tsx
similarity index 75%
rename from src/components/ui/Accordion/Accordion.js
rename to src/components/ui/Accordion/Accordion.tsx
index 189f22b4a..ff2656ed5 100644
--- a/src/components/ui/Accordion/Accordion.js
+++ b/src/components/ui/Accordion/Accordion.tsx
@@ -1,15 +1,18 @@
-import React, {useState} from 'react';
+import React, {useState} from 'react'
 import AccordionRoot from './shards/AccordionRoot';
 import AccordionItem from './shards/AccordionItem';
 import AccordionHeader from './shards/AccordionHeader';
 import AccordionTrigger from './shards/AccordionTrigger';
 import AccordionContent from './shards/AccordionContent';
 
-const Accordion = ({items}) => {
-    const [activeIndex, setActiveIndex] = useState(null);
+interface AccordionProps {
+    items: {content: any}[];
+}
 
-    const handleClick = (index) => {
-        setActiveIndex(activeIndex === index ? null : index);
+const Accordion = ({items} : AccordionProps) => {
+    const [activeIndex, setActiveIndex] = useState<number>(-1);
+    const handleClick = (index: number) => {
+        setActiveIndex(activeIndex === index ? -1 : index);
     };
 
     return (
diff --git a/src/components/ui/Accordion/shards/AccordionContent.tsx b/src/components/ui/Accordion/shards/AccordionContent.tsx
index 9e239c042..4afb88906 100644
--- a/src/components/ui/Accordion/shards/AccordionContent.tsx
+++ b/src/components/ui/Accordion/shards/AccordionContent.tsx
@@ -5,11 +5,11 @@ import {customClassSwitcher} from '~/core';
 type AccordionContentProps = {
   children: React.ReactNode;
   index: number,
-    activeIndex: number,
-  customRootClass:string
+  activeIndex: number,
+  customRootClass? :string
 };
 
-const AccordionContent: React.FC<AccordionContentProps> = ({children, index, activeIndex, customRootClass=''}) => {
+const AccordionContent: React.FC<AccordionContentProps> = ({children, index, activeIndex, customRootClass}: AccordionContentProps) => {
     const rootClass = customClassSwitcher(customRootClass, 'Accordion');
     return (
         <span className={`${rootClass}-content`}>
@@ -21,10 +21,8 @@ const AccordionContent: React.FC<AccordionContentProps> = ({children, index, act
             >
                 {children}
             </div>
-
         </span>
     );
 };
 
 export default AccordionContent;
-
diff --git a/src/components/ui/Accordion/shards/AccordionRoot.tsx b/src/components/ui/Accordion/shards/AccordionRoot.tsx
index 2307c6762..dc44a3e4d 100644
--- a/src/components/ui/Accordion/shards/AccordionRoot.tsx
+++ b/src/components/ui/Accordion/shards/AccordionRoot.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 // @ts-ignore
 import {customClassSwitcher} from '~/core';
 
-interface AccordionRootProps {
+export interface AccordionRootProps {
     children: React.ReactNode;
     customRootClass?: string;
 }
 
-const AccordionRoot: React.FC<AccordionRootProps> = ({children, customRootClass=''}) => {
+const AccordionRoot= ({children, customRootClass}: AccordionRootProps) => {
     const rootClass = customClassSwitcher(customRootClass, 'Accordion');
     return (
         <span className={`${rootClass}-root`}>
@@ -16,4 +16,4 @@ const AccordionRoot: React.FC<AccordionRootProps> = ({children, customRootClass=
     );
 };
 
-export default AccordionRoot;
+export default AccordionRoot;
\ No newline at end of file
diff --git a/src/components/ui/Accordion/shards/AccordionTrigger.tsx b/src/components/ui/Accordion/shards/AccordionTrigger.tsx
index 38bbbe40d..a507a84c0 100644
--- a/src/components/ui/Accordion/shards/AccordionTrigger.tsx
+++ b/src/components/ui/Accordion/shards/AccordionTrigger.tsx
@@ -4,13 +4,13 @@ import {customClassSwitcher} from '~/core';
 
 type AccordionTriggerProps = {
   children: React.ReactNode;
-  customRootClass:string,
+  customRootClass?: string,
   index: number,
-    activeIndex: number,
+  activeIndex: number,
   handleClick: (index: number) => void
 };
 
-const AccordionTrigger: React.FC<AccordionTriggerProps> = ({children, handleClick, index, activeIndex, customRootClass=''}) => {
+const AccordionTrigger: React.FC<AccordionTriggerProps> = ({children, handleClick, index, activeIndex, customRootClass}) => {
     const rootClass = customClassSwitcher(customRootClass, 'Accordion');
     return (
         <span className={`${rootClass}-trigger`}>
diff --git a/src/components/ui/Avatar/Avatar.tsx b/src/components/ui/Avatar/Avatar.tsx
index 86b64d502..10a17f244 100644
--- a/src/components/ui/Avatar/Avatar.tsx
+++ b/src/components/ui/Avatar/Avatar.tsx
@@ -6,20 +6,17 @@ import AvatarRoot from './shards/AvatarRoot';
 import AvatarImage from './shards/AvatarImage';
 import AvatarFallback from './shards/AvatarFallback';
 
-export interface AvatarProps {
-    children?: React.ReactNode;
-    customRootClass?: string;
-    fallback?: string;
-    className?: string;
-    src?: string;
-    alt?: string;
-    Root?: React.FC<AvatarRootProps>;
-    Image?: React.FC<AvatarImageProps>;
-    Fallback?: React.FC<AvatarFallbackProps>;
+interface AvatarProps {
+    children?: React.ReactNode, 
+    customRootClass?: string,
+    fallback?: string,
+    className?: string,
+    src?: string,
+    alt?: string,
+    props?: Record<string, any>[]
 }
 
-
-const Avatar: React.FC<AvatarProps> = ({children, customRootClass = '', fallback='', className = '', src='', alt, ...props}) => {
+const Avatar = ({children, customRootClass , fallback, className , src, alt, ...props}: AvatarProps) => {
     return (
         <AvatarRoot customRootClass={customRootClass}>
             <AvatarImage
diff --git a/src/components/ui/Avatar/shards/AvatarFallback.tsx b/src/components/ui/Avatar/shards/AvatarFallback.tsx
index c03579f8d..a1cdb1bd2 100644
--- a/src/components/ui/Avatar/shards/AvatarFallback.tsx
+++ b/src/components/ui/Avatar/shards/AvatarFallback.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
-// @ts-ignore
 import {customClassSwitcher} from '~/core';
 
-export type AvatarFallbackProps = {
-    fallback: string,
-    customRootClass: string,
+type AvatarFallbackProps = {
+    fallback?: string,
+    customRootClass?: string,
 };
 
-const AvatarFallback: React.FC<AvatarFallbackProps> = ({fallback='', customRootClass='', ...props}) => {
+const AvatarFallback = ({fallback, customRootClass, ...props}: AvatarFallbackProps) => {
     const rootClass = customClassSwitcher(customRootClass, 'Avatar');
     return (
         <span className={`${rootClass}-fallback`} {...props} >
diff --git a/src/components/ui/Avatar/shards/AvatarImage.tsx b/src/components/ui/Avatar/shards/AvatarImage.tsx
index d272e9a28..1a4ace8bf 100644
--- a/src/components/ui/Avatar/shards/AvatarImage.tsx
+++ b/src/components/ui/Avatar/shards/AvatarImage.tsx
@@ -1,15 +1,15 @@
 import React, {useEffect, useState} from 'react';
-// @ts-ignore
 import {customClassSwitcher} from '~/core';
 
-export type AvatarImageProps = {
-    src: string;
-    alt: string;
-    className: string;
-    customRootClass: string;
+type AvatarImageProps = {
+    src?: string;
+    alt?: string;
+    className?: string;
+    customRootClass?: string;
+    props?: Record<string, any>[]
 };
 
-const AvatarImage: React.FC<AvatarImageProps> = ({src='', alt='', customRootClass='', className='', ...props}) => {
+const AvatarImage = ({src, alt, customRootClass, className, ...props}: AvatarImageProps) => {
     const rootClass = customClassSwitcher(customRootClass, 'Avatar');
 
     const [isBrokenImage, setIsBrokenImage] = useState(false);
@@ -29,6 +29,7 @@ const AvatarImage: React.FC<AvatarImageProps> = ({src='', alt='', customRootClas
         console.log('not rendering');
         return <></>;
     }
+
     console.log(Boolean(src), src);
 
     return (
diff --git a/src/components/ui/Avatar/shards/AvatarRoot.tsx b/src/components/ui/Avatar/shards/AvatarRoot.tsx
index f36037440..08e75f8f6 100644
--- a/src/components/ui/Avatar/shards/AvatarRoot.tsx
+++ b/src/components/ui/Avatar/shards/AvatarRoot.tsx
@@ -1,13 +1,12 @@
 import React from 'react';
-// @ts-ignore
 import {customClassSwitcher} from '~/core';
 
-export type AvatarRootProps = {
+type AvatarRootProps = {
   children: React.ReactNode;
-  customRootClass:string
+  customRootClass?: string
 };
 
-const Root: React.FC<AvatarRootProps> = ({children, customRootClass=''}) => {
+const Root = ({children, customRootClass}: AvatarRootProps) => {
     const rootClass = customClassSwitcher(customRootClass, 'Avatar');
     return (
         <span className={`${rootClass}-root`}>
diff --git a/src/components/ui/Badge/Badge.js b/src/components/ui/Badge/Badge.js
deleted file mode 100644
index ac1a183d3..000000000
--- a/src/components/ui/Badge/Badge.js
+++ /dev/null
@@ -1,20 +0,0 @@
-'use client';
-import React from 'react';
-import {customClassSwitcher} from '~/core';
-
-const COMPONENT_NAME = 'Badge';
-const Badge = ({children, customRootClass = '', className = '', color=undefined, ...props}) => {
-    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
-
-    if (color) {
-        props['data-accent-color'] = color;
-    }
-
-    return <span className={`${rootClass} ${className}`} {...props}>
-        {children}
-    </span>;
-};
-
-Badge.displayName = COMPONENT_NAME;
-
-export default Badge;
diff --git a/src/components/ui/Badge/Badge.tsx b/src/components/ui/Badge/Badge.tsx
new file mode 100644
index 000000000..6dcf31880
--- /dev/null
+++ b/src/components/ui/Badge/Badge.tsx
@@ -0,0 +1,26 @@
+'use client';
+import React from 'react';
+import {customClassSwitcher} from '~/core'
+
+const COMPONENT_NAME = 'Badge';
+
+interface BadgeProps {
+    children?: React.ReactNode,
+    customRootClass?: string,
+    className?: string,
+    color?: string,
+    props?: Record<string, any>[],
+}
+
+
+const Badge = ({children, customRootClass, className, color, ...props}: BadgeProps) => {
+    const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME)   
+
+    return <span className={`${rootClass} ${className}`} data-accent-color={color ?? undefined} {...props}>
+        {children}
+    </span>;
+};
+
+Badge.displayName = COMPONENT_NAME;
+
+export default Badge;
diff --git a/src/components/ui/BlockQuote/BlockQuote.js b/src/components/ui/BlockQuote/BlockQuote.tsx
similarity index 60%
rename from src/components/ui/BlockQuote/BlockQuote.js
rename to src/components/ui/BlockQuote/BlockQuote.tsx
index 0b751f0f4..f3c849291 100644
--- a/src/components/ui/BlockQuote/BlockQuote.js
+++ b/src/components/ui/BlockQuote/BlockQuote.tsx
@@ -4,7 +4,14 @@ import React from 'react';
 import {customClassSwitcher} from '~/core';
 
 const COMPONENT_NAME = 'BlockQuote';
-const BlockQuote = ({children, customRootClass = '', className = '', ...props}) => {
+
+interface BlockQuoteProps {
+    children: React.ReactNode;
+    customRootClass?: string;
+    className?: string;
+    props: Record<string, any>[]
+}
+const BlockQuote = ({children, customRootClass, className, ...props}: BlockQuoteProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
 
     return <blockquote className={`${rootClass} ${className}`} {...props}>{children}</blockquote>;
diff --git a/src/components/ui/Button/Button.js b/src/components/ui/Button/Button.js
deleted file mode 100644
index 92411509f..000000000
--- a/src/components/ui/Button/Button.js
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client';
-import React from 'react';
-// make the color prop default accent color
-const Button = ({children, type='button', color=undefined, className='', variant='solid', ...props}) => {
-    // apply data attribute for accent color
-    // apply attribute only if color is present
-    if (color) {
-        props['data-accent-color'] = color;
-    }
-
-    return (
-        <button
-            type="button"
-            className={`rad-ui-button button-${variant} ${className}`}
-            {...props}
-        >
-            {children}
-        </button>
-    );
-};
-
-export default Button;
diff --git a/src/components/ui/Button/Button.tsx b/src/components/ui/Button/Button.tsx
new file mode 100644
index 000000000..2d8104270
--- /dev/null
+++ b/src/components/ui/Button/Button.tsx
@@ -0,0 +1,31 @@
+'use client';
+import React, { RefObject, useRef } from 'react';
+// make the color prop default accent color
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    color?: string;
+    className?: string;
+    variant: 'solid' | "outline" | "soft" | "ghost";
+    props?: Record<any, any>[]
+    buttonRef: RefObject<HTMLButtonElement>
+}
+
+const Button = ({children, type='button', color = "", className='', variant='solid', buttonRef, ...props }: ButtonProps) => {
+    const refButton = useRef<HTMLButtonElement>()
+    // apply data attribute for accent color
+    // apply attribute only if color is present
+
+    return (
+        <button
+            type="button"
+            ref={buttonRef}
+            className={`rad-ui-button button-${variant} ${className}`} data-accent-color={color ?? undefined}
+            {...props}
+        >
+            {children}
+        </button>
+    );
+};
+
+export default Button;