diff --git a/packages/raystack/components/popover/popover.tsx b/packages/raystack/components/popover/popover.tsx
index 823aca06c..752e02680 100644
--- a/packages/raystack/components/popover/popover.tsx
+++ b/packages/raystack/components/popover/popover.tsx
@@ -2,55 +2,47 @@
 
 import { Popover as PopoverPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { ElementRef, forwardRef } from 'react';
 import styles from './popover.module.css';
 
 export interface PopoverContentProps
   extends Omit<
       PopoverPrimitive.Positioner.Props,
-      'render' | 'className' | 'style'
+      'render' | 'className' | 'style' | 'ref'
     >,
     PopoverPrimitive.Popup.Props {}
 
-const PopoverContent = forwardRef<
-  ElementRef<typeof PopoverPrimitive.Popup>,
-  PopoverContentProps
->(
-  (
-    {
-      initialFocus,
-      finalFocus,
-      className,
-      style,
-      render,
-      children,
-      ...positionerProps
-    },
-    ref
-  ) => {
-    return (
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Positioner
-          sideOffset={4}
-          collisionPadding={3}
-          className={styles.popoverPositioner}
-          {...positionerProps}
+function PopoverContent({
+  ref,
+  initialFocus,
+  finalFocus,
+  className,
+  style,
+  render,
+  children,
+  ...positionerProps
+}: PopoverContentProps) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        sideOffset={4}
+        collisionPadding={3}
+        className={styles.popoverPositioner}
+        {...positionerProps}
+      >
+        <PopoverPrimitive.Popup
+          ref={ref}
+          className={cx(styles.popover, className)}
+          render={render}
+          initialFocus={initialFocus}
+          finalFocus={finalFocus}
+          style={style}
         >
-          <PopoverPrimitive.Popup
-            ref={ref}
-            className={cx(styles.popover, className)}
-            render={render}
-            initialFocus={initialFocus}
-            finalFocus={finalFocus}
-            style={style}
-          >
-            {children}
-          </PopoverPrimitive.Popup>
-        </PopoverPrimitive.Positioner>
-      </PopoverPrimitive.Portal>
-    );
-  }
-);
+          {children}
+        </PopoverPrimitive.Popup>
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
 PopoverContent.displayName = 'Popover.Content';
 
 export const Popover = Object.assign(PopoverPrimitive.Root, {
diff --git a/packages/raystack/components/preview-card/preview-card.tsx b/packages/raystack/components/preview-card/preview-card.tsx
index bbd3c7958..1e8243e9f 100644
--- a/packages/raystack/components/preview-card/preview-card.tsx
+++ b/packages/raystack/components/preview-card/preview-card.tsx
@@ -2,13 +2,12 @@
 
 import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import styles from './preview-card.module.css';
 
 export interface PreviewCardContentProps
   extends Omit<
       PreviewCardPrimitive.Positioner.Props,
-      'render' | 'className' | 'style'
+      'render' | 'className' | 'style' | 'ref'
     >,
     PreviewCardPrimitive.Popup.Props {
   /**
@@ -18,70 +17,64 @@ export interface PreviewCardContentProps
   showArrow?: boolean;
 }
 
-const PreviewCardContent = forwardRef<
-  ElementRef<typeof PreviewCardPrimitive.Popup>,
-  PreviewCardContentProps
->(
-  (
-    {
-      className,
-      children,
-      showArrow = false,
-      style,
-      render,
-      ...positionerProps
-    },
-    ref
-  ) => {
-    return (
-      <PreviewCardPrimitive.Portal>
-        <PreviewCardPrimitive.Positioner
-          sideOffset={showArrow ? 10 : 4}
-          collisionPadding={3}
-          className={styles.positioner}
-          {...positionerProps}
+function PreviewCardContent({
+  ref,
+  className,
+  children,
+  showArrow = false,
+  style,
+  render,
+  ...positionerProps
+}: PreviewCardContentProps) {
+  return (
+    <PreviewCardPrimitive.Portal>
+      <PreviewCardPrimitive.Positioner
+        sideOffset={showArrow ? 10 : 4}
+        collisionPadding={3}
+        className={styles.positioner}
+        {...positionerProps}
+      >
+        <PreviewCardPrimitive.Popup
+          ref={ref}
+          className={cx(styles.popup, className)}
+          style={style}
+          render={render}
         >
-          <PreviewCardPrimitive.Popup
-            ref={ref}
-            className={cx(styles.popup, className)}
-            style={style}
-            render={render}
-          >
-            {children}
-            {showArrow && (
-              <PreviewCardPrimitive.Arrow className={styles.arrow}>
-                <svg
-                  xmlns='http://www.w3.org/2000/svg'
-                  width='6'
-                  height='7'
-                  viewBox='0 0 6 7'
-                  fill='none'
-                >
-                  <path
-                    d='M2.90809 6.78553L0 0H6L3.09191 6.78553C3.05728 6.86634 2.94272 6.86634 2.90809 6.78553Z'
-                    fill='currentColor'
-                  />
-                </svg>
-              </PreviewCardPrimitive.Arrow>
-            )}
-          </PreviewCardPrimitive.Popup>
-        </PreviewCardPrimitive.Positioner>
-      </PreviewCardPrimitive.Portal>
-    );
-  }
-);
+          {children}
+          {showArrow && (
+            <PreviewCardPrimitive.Arrow className={styles.arrow}>
+              <svg
+                xmlns='http://www.w3.org/2000/svg'
+                width='6'
+                height='7'
+                viewBox='0 0 6 7'
+                fill='none'
+              >
+                <path
+                  d='M2.90809 6.78553L0 0H6L3.09191 6.78553C3.05728 6.86634 2.94272 6.86634 2.90809 6.78553Z'
+                  fill='currentColor'
+                />
+              </svg>
+            </PreviewCardPrimitive.Arrow>
+          )}
+        </PreviewCardPrimitive.Popup>
+      </PreviewCardPrimitive.Positioner>
+    </PreviewCardPrimitive.Portal>
+  );
+}
 PreviewCardContent.displayName = 'PreviewCard.Content';
 
-const PreviewCardViewport = forwardRef<
-  ElementRef<typeof PreviewCardPrimitive.Viewport>,
-  PreviewCardPrimitive.Viewport.Props
->(({ className, ...props }, ref) => (
-  <PreviewCardPrimitive.Viewport
-    ref={ref}
-    className={cx(styles.viewport, className)}
-    {...props}
-  />
-));
+function PreviewCardViewport({
+  className,
+  ...props
+}: PreviewCardPrimitive.Viewport.Props) {
+  return (
+    <PreviewCardPrimitive.Viewport
+      className={cx(styles.viewport, className)}
+      {...props}
+    />
+  );
+}
 PreviewCardViewport.displayName = 'PreviewCard.Viewport';
 
 export const PreviewCard = Object.assign(PreviewCardPrimitive.Root, {
diff --git a/packages/raystack/components/progress/progress-misc.tsx b/packages/raystack/components/progress/progress-misc.tsx
index f1dd42f77..9f64288cd 100644
--- a/packages/raystack/components/progress/progress-misc.tsx
+++ b/packages/raystack/components/progress/progress-misc.tsx
@@ -2,31 +2,32 @@
 
 import { Progress as ProgressPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef } from 'react';
 import styles from './progress.module.css';
 
-export const ProgressLabel = forwardRef<
-  ElementRef<typeof ProgressPrimitive.Label>,
-  ProgressPrimitive.Label.Props
->(({ className, ...props }, ref) => (
-  <ProgressPrimitive.Label
-    ref={ref}
-    className={cx(styles.label, className)}
-    {...props}
-  />
-));
+export function ProgressLabel({
+  className,
+  ...props
+}: ProgressPrimitive.Label.Props) {
+  return (
+    <ProgressPrimitive.Label
+      className={cx(styles.label, className)}
+      {...props}
+    />
+  );
+}
 
-ProgressLabel.displayName = 'ProgressLabel';
+ProgressLabel.displayName = 'Progress.Label';
 
-export const ProgressValue = forwardRef<
-  ElementRef<typeof ProgressPrimitive.Value>,
-  ProgressPrimitive.Value.Props
->(({ className, ...props }, ref) => (
-  <ProgressPrimitive.Value
-    ref={ref}
-    className={cx(styles.value, className)}
-    {...props}
-  />
-));
+export function ProgressValue({
+  className,
+  ...props
+}: ProgressPrimitive.Value.Props) {
+  return (
+    <ProgressPrimitive.Value
+      className={cx(styles.value, className)}
+      {...props}
+    />
+  );
+}
 
-ProgressValue.displayName = 'ProgressValue';
+ProgressValue.displayName = 'Progress.Value';
diff --git a/packages/raystack/components/progress/progress-root.tsx b/packages/raystack/components/progress/progress-root.tsx
index f02adedd8..6cae64547 100644
--- a/packages/raystack/components/progress/progress-root.tsx
+++ b/packages/raystack/components/progress/progress-root.tsx
@@ -2,7 +2,7 @@
 
 import { Progress as ProgressPrimitive } from '@base-ui/react';
 import { cva, type VariantProps } from 'class-variance-authority';
-import { createContext, type ElementRef, forwardRef } from 'react';
+import { type CSSProperties, createContext } from 'react';
 import styles from './progress.module.css';
 import { ProgressTrack } from './progress-track';
 
@@ -34,48 +34,39 @@ export const ProgressContext = createContext<ProgressContextValue>({
   percentage: 0
 });
 
-export const ProgressRoot = forwardRef<
-  ElementRef<typeof ProgressPrimitive.Root>,
-  ProgressProps
->(
-  (
-    {
-      className,
-      style = {},
-      variant = 'linear',
-      children = <ProgressTrack />,
-      value = 0,
-      min = 0,
-      max = 100,
-      ...props
-    },
-    ref
-  ) => {
-    const percentage = value === null ? 0 : ((value - min) * 100) / (max - min);
+export function ProgressRoot({
+  className,
+  style = {},
+  variant = 'linear',
+  children = <ProgressTrack />,
+  value = 0,
+  min = 0,
+  max = 100,
+  ...props
+}: ProgressProps) {
+  const percentage = value === null ? 0 : ((value - min) * 100) / (max - min);
 
-    return (
-      <ProgressContext.Provider
-        value={{ variant: variant ?? 'linear', value, percentage }}
+  return (
+    <ProgressContext
+      value={{ variant: variant ?? 'linear', value, percentage }}
+    >
+      <ProgressPrimitive.Root
+        className={progress({ variant, className })}
+        style={
+          {
+            ...style,
+            '--rs-progress-percentage': percentage
+          } as CSSProperties
+        }
+        value={value}
+        min={min}
+        max={max}
+        {...props}
       >
-        <ProgressPrimitive.Root
-          ref={ref}
-          className={progress({ variant, className })}
-          style={
-            {
-              ...style,
-              '--rs-progress-percentage': percentage
-            } as React.CSSProperties
-          }
-          value={value}
-          min={min}
-          max={max}
-          {...props}
-        >
-          {children}
-        </ProgressPrimitive.Root>
-      </ProgressContext.Provider>
-    );
-  }
-);
+        {children}
+      </ProgressPrimitive.Root>
+    </ProgressContext>
+  );
+}
 
-ProgressRoot.displayName = 'ProgressRoot';
+ProgressRoot.displayName = 'Progress';
diff --git a/packages/raystack/components/progress/progress-track.tsx b/packages/raystack/components/progress/progress-track.tsx
index 9c8e6ab80..2f1e63af1 100644
--- a/packages/raystack/components/progress/progress-track.tsx
+++ b/packages/raystack/components/progress/progress-track.tsx
@@ -2,20 +2,20 @@
 
 import { Progress as ProgressPrimitive } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { type ElementRef, forwardRef, useContext } from 'react';
+import { useContext } from 'react';
 import styles from './progress.module.css';
 import { ProgressContext } from './progress-root';
 
-export const ProgressTrack = forwardRef<
-  ElementRef<typeof ProgressPrimitive.Track>,
-  ProgressPrimitive.Track.Props
->(({ className, children, ...props }, ref) => {
+export function ProgressTrack({
+  className,
+  children,
+  ...props
+}: ProgressPrimitive.Track.Props) {
   const { variant } = useContext(ProgressContext);
 
   if (variant === 'circular') {
     return (
       <ProgressPrimitive.Track
-        ref={ref}
         className={cx(styles.circularSvg, className)}
         {...props}
         render={({ children: trackChildren, ...trackProps }) => (
@@ -34,15 +34,11 @@ export const ProgressTrack = forwardRef<
   }
 
   return (
-    <ProgressPrimitive.Track
-      ref={ref}
-      className={cx(styles.track, className)}
-      {...props}
-    >
+    <ProgressPrimitive.Track className={cx(styles.track, className)} {...props}>
       <ProgressPrimitive.Indicator className={styles.indicator} />
       {children}
     </ProgressPrimitive.Track>
   );
-});
+}
 
-ProgressTrack.displayName = 'ProgressTrack';
+ProgressTrack.displayName = 'Progress.Track';
diff --git a/packages/raystack/components/radio/radio.tsx b/packages/raystack/components/radio/radio.tsx
index ff1d0ac93..81e79b73e 100644
--- a/packages/raystack/components/radio/radio.tsx
+++ b/packages/raystack/components/radio/radio.tsx
@@ -1,33 +1,24 @@
 import { Radio as RadioPrimitive } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 
 import styles from './radio.module.css';
 
-const RadioGroup = forwardRef<HTMLDivElement, RadioGroupPrimitive.Props>(
-  ({ className, ...props }, ref) => (
-    <RadioGroupPrimitive
-      ref={ref}
-      className={cx(styles.radio, className)}
-      {...props}
-    />
-  )
-);
+function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+  return (
+    <RadioGroupPrimitive className={cx(styles.radio, className)} {...props} />
+  );
+}
 
 RadioGroup.displayName = 'Radio.Group';
 
-const RadioItem = forwardRef<HTMLButtonElement, RadioPrimitive.Root.Props>(
-  ({ className, ...props }, forwardedRef) => (
-    <RadioPrimitive.Root
-      {...props}
-      ref={forwardedRef}
-      className={cx(styles.radioitem, className)}
-    >
+function RadioItem({ className, ...props }: RadioPrimitive.Root.Props) {
+  return (
+    <RadioPrimitive.Root {...props} className={cx(styles.radioitem, className)}>
       <RadioPrimitive.Indicator className={styles.indicator} />
     </RadioPrimitive.Root>
-  )
-);
+  );
+}
 
 RadioItem.displayName = 'Radio';
 
diff --git a/packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx b/packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx
index bcb3ca4ce..9321932d4 100644
--- a/packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx
+++ b/packages/raystack/components/scroll-area/scroll-area-scrollbar.tsx
@@ -2,7 +2,6 @@
 
 import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import type { ScrollAreaType } from './scroll-area';
 import styles from './scroll-area.module.css';
 
@@ -11,13 +10,14 @@ export interface ScrollAreaScrollbarProps
   type?: ScrollAreaType;
 }
 
-export const ScrollAreaScrollbar = forwardRef<
-  HTMLDivElement,
-  ScrollAreaScrollbarProps
->(({ className, orientation = 'vertical', type = 'hover', ...props }, ref) => {
+export function ScrollAreaScrollbar({
+  className,
+  orientation = 'vertical',
+  type = 'hover',
+  ...props
+}: ScrollAreaScrollbarProps) {
   return (
     <ScrollAreaPrimitive.Scrollbar
-      ref={ref}
       orientation={orientation}
       className={cx(styles.scrollbar, styles[`scrollbar-${type}`], className)}
       {...props}
@@ -25,6 +25,6 @@ export const ScrollAreaScrollbar = forwardRef<
       <ScrollAreaPrimitive.Thumb className={styles.thumb} />
     </ScrollAreaPrimitive.Scrollbar>
   );
-});
+}
 
-ScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';
+ScrollAreaScrollbar.displayName = 'ScrollArea.Scrollbar';
diff --git a/packages/raystack/components/scroll-area/scroll-area.tsx b/packages/raystack/components/scroll-area/scroll-area.tsx
index a6e0c767f..2f1e53023 100644
--- a/packages/raystack/components/scroll-area/scroll-area.tsx
+++ b/packages/raystack/components/scroll-area/scroll-area.tsx
@@ -2,7 +2,6 @@
 
 import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
 import { cx } from 'class-variance-authority';
-import { forwardRef } from 'react';
 import styles from './scroll-area.module.css';
 import { ScrollAreaScrollbar } from './scroll-area-scrollbar';
 
@@ -12,23 +11,22 @@ export interface ScrollAreaProps extends ScrollAreaPrimitive.Root.Props {
   type?: ScrollAreaType;
 }
 
-export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
-  ({ className, type = 'hover', children, ...props }, ref) => {
-    return (
-      <ScrollAreaPrimitive.Root
-        ref={ref}
-        className={cx(styles.root, className)}
-        {...props}
-      >
-        <ScrollAreaPrimitive.Viewport className={styles.viewport}>
-          <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>
-        </ScrollAreaPrimitive.Viewport>
-        <ScrollAreaScrollbar orientation='vertical' type={type} />
-        <ScrollAreaScrollbar orientation='horizontal' type={type} />
-        <ScrollAreaPrimitive.Corner className={styles.corner} />
-      </ScrollAreaPrimitive.Root>
-    );
-  }
-);
+export function ScrollArea({
+  className,
+  type = 'hover',
+  children,
+  ...props
+}: ScrollAreaProps) {
+  return (
+    <ScrollAreaPrimitive.Root className={cx(styles.root, className)} {...props}>
+      <ScrollAreaPrimitive.Viewport className={styles.viewport}>
+        <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollAreaScrollbar orientation='vertical' type={type} />
+      <ScrollAreaScrollbar orientation='horizontal' type={type} />
+      <ScrollAreaPrimitive.Corner className={styles.corner} />
+    </ScrollAreaPrimitive.Root>
+  );
+}
 
 ScrollArea.displayName = 'ScrollArea';
diff --git a/packages/raystack/components/search/search.tsx b/packages/raystack/components/search/search.tsx
index 06ef6a669..e79fcab6e 100644
--- a/packages/raystack/components/search/search.tsx
+++ b/packages/raystack/components/search/search.tsx
@@ -5,7 +5,6 @@ import { IconButton } from '../icon-button';
 import { InputField } from '../input-field';
 import { InputFieldProps } from '../input-field/input-field';
 
-import { forwardRef } from 'react';
 import styles from './search.module.css';
 
 export interface SearchProps extends Omit<InputFieldProps, 'leadingIcon'> {
@@ -14,62 +13,56 @@ export interface SearchProps extends Omit<InputFieldProps, 'leadingIcon'> {
   variant?: 'default' | 'borderless';
 }
 
-export const Search = forwardRef<HTMLInputElement, SearchProps>(
-  (
-    {
-      className,
-      disabled,
-      placeholder = 'Search',
-      size,
-      showClearButton,
-      onClear,
-      value,
-      onChange,
-      width = '100%',
-      variant = 'default',
-      ...props
-    }: SearchProps,
-    ref
-  ) => {
-    const trailingIconWithClear =
-      showClearButton && value ? (
-        <div className={styles.clearButtonWrapper}>
-          <IconButton
-            size={size === 'small' ? 2 : 3}
-            onClick={e => {
-              e.stopPropagation();
-              if (!disabled && onClear) {
-                onClear();
-              }
-            }}
-            disabled={disabled}
-            aria-label='Clear search'
-            className={styles.clearButton}
-          >
-            <CrossCircledIcon />
-          </IconButton>
-        </div>
-      ) : undefined;
-
-    return (
-      <div className={styles.container} role='search' style={{ width }}>
-        <InputField
-          leadingIcon={<MagnifyingGlassIcon />}
-          trailingIcon={trailingIconWithClear}
-          placeholder={placeholder}
+export function Search({
+  className,
+  disabled,
+  placeholder = 'Search',
+  size,
+  showClearButton,
+  onClear,
+  value,
+  onChange,
+  width = '100%',
+  variant = 'default',
+  ...props
+}: SearchProps) {
+  const trailingIconWithClear =
+    showClearButton && value ? (
+      <div className={styles.clearButtonWrapper}>
+        <IconButton
+          size={size === 'small' ? 2 : 3}
+          onClick={e => {
+            e.stopPropagation();
+            if (!disabled && onClear) {
+              onClear();
+            }
+          }}
           disabled={disabled}
-          value={value}
-          onChange={onChange}
-          size={size}
-          className={className}
-          aria-label={placeholder}
-          variant={variant}
-          ref={ref}
-          {...props}
-        />
+          aria-label='Clear search'
+          className={styles.clearButton}
+        >
+          <CrossCircledIcon />
+        </IconButton>
       </div>
-    );
-  }
-);
+    ) : undefined;
+
+  return (
+    <div className={styles.container} role='search' style={{ width }}>
+      <InputField
+        leadingIcon={<MagnifyingGlassIcon />}
+        trailingIcon={trailingIconWithClear}
+        placeholder={placeholder}
+        disabled={disabled}
+        value={value}
+        onChange={onChange}
+        size={size}
+        className={className}
+        aria-label={placeholder}
+        variant={variant}
+        {...props}
+      />
+    </div>
+  );
+}
 
 Search.displayName = 'Search';
diff --git a/packages/raystack/components/select/select-content.tsx b/packages/raystack/components/select/select-content.tsx
index 51645699b..377faae71 100644
--- a/packages/raystack/components/select/select-content.tsx
+++ b/packages/raystack/components/select/select-content.tsx
@@ -5,78 +5,71 @@ import {
   Select as SelectPrimitive
 } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { forwardRef, ReactNode } from 'react';
 import styles from './select.module.css';
 import { useSelectContext } from './select-root';
 
-export interface SelectContentProps {
-  className?: string;
-  children?: ReactNode;
+export interface SelectContentProps
+  extends Omit<
+      SelectPrimitive.Positioner.Props,
+      'render' | 'className' | 'style' | 'ref'
+    >,
+    SelectPrimitive.Popup.Props {
   searchPlaceholder?: string;
-  sideOffset?: number;
-  style?: React.CSSProperties;
 }
 
-export const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
-  (
-    {
-      className,
-      children,
-      searchPlaceholder = 'Search...',
-      sideOffset = 4,
-      ...props
-    },
-    ref
-  ) => {
-    const { autocomplete, multiple } = useSelectContext();
-
-    if (autocomplete) {
-      return (
-        <ComboboxPrimitive.Portal>
-          <ComboboxPrimitive.Positioner
-            sideOffset={sideOffset}
-            className={styles.positioner}
-          >
-            <ComboboxPrimitive.Popup
-              ref={ref}
-              className={cx(styles.content, className)}
-              data-multiselectable={multiple ? true : undefined}
-              {...props}
-            >
-              <ComboboxPrimitive.Input
-                placeholder={searchPlaceholder}
-                className={styles.comboboxInput}
-              />
-              <ComboboxPrimitive.List
-                className={styles.comboboxContent}
-                aria-multiselectable={multiple ? true : undefined}
-              >
-                {children}
-              </ComboboxPrimitive.List>
-            </ComboboxPrimitive.Popup>
-          </ComboboxPrimitive.Positioner>
-        </ComboboxPrimitive.Portal>
-      );
-    }
+export function SelectContent({
+  className,
+  children,
+  searchPlaceholder = 'Search...',
+  sideOffset = 4,
+  ...props
+}: SelectContentProps) {
+  const { autocomplete, multiple } = useSelectContext();
 
+  if (autocomplete) {
     return (
-      <SelectPrimitive.Positioner
-        sideOffset={sideOffset}
-        className={styles.positioner}
-        alignItemWithTrigger={false}
-      >
-        <SelectPrimitive.Popup
-          ref={ref}
-          className={cx(styles.content, className)}
-          data-multiselectable={multiple ? true : undefined}
-          {...props}
+      <ComboboxPrimitive.Portal>
+        <ComboboxPrimitive.Positioner
+          sideOffset={sideOffset}
+          className={styles.positioner}
         >
-          <SelectPrimitive.List className={styles.viewport}>
-            {children}
-          </SelectPrimitive.List>
-        </SelectPrimitive.Popup>
-      </SelectPrimitive.Positioner>
+          <ComboboxPrimitive.Popup
+            className={cx(styles.content, className)}
+            data-multiselectable={multiple ? true : undefined}
+            {...props}
+          >
+            <ComboboxPrimitive.Input
+              placeholder={searchPlaceholder}
+              className={styles.comboboxInput}
+            />
+            <ComboboxPrimitive.List
+              className={styles.comboboxContent}
+              aria-multiselectable={multiple ? true : undefined}
+            >
+              {children}
+            </ComboboxPrimitive.List>
+          </ComboboxPrimitive.Popup>
+        </ComboboxPrimitive.Positioner>
+      </ComboboxPrimitive.Portal>
     );
   }
-);
+
+  return (
+    <SelectPrimitive.Positioner
+      sideOffset={sideOffset}
+      className={styles.positioner}
+      alignItemWithTrigger={false}
+    >
+      <SelectPrimitive.Popup
+        className={cx(styles.content, className)}
+        data-multiselectable={multiple ? true : undefined}
+        {...props}
+      >
+        <SelectPrimitive.List className={styles.viewport}>
+          {children}
+        </SelectPrimitive.List>
+      </SelectPrimitive.Popup>
+    </SelectPrimitive.Positioner>
+  );
+}
 SelectContent.displayName = 'Select.Content';
diff --git a/packages/raystack/components/select/select-item.tsx b/packages/raystack/components/select/select-item.tsx
index b0d12629a..9a7c52797 100644
--- a/packages/raystack/components/select/select-item.tsx
+++ b/packages/raystack/components/select/select-item.tsx
@@ -5,92 +5,82 @@ import {
   Select as SelectPrimitive
 } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { forwardRef, ReactNode, useLayoutEffect } from 'react';
+import { ReactNode, useLayoutEffect } from 'react';
 import { Checkbox } from '../checkbox';
 import { getMatch } from '../menu/utils';
 import { Text } from '../text';
 import styles from './select.module.css';
 import { useSelectContext } from './select-root';
 
-export interface SelectItemProps {
-  className?: string;
-  children?: ReactNode;
-  value: string;
+export interface SelectItemProps extends SelectPrimitive.Item.Props {
   leadingIcon?: ReactNode;
-  disabled?: boolean;
 }
 
-export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
-  (
-    {
-      className,
-      children,
-      value: providedValue,
-      leadingIcon,
-      disabled,
-      ...props
-    },
-    ref
-  ) => {
-    const value = String(providedValue);
-    const {
-      registerItem,
-      unregisterItem,
-      autocomplete,
-      searchValue,
-      value: selectValue,
-      shouldFilter,
-      hasItems,
-      multiple
-    } = useSelectContext();
+export function SelectItem({
+  className,
+  children,
+  value: providedValue,
+  leadingIcon,
+  disabled,
+  ...props
+}: SelectItemProps) {
+  const value = String(providedValue);
+  const {
+    registerItem,
+    unregisterItem,
+    autocomplete,
+    searchValue,
+    value: selectValue,
+    shouldFilter,
+    hasItems,
+    multiple
+  } = useSelectContext();
 
-    const isSelected = multiple
-      ? selectValue?.includes(value)
-      : value === selectValue;
-    const isMatched = getMatch(value, children, searchValue);
-    const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;
+  const isSelected = multiple
+    ? selectValue?.includes(value)
+    : value === selectValue;
+  const isMatched = getMatch(value, children, searchValue);
+  const isHidden = shouldFilter && !hasItems && isSelected && !isMatched;
 
-    const element =
-      typeof children === 'string' ? (
-        <>
-          {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}
-          <Text>{children}</Text>
-        </>
-      ) : (
-        children
-      );
+  const element =
+    typeof children === 'string' ? (
+      <>
+        {leadingIcon && <div className={styles.itemIcon}>{leadingIcon}</div>}
+        <Text>{children}</Text>
+      </>
+    ) : (
+      children
+    );
 
-    useLayoutEffect(() => {
-      registerItem({ leadingIcon, children, value });
-      return () => {
-        unregisterItem(value);
-      };
-    }, [value, children, registerItem, unregisterItem, leadingIcon]);
+  useLayoutEffect(() => {
+    registerItem({ leadingIcon, children, value });
+    return () => {
+      unregisterItem(value);
+    };
+  }, [value, children, registerItem, unregisterItem, leadingIcon]);
 
-    if (shouldFilter && !hasItems && !isMatched && !isSelected) {
-      return null;
-    }
+  if (shouldFilter && !hasItems && !isMatched && !isSelected) {
+    return null;
+  }
 
-    const ItemPrimitive = autocomplete
-      ? ComboboxPrimitive.Item
-      : SelectPrimitive.Item;
+  const ItemPrimitive = autocomplete
+    ? ComboboxPrimitive.Item
+    : SelectPrimitive.Item;
 
-    return (
-      <ItemPrimitive
-        ref={ref}
-        value={value}
-        className={cx(styles.menuitem, className, isHidden && styles.hidden)}
-        data-hidden={isHidden || undefined}
-        disabled={disabled || isHidden}
-        {...props}
-        render={(renderProps, state) => (
-          <div {...renderProps}>
-            {multiple && <Checkbox checked={state.selected} />}
-            {element}
-          </div>
-        )}
-      />
-    );
-  }
-);
+  return (
+    <ItemPrimitive
+      value={value}
+      className={cx(styles.menuitem, className, isHidden && styles.hidden)}
+      data-hidden={isHidden || undefined}
+      disabled={disabled || isHidden}
+      {...props}
+      render={(renderProps, state) => (
+        <div {...renderProps}>
+          {multiple && <Checkbox checked={state.selected} />}
+          {element}
+        </div>
+      )}
+    />
+  );
+}
 SelectItem.displayName = 'Select.Item';
diff --git a/packages/raystack/components/select/select-misc.tsx b/packages/raystack/components/select/select-misc.tsx
index 289f64d79..b2bb47e32 100644
--- a/packages/raystack/components/select/select-misc.tsx
+++ b/packages/raystack/components/select/select-misc.tsx
@@ -5,85 +5,64 @@ import {
   Select as SelectPrimitive
 } from '@base-ui/react';
 import { cx } from 'class-variance-authority';
-import { Fragment, forwardRef, ReactNode } from 'react';
+import { Fragment, ReactNode } from 'react';
 import styles from './select.module.css';
 import { useSelectContext } from './select-root';
 
-export interface SelectGroupProps {
-  className?: string;
-  children?: ReactNode;
-}
+export interface SelectGroupProps extends SelectPrimitive.Group.Props {}
 
-export const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(
-  ({ className, children, ...props }, ref) => {
-    const { shouldFilter, autocomplete } = useSelectContext();
-
-    if (shouldFilter) return <Fragment>{children}</Fragment>;
-
-    const GroupPrimitive = autocomplete
-      ? ComboboxPrimitive.Group
-      : SelectPrimitive.Group;
-
-    return (
-      <GroupPrimitive
-        ref={ref}
-        className={cx(styles.menugroup, className)}
-        {...props}
-      >
-        {children}
-      </GroupPrimitive>
-    );
-  }
-);
-SelectGroup.displayName = 'Select.Group';
+export function SelectGroup({
+  className,
+  children,
+  ...props
+}: SelectGroupProps) {
+  const { shouldFilter, autocomplete } = useSelectContext();
+
+  if (shouldFilter) return <Fragment>{children}</Fragment>;
+
+  const GroupPrimitive = autocomplete
+    ? ComboboxPrimitive.Group
+    : SelectPrimitive.Group;
 
-export interface SelectLabelProps {
-  className?: string;
-  children?: ReactNode;
+  return (
+    <GroupPrimitive className={cx(styles.menugroup, className)} {...props}>
+      {children}
+    </GroupPrimitive>
+  );
 }
+SelectGroup.displayName = 'Select.Group';
 
-export const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(
-  ({ className, ...props }, ref) => {
-    const { shouldFilter, autocomplete } = useSelectContext();
-
-    if (shouldFilter) return null;
-
-    const LabelPrimitive = autocomplete
-      ? ComboboxPrimitive.GroupLabel
-      : SelectPrimitive.GroupLabel;
-
-    return (
-      <LabelPrimitive
-        ref={ref}
-        className={cx(styles.label, className)}
-        {...props}
-      />
-    );
-  }
-);
-SelectLabel.displayName = 'Select.Label';
+export interface SelectLabelProps extends SelectPrimitive.GroupLabel.Props {}
+
+export function SelectLabel({ className, ...props }: SelectLabelProps) {
+  const { shouldFilter, autocomplete } = useSelectContext();
+
+  if (shouldFilter) return null;
 
-export interface SelectSeparatorProps {
-  className?: string;
+  const LabelPrimitive = autocomplete
+    ? ComboboxPrimitive.GroupLabel
+    : SelectPrimitive.GroupLabel;
+
+  return <LabelPrimitive className={cx(styles.label, className)} {...props} />;
 }
+SelectLabel.displayName = 'Select.Label';
+
+export interface SelectSeparatorProps extends SelectPrimitive.Separator.Props {}
+
+export function SelectSeparator({ className, ...props }: SelectSeparatorProps) {
+  const { shouldFilter, autocomplete } = useSelectContext();
 
-export const SelectSeparator = forwardRef<HTMLDivElement, SelectSeparatorProps>(
-  ({ className, ...props }, ref) => {
-    const { shouldFilter, autocomplete } = useSelectContext();
-
-    if (shouldFilter) return null;
-
-    const SeparatorPrimitive = autocomplete
-      ? ComboboxPrimitive.Separator
-      : SelectPrimitive.Separator;
-
-    return (
-      <SeparatorPrimitive
-        ref={ref}
-        className={cx(styles.separator, className)}
-        {...props}
-      />
-    );
-  }
-);
+  if (shouldFilter) return null;
+
+  const SeparatorPrimitive = autocomplete
+    ? ComboboxPrimitive.Separator
+    : SelectPrimitive.Separator;
+
+  return (
+    <SeparatorPrimitive
+      className={cx(styles.separator, className)}
+      {...props}
+    />
+  );
+}
 SelectSeparator.displayName = 'Select.Separator';
diff --git a/packages/raystack/components/select/select-root.tsx b/packages/raystack/components/select/select-root.tsx
index 120f64a9f..039758a28 100644
--- a/packages/raystack/components/select/select-root.tsx
+++ b/packages/raystack/components/select/select-root.tsx
@@ -203,7 +203,7 @@ export const SelectRoot = (props: SelectRootProps) => {
 
   if (autocomplete) {
     return (
-      <SelectContext.Provider value={contextValue}>
+      <SelectContext value={contextValue}>
         <ComboboxPrimitive.Root
           {...commonProps}
           onInputValueChange={handleSearchValueChange}
@@ -215,15 +215,17 @@ export const SelectRoot = (props: SelectRootProps) => {
         >
           {children}
         </ComboboxPrimitive.Root>
-      </SelectContext.Provider>
+      </SelectContext>
     );
   }
 
   return (
-    <SelectContext.Provider value={contextValue}>
+    <SelectContext value={contextValue}>
       <SelectPrimitive.Root {...commonProps} required={required} name={name}>
         {children}
       </SelectPrimitive.Root>
-    </SelectContext.Provider>
+    </SelectContext>
   );
 };
+
+SelectRoot.displayName = 'Select';
diff --git a/packages/raystack/components/select/select-trigger.tsx b/packages/raystack/components/select/select-trigger.tsx
index 2d74bb936..6c75fbcaa 100644
--- a/packages/raystack/components/select/select-trigger.tsx
+++ b/packages/raystack/components/select/select-trigger.tsx
@@ -6,7 +6,7 @@ import {
 } from '@base-ui/react';
 import { ChevronDownIcon } from '@radix-ui/react-icons';
 import { cva, VariantProps } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, forwardRef, SVGAttributes } from 'react';
+import { ComponentProps, SVGAttributes } from 'react';
 import { Flex } from '../flex';
 import styles from './select.module.css';
 import { useSelectContext } from './select-root';
@@ -34,48 +34,45 @@ const trigger = cva(styles.trigger, {
 });
 
 export interface SelectTriggerProps
-  extends ComponentPropsWithoutRef<'button'>,
+  extends ComponentProps<'button'>,
     VariantProps<typeof trigger> {
   iconProps?: IconProps;
+  nativeButton?: boolean;
 }
 
-export const SelectTrigger = forwardRef<HTMLButtonElement, SelectTriggerProps>(
-  (
-    {
-      size,
-      variant,
-      className,
-      children,
-      iconProps = {},
-      'aria-label': ariaLabel,
-      ...props
-    },
-    ref
-  ) => {
-    const { multiple, autocomplete } = useSelectContext();
+export function SelectTrigger({
+  ref,
+  size,
+  variant,
+  className,
+  children,
+  iconProps = {},
+  'aria-label': ariaLabel,
+  ...props
+}: SelectTriggerProps) {
+  const { multiple, autocomplete } = useSelectContext();
 
-    const TriggerPrimitive = autocomplete
-      ? ComboboxPrimitive.Trigger
-      : SelectPrimitive.Trigger;
+  const TriggerPrimitive = autocomplete
+    ? ComboboxPrimitive.Trigger
+    : SelectPrimitive.Trigger;
 
-    return (
-      <TriggerPrimitive
-        data-multiselectable={multiple ? true : undefined}
-        ref={ref}
-        className={trigger({ size, variant, className })}
-        aria-label={ariaLabel || 'Select option'}
-        {...props}
-      >
-        <Flex className={styles.triggerContent} align='center' gap={2}>
-          {children}
-        </Flex>
-        <ChevronDownIcon
-          className={styles.triggerIcon}
-          aria-hidden='true'
-          {...iconProps}
-        />
-      </TriggerPrimitive>
-    );
-  }
-);
+  return (
+    <TriggerPrimitive
+      data-multiselectable={multiple ? true : undefined}
+      ref={ref}
+      className={trigger({ size, variant, className })}
+      aria-label={ariaLabel || 'Select option'}
+      {...props}
+    >
+      <Flex className={styles.triggerContent} align='center' gap={2}>
+        {children}
+      </Flex>
+      <ChevronDownIcon
+        className={styles.triggerIcon}
+        aria-hidden='true'
+        {...iconProps}
+      />
+    </TriggerPrimitive>
+  );
+}
 SelectTrigger.displayName = 'Select.Trigger';
diff --git a/packages/raystack/components/select/select-value.tsx b/packages/raystack/components/select/select-value.tsx
index b796eac09..11ec4ef5b 100644
--- a/packages/raystack/components/select/select-value.tsx
+++ b/packages/raystack/components/select/select-value.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { forwardRef, ReactNode, useMemo } from 'react';
+import { ComponentProps, ReactNode, useMemo } from 'react';
 import styles from './select.module.css';
 import { SelectMultipleValue } from './select-multiple-value';
 import { useSelectContext } from './select-root';
@@ -9,73 +9,75 @@ import { ItemType } from './types';
 
 type ValueType = Omit<ItemType, 'children'>;
 
-type SelectValueProps = {
+type SelectValueProps = ComponentProps<'span'> & {
   placeholder?: string;
   children?: ((value?: ValueType | ValueType[]) => ReactNode) | ReactNode;
   className?: string;
 };
 
-export const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(
-  ({ children, placeholder, className, ...props }, ref) => {
-    const { value, items, multiple } = useSelectContext();
+export function SelectValue({
+  children,
+  placeholder,
+  className,
+  ...props
+}: SelectValueProps) {
+  const { value, items, multiple } = useSelectContext();
 
-    const hasValue = multiple
-      ? Array.isArray(value) && value.length > 0
-      : !!value;
+  const hasValue = multiple
+    ? Array.isArray(value) && value.length > 0
+    : !!value;
 
-    const item = useMemo(() => {
-      if (!value) return undefined;
-      if (multiple && Array.isArray(value)) {
-        const itemValues = value.map(v => items[v]);
-        if (itemValues.length === 1) return itemValues[0];
-        return itemValues;
-      }
-      return items[value as string];
-    }, [value, items, multiple]);
-
-    if (!hasValue) {
-      return (
-        <span
-          ref={ref}
-          data-placeholder=''
-          className={cx(styles.placeholder, className)}
-          {...props}
-        >
-          {placeholder}
-        </span>
-      );
-    }
-
-    if (typeof children === 'function') {
-      return (
-        <span ref={ref} className={className} {...props}>
-          {children(item)}
-        </span>
-      );
+  const item = useMemo(() => {
+    if (!value) return undefined;
+    if (multiple && Array.isArray(value)) {
+      const itemValues = value.map(v => items[v]);
+      if (itemValues.length === 1) return itemValues[0];
+      return itemValues;
     }
+    return items[value as string];
+  }, [value, items, multiple]);
 
-    if (children) {
-      return (
-        <span ref={ref} className={className} {...props}>
-          {children}
-        </span>
-      );
-    }
+  if (!hasValue) {
+    return (
+      <span
+        data-placeholder=''
+        className={cx(styles.placeholder, className)}
+        {...props}
+      >
+        {placeholder}
+      </span>
+    );
+  }
 
-    if (Array.isArray(item)) {
-      return <SelectMultipleValue data={item} />;
-    }
+  if (typeof children === 'function') {
+    return (
+      <span className={className} {...props}>
+        {children(item)}
+      </span>
+    );
+  }
 
+  if (children) {
     return (
-      <span ref={ref} className={className} {...props}>
-        <div className={cx(styles.valueContent)}>
-          {typeof item?.children === 'string' && item?.leadingIcon && (
-            <div className={styles.itemIcon}>{item.leadingIcon}</div>
-          )}
-          {item?.children ?? value}
-        </div>
+      <span className={className} {...props}>
+        {children}
       </span>
     );
   }
-);
+
+  if (Array.isArray(item)) {
+    return <SelectMultipleValue data={item} />;
+  }
+
+  return (
+    <span className={className} {...props}>
+      <div className={cx(styles.valueContent)}>
+        {typeof item?.children === 'string' && item?.leadingIcon && (
+          <div className={styles.itemIcon}>{item.leadingIcon}</div>
+        )}
+        {item?.children ?? value}
+      </div>
+    </span>
+  );
+}
 SelectValue.displayName = 'Select.Value';
diff --git a/packages/raystack/components/side-panel/side-panel.tsx b/packages/raystack/components/side-panel/side-panel.tsx
index 471169948..073f1fa27 100644
--- a/packages/raystack/components/side-panel/side-panel.tsx
+++ b/packages/raystack/components/side-panel/side-panel.tsx
@@ -1,5 +1,5 @@
-import { cva, VariantProps } from 'class-variance-authority';
-import { Fragment, ReactNode } from 'react';
+import { cva, cx, VariantProps } from 'class-variance-authority';
+import { ComponentProps, Fragment, ReactNode } from 'react';
 import { Flex } from '../flex';
 import { Text } from '../text';
 import styles from './side-panel.module.css';
@@ -16,22 +16,21 @@ const sidePanelRoot = cva(styles['side-panel'], {
   }
 });
 
-interface SidePanelProps extends VariantProps<typeof sidePanelRoot> {
-  children: ReactNode;
-  className?: string;
-}
+interface SidePanelProps
+  extends ComponentProps<'aside'>,
+    VariantProps<typeof sidePanelRoot> {}
 
 const SidePanelRoot = ({
-  children,
   side = 'right',
-  className
+  className,
+  ...props
 }: SidePanelProps) => {
-  return (
-    <aside className={sidePanelRoot({ side, className })}>{children}</aside>
-  );
+  return <aside className={sidePanelRoot({ side, className })} {...props} />;
 };
 
-interface SidePanelHeaderProps {
+SidePanelRoot.displayName = 'SidePanel';
+
+interface SidePanelHeaderProps extends ComponentProps<'div'> {
   title: string;
   icon?: ReactNode;
   actions?: Array<ReactNode>;
@@ -42,10 +41,11 @@ const SidePanelHeader = ({
   title,
   icon,
   actions = [],
-  description
+  description,
+  ...props
 }: SidePanelHeaderProps) => {
   return (
-    <div className={styles['side-panel-header']}>
+    <div className={styles['side-panel-header']} {...props}>
       <Flex gap={3} justify='between' align='center'>
         <Flex gap={3}>
           {icon}
@@ -64,14 +64,18 @@ const SidePanelHeader = ({
   );
 };
 
-interface SidePanelSectionProps {
-  children: ReactNode;
-}
+SidePanelHeader.displayName = 'SidePanel.Header';
 
-const SidePanelSection = ({ children }: SidePanelSectionProps) => {
-  return <div className={styles['side-panel-section']}>{children}</div>;
+interface SidePanelSectionProps extends ComponentProps<'div'> {}
+
+const SidePanelSection = ({ className, ...props }: SidePanelSectionProps) => {
+  return (
+    <div className={cx(styles['side-panel-section'], className)} {...props} />
+  );
 };
 
+SidePanelSection.displayName = 'SidePanel.Section';
+
 export const SidePanel = Object.assign(SidePanelRoot, {
   Header: SidePanelHeader,
   Section: SidePanelSection
diff --git a/packages/raystack/components/sidebar/sidebar-item.tsx b/packages/raystack/components/sidebar/sidebar-item.tsx
index 0dac1fab0..65c571908 100644
--- a/packages/raystack/components/sidebar/sidebar-item.tsx
+++ b/packages/raystack/components/sidebar/sidebar-item.tsx
@@ -2,9 +2,8 @@
 
 import { cx } from 'class-variance-authority';
 import {
-  ComponentPropsWithoutRef,
+  ComponentProps,
   cloneElement,
-  forwardRef,
   ReactElement,
   ReactNode,
   useContext
@@ -15,7 +14,7 @@ import { Tooltip } from '../tooltip';
 import styles from './sidebar.module.css';
 import { SidebarContext } from './sidebar-root';
 
-export interface SidebarItemProps extends ComponentPropsWithoutRef<'a'> {
+export interface SidebarItemProps extends ComponentProps<'a'> {
   leadingIcon?: ReactNode;
   active?: boolean;
   disabled?: boolean;
@@ -27,84 +26,77 @@ export interface SidebarItemProps extends ComponentPropsWithoutRef<'a'> {
   };
 }
 
-export const SidebarItem = forwardRef<HTMLAnchorElement, SidebarItemProps>(
-  (
+export function SidebarItem({
+  classNames,
+  leadingIcon,
+  children,
+  active,
+  disabled,
+  as = <a />,
+  ...props
+}: SidebarItemProps) {
+  const { isCollapsed, hideCollapsedItemTooltip } = useContext(SidebarContext);
+
+  const shouldShowFallback =
+    leadingIcon == undefined &&
+    isCollapsed &&
+    typeof children === 'string' &&
+    children.length > 0;
+
+  const iconProps = {
+    align: 'center',
+    gap: 3,
+    className: cx(styles['nav-leading-icon'], classNames?.leadingIcon),
+    'aria-hidden': true
+  } as const;
+
+  const content = cloneElement(
+    as,
     {
-      classNames,
-      leadingIcon,
-      children,
-      active,
-      disabled,
-      as = <a />,
+      className: cx(styles['nav-item'], classNames?.root),
+      'data-active': active,
+      'data-disabled': disabled,
+      role: 'listitem',
+      'aria-current': active ? 'page' : undefined,
+      'aria-disabled': disabled,
+      ...(isCollapsed && typeof children === 'string'
+        ? { 'aria-label': children }
+        : {}),
       ...props
     },
-    ref
-  ) => {
-    const { isCollapsed, hideCollapsedItemTooltip } =
-      useContext(SidebarContext);
-
-    const shouldShowFallback =
-      leadingIcon == undefined &&
-      isCollapsed &&
-      typeof children === 'string' &&
-      children.length > 0;
-
-    const iconProps = {
-      align: 'center',
-      gap: 3,
-      className: cx(styles['nav-leading-icon'], classNames?.leadingIcon),
-      'aria-hidden': true
-    } as const;
+    <>
+      {shouldShowFallback ? (
+        <Flex {...iconProps}>
+          <Avatar
+            size={1}
+            variant='soft'
+            color='neutral'
+            fallback={children[0].toUpperCase()}
+            className={styles['nav-fallback-avatar']}
+          />
+        </Flex>
+      ) : null}
+      {!shouldShowFallback && leadingIcon ? (
+        <Flex {...iconProps}>{leadingIcon}</Flex>
+      ) : null}
+      {!isCollapsed && (
+        <span className={cx(styles['nav-text'], classNames?.text)}>
+          {children}
+        </span>
+      )}
+    </>
+  );
 
-    const content = cloneElement(
-      as,
-      {
-        ref,
-        className: cx(styles['nav-item'], classNames?.root),
-        'data-active': active,
-        'data-disabled': disabled,
-        role: 'listitem',
-        'aria-current': active ? 'page' : undefined,
-        'aria-disabled': disabled,
-        ...(isCollapsed && typeof children === 'string'
-          ? { 'aria-label': children }
-          : {}),
-        ...props
-      },
-      <>
-        {shouldShowFallback ? (
-          <Flex {...iconProps}>
-            <Avatar
-              size={1}
-              variant='soft'
-              color='neutral'
-              fallback={children[0].toUpperCase()}
-              className={styles['nav-fallback-avatar']}
-            />
-          </Flex>
-        ) : null}
-        {!shouldShowFallback && leadingIcon ? (
-          <Flex {...iconProps}>{leadingIcon}</Flex>
-        ) : null}
-        {!isCollapsed && (
-          <span className={cx(styles['nav-text'], classNames?.text)}>
-            {children}
-          </span>
-        )}
-      </>
+  if (isCollapsed && !hideCollapsedItemTooltip) {
+    return (
+      <Tooltip>
+        <Tooltip.Trigger render={content} />
+        <Tooltip.Content side='right'>{children}</Tooltip.Content>
+      </Tooltip>
     );
-
-    if (isCollapsed && !hideCollapsedItemTooltip) {
-      return (
-        <Tooltip>
-          <Tooltip.Trigger render={content} />
-          <Tooltip.Content side='right'>{children}</Tooltip.Content>
-        </Tooltip>
-      );
-    }
-
-    return content;
   }
-);
+
+  return content;
+}
 
 SidebarItem.displayName = 'Sidebar.Item';
diff --git a/packages/raystack/components/sidebar/sidebar-main.tsx b/packages/raystack/components/sidebar/sidebar-main.tsx
index c1a1d8767..1eaf5e7cb 100644
--- a/packages/raystack/components/sidebar/sidebar-main.tsx
+++ b/packages/raystack/components/sidebar/sidebar-main.tsx
@@ -1,24 +1,23 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, forwardRef } from 'react';
+import { ComponentProps } from 'react';
 import { Flex } from '../flex';
 import styles from './sidebar.module.css';
 
-export const SidebarMain = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<'div'>
->(({ className, children, ...props }, ref) => (
-  <Flex
-    ref={ref}
-    className={cx(styles.main, className)}
-    direction='column'
-    role='group'
-    aria-label='Main navigation'
-    {...props}
-  >
-    {children}
-  </Flex>
-));
+export function SidebarMain({
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      className={cx(styles.main, className)}
+      direction='column'
+      role='group'
+      aria-label='Main navigation'
+      {...props}
+    />
+  );
+}
 
 SidebarMain.displayName = 'Sidebar.Main';
diff --git a/packages/raystack/components/sidebar/sidebar-misc.tsx b/packages/raystack/components/sidebar/sidebar-misc.tsx
index 981860802..9c4b182e5 100644
--- a/packages/raystack/components/sidebar/sidebar-misc.tsx
+++ b/packages/raystack/components/sidebar/sidebar-misc.tsx
@@ -1,45 +1,42 @@
 'use client';
 
 import { cx } from 'class-variance-authority';
-import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import { Flex } from '../flex';
 import styles from './sidebar.module.css';
 
-export const SidebarHeader = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<'div'>
->(({ className, children, ...props }, ref) => (
-  <Flex
-    align='center'
-    ref={ref}
-    className={cx(styles.header, className)}
-    role='banner'
-    {...props}
-  >
-    {children}
-  </Flex>
-));
+export function SidebarHeader({
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      align='center'
+      className={cx(styles.header, className)}
+      role='banner'
+      {...props}
+    />
+  );
+}
 SidebarHeader.displayName = 'Sidebar.Header';
 
-export const SidebarFooter = forwardRef<
-  HTMLDivElement,
-  ComponentPropsWithoutRef<'div'>
->(({ className, children, ...props }, ref) => (
-  <Flex
-    ref={ref}
-    className={cx(styles.footer, className)}
-    direction='column'
-    role='list'
-    aria-label='Footer navigation'
-    {...props}
-  >
-    {children}
-  </Flex>
-));
+export function SidebarFooter({
+  className,
+  ...props
+}: ComponentProps<typeof Flex>) {
+  return (
+    <Flex
+      className={cx(styles.footer, className)}
+      direction='column'
+      role='list'
+      aria-label='Footer navigation'
+      {...props}
+    />
+  );
+}
 SidebarFooter.displayName = 'Sidebar.Footer';
 
-export interface SidebarNavigationGroupProps
-  extends ComponentPropsWithoutRef<'div'> {
+export interface SidebarNavigationGroupProps extends ComponentProps<'section'> {
   label: string;
   leadingIcon?: ReactNode;
   classNames?: {
@@ -50,38 +47,43 @@ export interface SidebarNavigationGroupProps
   };
 }
 
-export const SidebarNavigationGroup = forwardRef<
-  HTMLElement,
-  SidebarNavigationGroupProps
->(({ className, label, leadingIcon, classNames, children, ...props }, ref) => (
-  <section
-    ref={ref}
-    className={cx(styles['nav-group'], className)}
-    aria-label={label}
-    {...props}
-  >
-    <Flex
-      align='center'
-      gap={3}
-      className={cx(styles['nav-group-header'], classNames?.header)}
+export function SidebarNavigationGroup({
+  className,
+  label,
+  leadingIcon,
+  classNames,
+  children,
+  ...props
+}: SidebarNavigationGroupProps) {
+  return (
+    <section
+      className={cx(styles['nav-group'], className)}
+      aria-label={label}
+      {...props}
     >
-      {leadingIcon && (
-        <span className={cx(styles['nav-leading-icon'], classNames?.icon)}>
-          {leadingIcon}
+      <Flex
+        align='center'
+        gap={3}
+        className={cx(styles['nav-group-header'], classNames?.header)}
+      >
+        {leadingIcon && (
+          <span className={cx(styles['nav-leading-icon'], classNames?.icon)}>
+            {leadingIcon}
+          </span>
+        )}
+        <span className={cx(styles['nav-group-label'], classNames?.label)}>
+          {label}
         </span>
-      )}
-      <span className={cx(styles['nav-group-label'], classNames?.label)}>
-        {label}
-      </span>
-    </Flex>
-    <Flex
-      direction='column'
-      className={cx(styles['nav-group-items'], classNames?.items)}
-      role='list'
-    >
-      {children}
-    </Flex>
-  </section>
-));
+      </Flex>
+      <Flex
+        direction='column'
+        className={cx(styles['nav-group-items'], classNames?.items)}
+        role='list'
+      >
+        {children}
+      </Flex>
+    </section>
+  );
+}
 
 SidebarNavigationGroup.displayName = 'Sidebar.Group';
diff --git a/packages/raystack/components/sidebar/sidebar-root.tsx b/packages/raystack/components/sidebar/sidebar-root.tsx
index b30915ebf..1438656a0 100644
--- a/packages/raystack/components/sidebar/sidebar-root.tsx
+++ b/packages/raystack/components/sidebar/sidebar-root.tsx
@@ -2,9 +2,8 @@
 
 import { cx } from 'class-variance-authority';
 import {
-  ComponentPropsWithoutRef,
+  ComponentProps,
   createContext,
-  forwardRef,
   ReactNode,
   useCallback,
   useState
@@ -21,7 +20,7 @@ export const SidebarContext = createContext<SidebarContextValue>({
   isCollapsed: false
 });
 
-export interface SidebarRootProps extends ComponentPropsWithoutRef<'aside'> {
+export interface SidebarRootProps extends ComponentProps<'aside'> {
   position?: 'left' | 'right';
   hideCollapsedItemTooltip?: boolean;
   collapsible?: boolean;
@@ -31,82 +30,74 @@ export interface SidebarRootProps extends ComponentPropsWithoutRef<'aside'> {
   onOpenChange?: (open: boolean) => void;
 }
 
-export const SidebarRoot = forwardRef<HTMLElement, SidebarRootProps>(
-  (
-    {
-      className,
-      position = 'left',
-      open: providedOpen,
-      onOpenChange,
-      hideCollapsedItemTooltip,
-      collapsible = true,
-      tooltipMessage,
-      defaultOpen = true,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [internalOpen, setInternalOpen] = useState(defaultOpen);
-    const open = providedOpen ?? internalOpen;
+export function SidebarRoot({
+  className,
+  position = 'left',
+  open: providedOpen,
+  onOpenChange,
+  hideCollapsedItemTooltip,
+  collapsible = true,
+  tooltipMessage,
+  defaultOpen = true,
+  children,
+  ...props
+}: SidebarRootProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = providedOpen ?? internalOpen;
 
-    const handleOpenChange = useCallback(
-      (value: boolean) => {
-        setInternalOpen(value);
-        onOpenChange?.(value);
-      },
-      [onOpenChange]
-    );
+  const handleOpenChange = useCallback(
+    (value: boolean) => {
+      setInternalOpen(value);
+      onOpenChange?.(value);
+    },
+    [onOpenChange]
+  );
 
-    return (
-      <SidebarContext.Provider
-        value={{ isCollapsed: !open, hideCollapsedItemTooltip }}
+  return (
+    <SidebarContext value={{ isCollapsed: !open, hideCollapsedItemTooltip }}>
+      <aside
+        className={cx(styles.root, className)}
+        data-position={position}
+        data-open={open ? '' : undefined}
+        data-closed={!open ? '' : undefined}
+        data-collapse-disabled={!collapsible ? '' : undefined}
+        aria-label='Navigation Sidebar'
+        aria-expanded={open}
+        role='navigation'
+        {...props}
       >
-        <aside
-          ref={ref}
-          className={cx(styles.root, className)}
-          data-position={position}
-          data-open={open ? '' : undefined}
-          data-closed={!open ? '' : undefined}
-          data-collapse-disabled={!collapsible ? '' : undefined}
-          aria-label='Navigation Sidebar'
-          aria-expanded={open}
-          role='navigation'
-          {...props}
-        >
-          {collapsible && (
-            <Tooltip trackCursorAxis='y'>
-              <Tooltip.Trigger
-                render={
-                  <div
-                    className={styles.resizeHandle}
-                    onClick={() => handleOpenChange(!open)}
-                    role='button'
-                    tabIndex={0}
-                    aria-label={open ? 'Collapse sidebar' : 'Expand sidebar'}
-                    onKeyDown={e => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        handleOpenChange(!open);
-                      }
-                    }}
-                  />
-                }
-              />
-              <Tooltip.Content
-                side={position === 'left' ? 'right' : 'left'}
-                sideOffset={10}
-              >
-                {tooltipMessage ??
-                  (open ? 'Click to collapse' : 'Click to expand')}
-              </Tooltip.Content>
-            </Tooltip>
-          )}
-          {children}
-        </aside>
-      </SidebarContext.Provider>
-    );
-  }
-);
+        {collapsible && (
+          <Tooltip trackCursorAxis='y'>
+            <Tooltip.Trigger
+              render={
+                <div
+                  className={styles.resizeHandle}
+                  onClick={() => handleOpenChange(!open)}
+                  role='button'
+                  tabIndex={0}
+                  aria-label={open ? 'Collapse sidebar' : 'Expand sidebar'}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      handleOpenChange(!open);
+                    }
+                  }}
+                />
+              }
+            />
+            <Tooltip.Content
+              side={position === 'left' ? 'right' : 'left'}
+              sideOffset={10}
+            >
+              {tooltipMessage ??
+                (open ? 'Click to collapse' : 'Click to expand')}
+            </Tooltip.Content>
+          </Tooltip>
+        )}
+        {children}
+      </aside>
+    </SidebarContext>
+  );
+}
 
 SidebarRoot.displayName = 'Sidebar';