diff --git a/packages/raystack/components/copy-button/copy-button.tsx b/packages/raystack/components/copy-button/copy-button.tsx
index d080405a9..94ddfbf51 100644
--- a/packages/raystack/components/copy-button/copy-button.tsx
+++ b/packages/raystack/components/copy-button/copy-button.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { CopyIcon } from '@radix-ui/react-icons';
-import { ElementRef, forwardRef, useState } from 'react';
+import { useState } from 'react';
 import { useCopyToClipboard } from '~/hooks/useCopyToClipboard';
 import { CheckCircleFilledIcon } from '~/icons';
 import { IconButton, IconButtonProps } from '../icon-button/icon-button';
@@ -12,10 +12,12 @@ export interface CopyButtonProps extends IconButtonProps {
   resetIcon?: boolean;
 }
 
-export const CopyButton = forwardRef<
-  ElementRef<typeof IconButton>,
-  CopyButtonProps
->(({ text, resetTimeout = 1000, resetIcon = true, ...props }, ref) => {
+export function CopyButton({
+  text,
+  resetTimeout = 1000,
+  resetIcon = true,
+  ...props
+}: CopyButtonProps) {
   const { copy } = useCopyToClipboard();
   const [isCopied, setIsCopied] = useState(false);
 
@@ -32,12 +34,7 @@ export const CopyButton = forwardRef<
   }
 
   return (
-    <IconButton
-      ref={ref}
-      {...props}
-      onClick={onCopy}
-      data-test-id='copy-button'
-    >
+    <IconButton {...props} onClick={onCopy} data-test-id='copy-button'>
       {isCopied ? (
         <CheckCircleFilledIcon color='var(--rs-color-foreground-success-primary)' />
       ) : (
@@ -45,6 +42,6 @@ export const CopyButton = forwardRef<
       )}
     </IconButton>
   );
-});
+}
 
 CopyButton.displayName = 'CopyButton';
diff --git a/packages/raystack/components/data-table/components/content.tsx b/packages/raystack/components/data-table/components/content.tsx
index 9f035a7df..08020f679 100644
--- a/packages/raystack/components/data-table/components/content.tsx
+++ b/packages/raystack/components/data-table/components/content.tsx
@@ -286,3 +286,5 @@ export function Content({
     </div>
   );
 }
+
+Content.displayName = 'DataTable.Content';
diff --git a/packages/raystack/components/data-table/components/display-settings.tsx b/packages/raystack/components/data-table/components/display-settings.tsx
index a25f1bcc7..40c19827d 100644
--- a/packages/raystack/components/data-table/components/display-settings.tsx
+++ b/packages/raystack/components/data-table/components/display-settings.tsx
@@ -9,8 +9,8 @@ import { Popover } from '../../popover';
 import styles from '../data-table.module.css';
 import {
   DataTableColumn,
-  SortOrdersValues,
-  defaultGroupOption
+  defaultGroupOption,
+  SortOrdersValues
 } from '../data-table.types';
 import { useDataTable } from '../hooks/useDataTable';
 import { DisplayProperties } from './display-properties';
@@ -124,3 +124,5 @@ export function DisplaySettings<TData, TValue>({
     </Popover>
   );
 }
+
+DisplaySettings.displayName = 'DataTable.DisplayControls';
diff --git a/packages/raystack/components/data-table/components/filters.tsx b/packages/raystack/components/data-table/components/filters.tsx
index d5c685dfa..17957f49d 100644
--- a/packages/raystack/components/data-table/components/filters.tsx
+++ b/packages/raystack/components/data-table/components/filters.tsx
@@ -166,3 +166,5 @@ export function Filters<TData, TValue>({
     </Flex>
   );
 }
+
+Filters.displayName = 'DataTable.Filters';
diff --git a/packages/raystack/components/data-table/components/search.tsx b/packages/raystack/components/data-table/components/search.tsx
index 371bde378..a7b909d5d 100644
--- a/packages/raystack/components/data-table/components/search.tsx
+++ b/packages/raystack/components/data-table/components/search.tsx
@@ -1,11 +1,10 @@
 'use client';
 
-import { forwardRef } from 'react';
+import { ChangeEvent, type ComponentProps } from 'react';
 import { Search } from '../../search';
-import { SearchProps } from '../../search/search';
 import { useDataTable } from '../hooks/useDataTable';
 
-export interface DataTableSearchProps extends SearchProps {
+export interface DataTableSearchProps extends ComponentProps<typeof Search> {
   /**
    * Automatically disable search in zero state (when no data and no filters/search applied).
    * @defaultValue true
@@ -13,52 +12,53 @@ export interface DataTableSearchProps extends SearchProps {
   autoDisableInZeroState?: boolean;
 }
 
-export const TableSearch = forwardRef<HTMLInputElement, DataTableSearchProps>(
-  ({ autoDisableInZeroState = true, disabled, ...props }, ref) => {
-    const {
-      updateTableQuery,
-      tableQuery,
-      shouldShowFilters = false
-    } = useDataTable();
+export function TableSearch({
+  autoDisableInZeroState = true,
+  disabled,
+  ...props
+}: DataTableSearchProps) {
+  const {
+    updateTableQuery,
+    tableQuery,
+    shouldShowFilters = false
+  } = useDataTable();
 
-    const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value;
-      updateTableQuery(query => {
-        return {
-          ...query,
-          search: value
-        };
-      });
-    };
+  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    updateTableQuery(query => {
+      return {
+        ...query,
+        search: value
+      };
+    });
+  };
 
-    const handleClear = () => {
-      updateTableQuery(query => {
-        return {
-          ...query,
-          search: ''
-        };
-      });
-    };
+  const handleClear = () => {
+    updateTableQuery(query => {
+      return {
+        ...query,
+        search: ''
+      };
+    });
+  };
 
-    // Auto-disable in zero state if enabled, but allow manual override
-    // Once search is applied, keep it enabled (even if shouldShowFilters is false)
-    const hasSearch = Boolean(
-      tableQuery?.search && tableQuery.search.trim() !== ''
-    );
-    const isDisabled =
-      disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);
+  // Auto-disable in zero state if enabled, but allow manual override
+  // Once search is applied, keep it enabled (even if shouldShowFilters is false)
+  const hasSearch = Boolean(
+    tableQuery?.search && tableQuery.search.trim() !== ''
+  );
+  const isDisabled =
+    disabled ?? (autoDisableInZeroState && !shouldShowFilters && !hasSearch);
 
-    return (
-      <Search
-        {...props}
-        ref={ref}
-        onChange={handleSearch}
-        value={tableQuery?.search}
-        onClear={handleClear}
-        disabled={isDisabled}
-      />
-    );
-  }
-);
+  return (
+    <Search
+      {...props}
+      onChange={handleSearch}
+      value={tableQuery?.search}
+      onClear={handleClear}
+      disabled={isDisabled}
+    />
+  );
+}
 
-TableSearch.displayName = 'TableSearch';
+TableSearch.displayName = 'DataTable.Search';
diff --git a/packages/raystack/components/data-table/components/toolbar.tsx b/packages/raystack/components/data-table/components/toolbar.tsx
index 75d13011a..9669219f0 100644
--- a/packages/raystack/components/data-table/components/toolbar.tsx
+++ b/packages/raystack/components/data-table/components/toolbar.tsx
@@ -25,3 +25,5 @@ export function Toolbar<TData, TValue>({ className }: { className?: string }) {
     </Flex>
   );
 }
+
+Toolbar.displayName = 'DataTable.Toolbar';
diff --git a/packages/raystack/components/data-table/components/virtualized-content.tsx b/packages/raystack/components/data-table/components/virtualized-content.tsx
index 8321c7196..d6f3b5a9b 100644
--- a/packages/raystack/components/data-table/components/virtualized-content.tsx
+++ b/packages/raystack/components/data-table/components/virtualized-content.tsx
@@ -377,3 +377,5 @@ export function VirtualizedContent({
     </div>
   );
 }
+
+VirtualizedContent.displayName = 'DataTable.VirtualizedContent';
diff --git a/packages/raystack/components/data-table/data-table.tsx b/packages/raystack/components/data-table/data-table.tsx
index 9588d59a2..2e7c5516b 100644
--- a/packages/raystack/components/data-table/data-table.tsx
+++ b/packages/raystack/components/data-table/data-table.tsx
@@ -215,13 +215,11 @@ function DataTableRoot<TData, TValue>({
     stickyGroupHeader
   ]);
 
-  return (
-    <TableContext.Provider value={contextValue}>
-      {children}
-    </TableContext.Provider>
-  );
+  return <TableContext value={contextValue}>{children}</TableContext>;
 }
 
+DataTableRoot.displayName = 'DataTable';
+
 export const DataTable = Object.assign(DataTableRoot, {
   Content: Content,
   VirtualizedContent: VirtualizedContent,
diff --git a/packages/raystack/components/dialog/dialog-content.tsx b/packages/raystack/components/dialog/dialog-content.tsx
index 98c75eae2..4d9ea7c2a 100644
--- a/packages/raystack/components/dialog/dialog-content.tsx
+++ b/packages/raystack/components/dialog/dialog-content.tsx
@@ -2,7 +2,6 @@
 
 import { Dialog as DialogPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import styles from './dialog.module.css';
 import { CloseButton } from './dialog-misc';
 
@@ -17,51 +16,42 @@ export interface DialogContentProps extends DialogPrimitive.Popup.Props {
   showNestedAnimation?: boolean;
 }
 
-export const DialogContent = forwardRef<
-  ElementRef<typeof DialogPrimitive.Popup>,
-  DialogContentProps
->(
-  (
-    {
-      className,
-      children,
-      showCloseButton = true,
-      overlay,
-      width,
-      style,
-      showNestedAnimation = true,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <DialogPrimitive.Portal>
-        <DialogPrimitive.Backdrop
-          {...overlay}
+export function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  overlay,
+  width,
+  style,
+  showNestedAnimation = true,
+  ...props
+}: DialogContentProps) {
+  return (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Backdrop
+        {...overlay}
+        className={cx(
+          styles.dialogOverlay,
+          overlay?.blur && styles.overlayBlur,
+          overlay?.className
+        )}
+      />
+      <DialogPrimitive.Viewport className={styles.viewport}>
+        <DialogPrimitive.Popup
           className={cx(
-            styles.dialogOverlay,
-            overlay?.blur && styles.overlayBlur,
-            overlay?.className
+            styles.dialogContent,
+            showNestedAnimation && styles.showNestedAnimation,
+            className
           )}
-        />
-        <DialogPrimitive.Viewport className={styles.viewport}>
-          <DialogPrimitive.Popup
-            ref={ref}
-            className={cx(
-              styles.dialogContent,
-              showNestedAnimation && styles.showNestedAnimation,
-              className
-            )}
-            style={{ width, ...style }}
-            {...props}
-          >
-            {children}
-            {showCloseButton && <CloseButton className={styles.closeButton} />}
-          </DialogPrimitive.Popup>
-        </DialogPrimitive.Viewport>
-      </DialogPrimitive.Portal>
-    );
-  }
-);
+          style={{ width, ...style }}
+          {...props}
+        >
+          {children}
+          {showCloseButton && <CloseButton className={styles.closeButton} />}
+        </DialogPrimitive.Popup>
+      </DialogPrimitive.Viewport>
+    </DialogPrimitive.Portal>
+  );
+}
 
 DialogContent.displayName = 'Dialog.Content';
diff --git a/packages/raystack/components/dialog/dialog-misc.tsx b/packages/raystack/components/dialog/dialog-misc.tsx
index fd07ce9b7..218948816 100644
--- a/packages/raystack/components/dialog/dialog-misc.tsx
+++ b/packages/raystack/components/dialog/dialog-misc.tsx
@@ -3,62 +3,64 @@
 import { Dialog as DialogPrimitive } from '@base-ui/react';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { cx } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react';
+import { type ComponentProps } from 'react';
 import { Flex } from '../flex';
 import styles from './dialog.module.css';
 
-export const DialogHeader = forwardRef<
-  ElementRef<typeof Flex>,
-  ComponentPropsWithoutRef<typeof Flex>
->(({ className, ...props }, ref) => (
-  <Flex
-    justify='between'
-    align='center'
-    className={cx(styles.header, className)}
-    ref={ref}
-    {...props}
-  />
-));
+export function DialogHeader({
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      justify='between'
+      align='center'
+      className={cx(styles.header, className)}
+      {...props}
+    />
+  );
+}
 
 DialogHeader.displayName = 'Dialog.Header';
 
-export const DialogFooter = forwardRef<
-  ElementRef<typeof Flex>,
-  ComponentPropsWithoutRef<typeof Flex>
->(({ className, ...props }, ref) => (
-  <Flex
-    gap={5}
-    justify='end'
-    className={cx(styles.footer, className)}
-    ref={ref}
-    {...props}
-  />
-));
+export function DialogFooter({
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      gap={5}
+      justify='end'
+      className={cx(styles.footer, className)}
+      {...props}
+    />
+  );
+}
 
 DialogFooter.displayName = 'Dialog.Footer';
 
-export const DialogBody = forwardRef<
-  ElementRef<typeof Flex>,
-  ComponentPropsWithoutRef<typeof Flex>
->(({ className, ...props }, ref) => (
-  <Flex
-    direction='column'
-    gap={3}
-    className={cx(styles.body, className)}
-    ref={ref}
-    {...props}
-  />
-));
+export function DialogBody({
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      direction='column'
+      gap={3}
+      className={cx(styles.body, className)}
+      {...props}
+    />
+  );
+}
 
 DialogBody.displayName = 'Dialog.Body';
 
-export const CloseButton = forwardRef<
-  ElementRef<typeof DialogPrimitive.Close>,
-  DialogPrimitive.Close.Props
->(({ className, ...props }, ref) => {
+export function CloseButton({
+  className,
+  ...props
+}: DialogPrimitive.Close.Props) {
   return (
     <DialogPrimitive.Close
-      ref={ref}
       className={cx(styles.close, className)}
       aria-label='Close dialog'
       {...props}
@@ -66,36 +68,31 @@ export const CloseButton = forwardRef<
       <Cross1Icon aria-hidden='true' />
     </DialogPrimitive.Close>
   );
-});
+}
 
 CloseButton.displayName = 'Dialog.CloseButton';
 
-export const DialogTitle = forwardRef<
-  ElementRef<typeof DialogPrimitive.Title>,
-  DialogPrimitive.Title.Props
->(({ className, ...props }, ref) => {
+export function DialogTitle({
+  className,
+  ...props
+}: DialogPrimitive.Title.Props) {
   return (
-    <DialogPrimitive.Title
-      ref={ref}
-      className={cx(styles.title, className)}
-      {...props}
-    />
+    <DialogPrimitive.Title className={cx(styles.title, className)} {...props} />
   );
-});
+}
 
 DialogTitle.displayName = 'Dialog.Title';
 
-export const DialogDescription = forwardRef<
-  ElementRef<typeof DialogPrimitive.Description>,
-  DialogPrimitive.Description.Props
->(({ className, ...props }, ref) => {
+export function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
   return (
     <DialogPrimitive.Description
-      ref={ref}
       className={cx(styles.description, className)}
       {...props}
     />
   );
-});
+}
 
 DialogDescription.displayName = 'Dialog.Description';
diff --git a/packages/raystack/components/drawer/drawer-content.tsx b/packages/raystack/components/drawer/drawer-content.tsx
index c316097ae..4d9676def 100644
--- a/packages/raystack/components/drawer/drawer-content.tsx
+++ b/packages/raystack/components/drawer/drawer-content.tsx
@@ -3,11 +3,9 @@
 import { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { cva, cx, type VariantProps } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
+import { ReactNode } from 'react';
 import styles from './drawer.module.css';
 
-type Side = 'top' | 'right' | 'bottom' | 'left';
-
 const drawerPopup = cva(styles.drawerPopup, {
   variants: {
     side: {
@@ -27,52 +25,43 @@ export interface DrawerContentProps
     VariantProps<typeof drawerPopup> {
   showCloseButton?: boolean;
   overlayProps?: DrawerPrimitive.Backdrop.Props;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
-export const DrawerContent = forwardRef<
-  ElementRef<typeof DrawerPrimitive.Popup>,
-  DrawerContentProps
->(
-  (
-    {
-      className,
-      children,
-      side = 'right',
-      showCloseButton = true,
-      overlayProps,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <DrawerPrimitive.Portal>
-        <DrawerPrimitive.Backdrop
-          {...overlayProps}
-          className={cx(styles.backdrop, overlayProps?.className)}
-        />
-        <DrawerPrimitive.Viewport className={styles.viewport}>
-          <DrawerPrimitive.Popup
-            ref={ref}
-            className={drawerPopup({ side, className })}
-            aria-label='Drawer'
-            {...props}
-          >
-            <DrawerPrimitive.Content className={styles.content}>
-              {children}
-              {showCloseButton && (
-                <DrawerPrimitive.Close
-                  className={styles.close}
-                  aria-label='Close Drawer'
-                >
-                  <Cross1Icon aria-hidden='true' />
-                </DrawerPrimitive.Close>
-              )}
-            </DrawerPrimitive.Content>
-          </DrawerPrimitive.Popup>
-        </DrawerPrimitive.Viewport>
-      </DrawerPrimitive.Portal>
-    );
-  }
-);
+export function DrawerContent({
+  className,
+  children,
+  side = 'right',
+  showCloseButton = true,
+  overlayProps,
+  ...props
+}: DrawerContentProps) {
+  return (
+    <DrawerPrimitive.Portal>
+      <DrawerPrimitive.Backdrop
+        {...overlayProps}
+        className={cx(styles.backdrop, overlayProps?.className)}
+      />
+      <DrawerPrimitive.Viewport className={styles.viewport}>
+        <DrawerPrimitive.Popup
+          className={drawerPopup({ side, className })}
+          aria-label='Drawer'
+          {...props}
+        >
+          <DrawerPrimitive.Content className={styles.content}>
+            {children}
+            {showCloseButton && (
+              <DrawerPrimitive.Close
+                className={styles.close}
+                aria-label='Close Drawer'
+              >
+                <Cross1Icon aria-hidden='true' />
+              </DrawerPrimitive.Close>
+            )}
+          </DrawerPrimitive.Content>
+        </DrawerPrimitive.Popup>
+      </DrawerPrimitive.Viewport>
+    </DrawerPrimitive.Portal>
+  );
+}
 DrawerContent.displayName = 'Drawer.Content';
diff --git a/packages/raystack/components/drawer/drawer-misc.tsx b/packages/raystack/components/drawer/drawer-misc.tsx
index 785c4c5ec..3cd74a509 100644
--- a/packages/raystack/components/drawer/drawer-misc.tsx
+++ b/packages/raystack/components/drawer/drawer-misc.tsx
@@ -2,12 +2,7 @@
 
 import { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';
 import { cx } from 'class-variance-authority';
-import {
-  type ElementRef,
-  forwardRef,
-  type HTMLAttributes,
-  type ReactNode
-} from 'react';
+import { ComponentProps, type ReactNode } from 'react';
 import styles from './drawer.module.css';
 
 export const DrawerHeader = ({
@@ -19,42 +14,35 @@ export const DrawerHeader = ({
 }) => <div className={cx(styles.header, className)}>{children}</div>;
 DrawerHeader.displayName = 'Drawer.Header';
 
-export const DrawerTitle = forwardRef<
-  ElementRef<typeof DrawerPrimitive.Title>,
-  DrawerPrimitive.Title.Props
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cx(styles.title, className)}
-    {...props}
-  />
-));
+export function DrawerTitle({
+  className,
+  ...props
+}: DrawerPrimitive.Title.Props) {
+  return (
+    <DrawerPrimitive.Title className={cx(styles.title, className)} {...props} />
+  );
+}
 DrawerTitle.displayName = 'Drawer.Title';
 
-export const DrawerDescription = forwardRef<
-  ElementRef<typeof DrawerPrimitive.Description>,
-  DrawerPrimitive.Description.Props
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cx(styles.description, className)}
-    {...props}
-  />
-));
+export function DrawerDescription({
+  className,
+  ...props
+}: DrawerPrimitive.Description.Props) {
+  return (
+    <DrawerPrimitive.Description
+      className={cx(styles.description, className)}
+      {...props}
+    />
+  );
+}
 DrawerDescription.displayName = 'Drawer.Description';
 
-export const DrawerBody = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cx(styles.body, className)} {...props} />
-));
+export function DrawerBody({ className, ...props }: ComponentProps<'div'>) {
+  return <div className={cx(styles.body, className)} {...props} />;
+}
 DrawerBody.displayName = 'Drawer.Body';
 
-export const DrawerFooter = forwardRef<
-  HTMLDivElement,
-  HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cx(styles.footer, className)} {...props} />
-));
+export function DrawerFooter({ className, ...props }: ComponentProps<'div'>) {
+  return <div className={cx(styles.footer, className)} {...props} />;
+}
 DrawerFooter.displayName = 'Drawer.Footer';
diff --git a/packages/raystack/components/drawer/drawer-root.tsx b/packages/raystack/components/drawer/drawer-root.tsx
index c841fa8ca..e30bb4f07 100644
--- a/packages/raystack/components/drawer/drawer-root.tsx
+++ b/packages/raystack/components/drawer/drawer-root.tsx
@@ -4,10 +4,13 @@ import { DrawerPreview as DrawerPrimitive } from '@base-ui/react/drawer';
 
 type Side = 'top' | 'right' | 'bottom' | 'left';
 
-const sideToSwipeDirection: Record<Side, Side> = {
-  top: 'top',
+const sideToSwipeDirection: Record<
+  Side,
+  DrawerPrimitive.Root.Props['swipeDirection']
+> = {
+  top: 'up',
   right: 'right',
-  bottom: 'bottom',
+  bottom: 'down',
   left: 'left'
 };
 
diff --git a/packages/raystack/components/empty-state/empty-state.tsx b/packages/raystack/components/empty-state/empty-state.tsx
index 46ef7e3d7..63430485b 100644
--- a/packages/raystack/components/empty-state/empty-state.tsx
+++ b/packages/raystack/components/empty-state/empty-state.tsx
@@ -1,4 +1,5 @@
 import { cx } from 'class-variance-authority';
+import { ComponentProps, ReactNode } from 'react';
 import { Flex } from '../flex';
 import { Text } from '../text';
 import styles from './empty-state.module.css';
@@ -10,28 +11,34 @@ type classNameKeys =
   | 'heading'
   | 'subHeading';
 
-interface EmptyStateProps {
-  icon: React.ReactNode;
-  heading?: React.ReactNode;
-  subHeading?: React.ReactNode;
-  primaryAction?: React.ReactNode;
-  secondaryAction?: React.ReactNode;
+interface EmptyStateProps extends ComponentProps<typeof Flex> {
+  icon: ReactNode;
+  heading?: ReactNode;
+  subHeading?: ReactNode;
+  primaryAction?: ReactNode;
+  secondaryAction?: ReactNode;
   classNames?: Partial<Record<classNameKeys, string>>;
   variant?: 'empty1' | 'empty2';
 }
 
-export const EmptyState = ({
+export function EmptyState({
   icon,
   heading,
   subHeading,
   primaryAction,
   secondaryAction,
   classNames,
-  variant = 'empty1'
-}: EmptyStateProps) => {
+  variant = 'empty1',
+  ...props
+}: EmptyStateProps) {
   if (variant === 'empty2') {
     return (
-      <Flex align='center' justify='center' className={styles.emptyStatePage}>
+      <Flex
+        align='center'
+        justify='center'
+        className={styles.emptyStatePage}
+        {...props}
+      >
         <Flex
           direction='column'
           align='start'
@@ -81,6 +88,7 @@ export const EmptyState = ({
       align='center'
       gap='medium'
       className={cx(styles.emptyState, classNames?.container)}
+      {...props}
     >
       <div className={cx(styles.iconContainer, classNames?.iconContainer)}>
         <div className={cx(styles.icon, classNames?.icon)}>{icon}</div>
@@ -113,4 +121,6 @@ export const EmptyState = ({
       {secondaryAction}
     </Flex>
   );
-};
+}
+
+EmptyState.displayName = 'EmptyState';
diff --git a/packages/raystack/components/flex/flex.tsx b/packages/raystack/components/flex/flex.tsx
index e2a3acd8d..e7aa94c7c 100644
--- a/packages/raystack/components/flex/flex.tsx
+++ b/packages/raystack/components/flex/flex.tsx
@@ -1,6 +1,5 @@
 import { mergeProps, useRender } from '@base-ui/react';
 import { cva, VariantProps } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './flex.module.css';
 
 const flex = cva(styles.flex, {
@@ -59,40 +58,38 @@ const flex = cva(styles.flex, {
 
 type BoxProps = VariantProps<typeof flex> & useRender.ComponentProps<'div'>;
 
-export const Flex = forwardRef<HTMLDivElement, BoxProps>(
-  (
-    {
+export function Flex({
+  direction,
+  align,
+  justify,
+  wrap,
+  gap,
+  className,
+  width,
+  render,
+  ref,
+  ...props
+}: BoxProps) {
+  const flexProps = {
+    className: flex({
       direction,
       align,
       justify,
       wrap,
       gap,
       className,
-      width,
-      render,
-      ...props
-    },
-    ref
-  ) => {
-    const flexProps = {
-      className: flex({
-        direction,
-        align,
-        justify,
-        wrap,
-        gap,
-        className,
-        width
-      })
-    };
+      width
+    })
+  };
 
-    const element = useRender({
-      defaultTagName: 'div',
-      ref,
-      render,
-      props: mergeProps<'div'>(flexProps, props)
-    });
+  const element = useRender({
+    defaultTagName: 'div',
+    ref,
+    render,
+    props: mergeProps<'div'>(flexProps, props)
+  });
 
-    return element;
-  }
-);
+  return element;
+}
+
+Flex.displayName = 'Flex';
diff --git a/packages/raystack/components/grid/grid-item.tsx b/packages/raystack/components/grid/grid-item.tsx
index 18cc77d12..1078f61e6 100644
--- a/packages/raystack/components/grid/grid-item.tsx
+++ b/packages/raystack/components/grid/grid-item.tsx
@@ -1,5 +1,4 @@
 import { mergeProps, useRender } from '@base-ui/react';
-import { forwardRef } from 'react';
 import { AlignType } from './types';
 
 type GridItemProps = useRender.ComponentProps<'div'> & {
@@ -14,46 +13,42 @@ type GridItemProps = useRender.ComponentProps<'div'> & {
   alignSelf?: AlignType;
 };
 
-export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
-  (
-    {
-      area,
-      colStart,
-      colEnd,
-      rowStart,
-      rowEnd,
-      colSpan,
-      rowSpan,
-      justifySelf,
-      alignSelf,
-      style,
-      render,
-      ...props
-    },
-    ref
-  ) => {
-    const gridItemStyle = {
-      gridArea: area,
-      gridColumnStart: colStart,
-      gridColumnEnd: colEnd,
-      gridRowStart: rowStart,
-      gridRowEnd: rowEnd,
-      gridColumn: colSpan ? `span ${colSpan}` : undefined,
-      gridRow: rowSpan ? `span ${rowSpan}` : undefined,
-      justifySelf,
-      alignSelf,
-      ...style
-    };
+export function GridItem({
+  area,
+  colStart,
+  colEnd,
+  rowStart,
+  rowEnd,
+  colSpan,
+  rowSpan,
+  justifySelf,
+  alignSelf,
+  style,
+  render,
+  ref,
+  ...props
+}: GridItemProps) {
+  const gridItemStyle = {
+    gridArea: area,
+    gridColumnStart: colStart,
+    gridColumnEnd: colEnd,
+    gridRowStart: rowStart,
+    gridRowEnd: rowEnd,
+    gridColumn: colSpan ? `span ${colSpan}` : undefined,
+    gridRow: rowSpan ? `span ${rowSpan}` : undefined,
+    justifySelf,
+    alignSelf,
+    ...style
+  };
 
-    const element = useRender({
-      defaultTagName: 'div',
-      ref,
-      render,
-      props: mergeProps<'div'>({ style: gridItemStyle }, props)
-    });
+  const element = useRender({
+    defaultTagName: 'div',
+    ref,
+    render,
+    props: mergeProps<'div'>({ style: gridItemStyle }, props)
+  });
 
-    return element;
-  }
-);
+  return element;
+}
 
-GridItem.displayName = 'GridItem';
+GridItem.displayName = 'Grid.Item';
diff --git a/packages/raystack/components/grid/grid.tsx b/packages/raystack/components/grid/grid.tsx
index 77cc55b88..74f80696e 100644
--- a/packages/raystack/components/grid/grid.tsx
+++ b/packages/raystack/components/grid/grid.tsx
@@ -1,5 +1,5 @@
 import { mergeProps, useRender } from '@base-ui/react';
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import { AlignExtendedType, AlignType } from './types';
 
 const GAPS = {
@@ -56,71 +56,67 @@ type GridProps = useRender.ComponentProps<'div'> & {
   inline?: boolean;
 };
 
-export const Grid = forwardRef<HTMLDivElement, GridProps>(
-  (
-    {
-      templateAreas,
-      autoFlow,
-      autoColumns,
-      autoRows,
-      columns,
-      rows,
-      gap,
-      columnGap,
-      rowGap,
-      justifyItems,
-      alignItems,
-      justifyContent,
-      alignContent,
-      inline = false,
-      style = {},
-      render,
-      ...props
-    },
-    ref
-  ) => {
-    const gridTemplateColumns =
-      typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
-    const gridTemplateRows =
-      typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;
+export function Grid({
+  templateAreas,
+  autoFlow,
+  autoColumns,
+  autoRows,
+  columns,
+  rows,
+  gap,
+  columnGap,
+  rowGap,
+  justifyItems,
+  alignItems,
+  justifyContent,
+  alignContent,
+  inline = false,
+  style = {},
+  render,
+  ref,
+  ...props
+}: GridProps) {
+  const gridTemplateColumns =
+    typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
+  const gridTemplateRows =
+    typeof rows === 'number' ? `repeat(${rows}, 1fr)` : rows;
 
-    const gridTemplateAreas = useMemo(() => {
-      if (Array.isArray(templateAreas)) {
-        return templateAreas
-          .map(area => `"${area}"`)
-          .join(' ')
-          .trim();
-      }
-      return templateAreas;
-    }, [templateAreas]);
+  const gridTemplateAreas = useMemo(() => {
+    if (Array.isArray(templateAreas)) {
+      return templateAreas
+        .map(area => `"${area}"`)
+        .join(' ')
+        .trim();
+    }
+    return templateAreas;
+  }, [templateAreas]);
 
-    const gridStyle = {
-      display: inline ? 'inline-grid' : 'grid',
-      gridTemplateAreas,
-      gridAutoFlow: autoFlow,
-      gridAutoColumns: autoColumns,
-      gridAutoRows: autoRows,
-      gridTemplateColumns,
-      gridTemplateRows,
-      gap: gap && GAPS[gap],
-      columnGap: columnGap && GAPS[columnGap],
-      rowGap: rowGap && GAPS[rowGap],
-      justifyItems,
-      alignItems,
-      justifyContent,
-      alignContent,
-      ...style
-    };
+  const gridStyle = {
+    display: inline ? 'inline-grid' : 'grid',
+    gridTemplateAreas,
+    gridAutoFlow: autoFlow,
+    gridAutoColumns: autoColumns,
+    gridAutoRows: autoRows,
+    gridTemplateColumns,
+    gridTemplateRows,
+    gap: gap && GAPS[gap],
+    columnGap: columnGap && GAPS[columnGap],
+    rowGap: rowGap && GAPS[rowGap],
+    justifyItems,
+    alignItems,
+    justifyContent,
+    alignContent,
+    ...style
+  };
 
-    const element = useRender({
-      defaultTagName: 'div',
-      ref,
-      render,
-      props: mergeProps<'div'>({ style: gridStyle }, props)
-    });
+  const element = useRender({
+    defaultTagName: 'div',
+    ref,
+    render,
+    props: mergeProps<'div'>({ style: gridStyle }, props)
+  });
 
-    return element;
-  }
-);
+  return element;
+}
 
 Grid.displayName = 'Grid';
diff --git a/packages/raystack/components/headline/headline.tsx b/packages/raystack/components/headline/headline.tsx
index 2e2b2ea47..dd09a72b1 100644
--- a/packages/raystack/components/headline/headline.tsx
+++ b/packages/raystack/components/headline/headline.tsx
@@ -1,6 +1,5 @@
-import { type VariantProps, cva } from 'class-variance-authority';
-import { HTMLAttributes, forwardRef } from 'react';
-
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
 import styles from './headline.module.css';
 
 const headline = cva(styles.headline, {
@@ -43,31 +42,25 @@ export type HeadlineBaseProps = VariantProps<typeof headline> & {
 };
 
 type HeadlineProps = HeadlineBaseProps &
-  HTMLAttributes<HTMLHeadingElement> & {
+  ComponentProps<'h1'> & {
     as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   };
 
-export const Headline = forwardRef<HTMLHeadingElement, HeadlineProps>(
-  (
-    {
-      className,
-      size,
-      weight,
-      align,
-      truncate,
-      as: Component = 'h2',
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <Component
-        ref={ref}
-        className={headline({ size, weight, align, truncate, className })}
-        {...props}
-      />
-    );
-  }
-);
+export function Headline({
+  className,
+  size,
+  weight,
+  align,
+  truncate,
+  as: Component = 'h2',
+  ...props
+}: HeadlineProps) {
+  return (
+    <Component
+      className={headline({ size, weight, align, truncate, className })}
+      {...props}
+    />
+  );
+}
 
 Headline.displayName = 'Headline';
diff --git a/packages/raystack/components/icon-button/icon-button.tsx b/packages/raystack/components/icon-button/icon-button.tsx
index ecc36f2fd..c524ccde7 100644
--- a/packages/raystack/components/icon-button/icon-button.tsx
+++ b/packages/raystack/components/icon-button/icon-button.tsx
@@ -1,7 +1,6 @@
 import { cva, VariantProps } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
+import { ComponentProps } from 'react';
 import { Flex } from '../flex';
-
 import styles from './icon-button.module.css';
 
 const iconButton = cva(styles.iconButton, {
@@ -19,27 +18,23 @@ const iconButton = cva(styles.iconButton, {
 });
 
 export interface IconButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends ComponentProps<'button'>,
     VariantProps<typeof iconButton> {
   size?: 1 | 2 | 3 | 4;
   'aria-label'?: string;
 }
 
-export const IconButton = forwardRef<ElementRef<'button'>, IconButtonProps>(
-  (
-    {
-      className,
-      size,
-      disabled,
-      children,
-      'aria-label': ariaLabel,
-      style,
-      ...props
-    },
-    ref
-  ) => (
+export function IconButton({
+  className,
+  size,
+  disabled,
+  children,
+  'aria-label': ariaLabel,
+  style,
+  ...props
+}: IconButtonProps) {
+  return (
     <button
-      ref={ref}
       className={iconButton({ size, className })}
       disabled={disabled}
       type='button'
@@ -52,7 +47,7 @@ export const IconButton = forwardRef<ElementRef<'button'>, IconButtonProps>(
         {children}
       </Flex>
     </button>
-  )
-);
+  );
+}
 
 IconButton.displayName = 'IconButton';