diff --git a/apps/www/src/content/docs/components/button/props.ts b/apps/www/src/content/docs/components/button/props.ts
index 6d6fabcad..682e543c2 100644
--- a/apps/www/src/content/docs/components/button/props.ts
+++ b/apps/www/src/content/docs/components/button/props.ts
@@ -1,3 +1,5 @@
+import { ButtonHTMLAttributes } from 'react';
+
 export type ButtonProps = {
   /**
    * Visual style variant
@@ -41,8 +43,27 @@ export type ButtonProps = {
   /** Custom width for the button */
   width?: string | number;
 
-  /** Boolean to merge props onto child element */
-  asChild?: boolean;
+  /**
+   * Whether the component renders a native <button> element when replacing it via the render prop. Set to false if the rendered element is not a button (e.g. <div>).
+   * Defaults to false when render prop is provided.
+   */
+  nativeButton?: boolean;
+
+  /**
+   * Whether the button should be focusable when disabled.
+   * Defaults to true when loading is true.
+   */
+  focusableWhenDisabled?: boolean;
+
+  /**
+   * Allows rendering the button as a different element.
+   * Accepts a React element or a function that receives props and returns an element.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?:
+    | React.ReactElement<ButtonHTMLAttributes<HTMLButtonElement>>
+    | ((props: ButtonHTMLAttributes<HTMLButtonElement>) => React.ReactElement);
 
   /** Additional CSS class names */
   className?: string;
diff --git a/apps/www/src/content/docs/components/flex/props.ts b/apps/www/src/content/docs/components/flex/props.ts
index c95e29b9e..580eda165 100644
--- a/apps/www/src/content/docs/components/flex/props.ts
+++ b/apps/www/src/content/docs/components/flex/props.ts
@@ -14,6 +14,21 @@ export interface FlexProps {
   /** Sets how flex items are placed in the flex container defining the main axis and the direction (normal or reversed) */
   direction?: 'row' | 'rowReverse' | 'column' | 'columnReverse';
 
+  /**
+   * Sets the width of the flex container.
+   */
+  width?: 'full';
+
+  /**
+   * Allows rendering the flex container as a different element.
+   * Accepts a React element or a function that receives props and returns an element.
+   *
+   * @remarks `ReactElement | function`
+   */
+  render?:
+    | React.ReactElement
+    | ((props: React.HTMLAttributes<HTMLDivElement>) => React.ReactElement);
+
   /** Custom CSS class names */
   className?: string;
 }
diff --git a/apps/www/src/content/docs/components/grid/props.ts b/apps/www/src/content/docs/components/grid/props.ts
index a172dcd17..4b18c05c0 100644
--- a/apps/www/src/content/docs/components/grid/props.ts
+++ b/apps/www/src/content/docs/components/grid/props.ts
@@ -95,10 +95,14 @@ export interface GridProps {
   inline?: boolean;
 
   /**
-   * Merges the grid's props with its child component.
-   * Useful for composition with other components.
+   * Allows rendering the grid as a different element.
+   * Accepts a React element or a function that receives props and returns an element.
+   *
+   * @remarks `ReactElement | function`
    */
-  asChild?: boolean;
+  render?:
+    | React.ReactElement
+    | ((props: React.HTMLAttributes<HTMLDivElement>) => React.ReactElement);
 }
 
 export interface GridItemProps {
@@ -149,8 +153,12 @@ export interface GridItemProps {
   alignSelf?: 'start' | 'end' | 'center' | 'stretch';
 
   /**
-   * Merges the grid item's props with its child component.
-   * Useful for composition with other components.
+   * Allows rendering the grid item as a different element.
+   * Accepts a React element or a function that receives props and returns an element.
+   *
+   * @remarks `ReactElement | function`
    */
-  asChild?: boolean;
+  render?:
+    | React.ReactElement
+    | ((props: React.HTMLAttributes<HTMLDivElement>) => React.ReactElement);
 }
diff --git a/packages/raystack/components/button/button.module.css b/packages/raystack/components/button/button.module.css
index f1bd1dde8..3fde77f6d 100644
--- a/packages/raystack/components/button/button.module.css
+++ b/packages/raystack/components/button/button.module.css
@@ -32,6 +32,7 @@
 .button-disabled {
   opacity: 0.5;
   cursor: not-allowed;
+  pointer-events: initial;
 }
 
 .button:disabled:hover,
diff --git a/packages/raystack/components/button/button.tsx b/packages/raystack/components/button/button.tsx
index f74fd47f6..25914fa5f 100644
--- a/packages/raystack/components/button/button.tsx
+++ b/packages/raystack/components/button/button.tsx
@@ -1,11 +1,6 @@
-import { type VariantProps, cva } from 'class-variance-authority';
-import { Slot } from 'radix-ui';
-import {
-  ButtonHTMLAttributes,
-  PropsWithChildren,
-  ReactNode,
-  forwardRef
-} from 'react';
+import { Button as ButtonPrimitive } from '@base-ui/react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { ElementRef, forwardRef, PropsWithChildren, ReactNode } from 'react';
 
 import { Spinner } from '../spinner';
 import styles from './button.module.css';
@@ -130,8 +125,7 @@ const getLoaderOnlyClass = (size: 'small' | 'normal' | null) =>
     : styles['loader-only-button-normal'];
 
 type ButtonProps = PropsWithChildren<VariantProps<typeof button>> &
-  ButtonHTMLAttributes<HTMLButtonElement> & {
-    asChild?: boolean;
+  ButtonPrimitive.Props & {
     loading?: boolean;
     loaderText?: ReactNode;
     leadingIcon?: ReactNode;
@@ -141,14 +135,16 @@ type ButtonProps = PropsWithChildren<VariantProps<typeof button>> &
     style?: React.CSSProperties;
   };
 
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+export const Button = forwardRef<
+  ElementRef<typeof ButtonPrimitive>,
+  ButtonProps
+>(
   (
     {
       className,
       variant = 'solid',
       color = 'accent',
       size = 'normal',
-      asChild = false,
       disabled,
       loading,
       loaderText,
@@ -158,21 +154,24 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       width,
       style = {},
       children,
+      render,
       ...props
     },
     ref
   ) => {
-    const Comp = asChild ? Slot.Root : 'button';
     const isLoaderOnly = loading && !loaderText;
     const widthStyle = { maxWidth, width };
     const buttonStyle = { ...widthStyle, ...style };
 
     return (
-      <Comp
+      <ButtonPrimitive
         className={`${button({ variant, size, color, disabled, loading, className })} ${isLoaderOnly ? getLoaderOnlyClass(size) : ''}`}
         ref={ref}
         disabled={disabled}
         style={buttonStyle}
+        render={render}
+        nativeButton={!render}
+        focusableWhenDisabled={loading}
         {...props}
       >
         {loading ? (
@@ -197,7 +196,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             )}
           </>
         )}
-      </Comp>
+      </ButtonPrimitive>
     );
   }
 );
diff --git a/packages/raystack/components/flex/flex.tsx b/packages/raystack/components/flex/flex.tsx
index 5724580aa..e2a3acd8d 100644
--- a/packages/raystack/components/flex/flex.tsx
+++ b/packages/raystack/components/flex/flex.tsx
@@ -1,6 +1,6 @@
-import { VariantProps, cva } from 'class-variance-authority';
-import { HTMLAttributes, PropsWithChildren, forwardRef } from 'react';
-
+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, {
@@ -57,13 +57,11 @@ const flex = cva(styles.flex, {
   }
 });
 
-type BoxProps = PropsWithChildren<VariantProps<typeof flex>> &
-  HTMLAttributes<HTMLDivElement>;
+type BoxProps = VariantProps<typeof flex> & useRender.ComponentProps<'div'>;
 
 export const Flex = forwardRef<HTMLDivElement, BoxProps>(
   (
     {
-      children,
       direction,
       align,
       justify,
@@ -71,26 +69,30 @@ export const Flex = forwardRef<HTMLDivElement, BoxProps>(
       gap,
       className,
       width,
+      render,
       ...props
     },
     ref
   ) => {
-    return (
-      <div
-        className={flex({
-          direction,
-          align,
-          justify,
-          wrap,
-          gap,
-          className,
-          width
-        })}
-        {...props}
-        ref={ref}
-      >
-        {children}
-      </div>
-    );
+    const flexProps = {
+      className: flex({
+        direction,
+        align,
+        justify,
+        wrap,
+        gap,
+        className,
+        width
+      })
+    };
+
+    const element = useRender({
+      defaultTagName: 'div',
+      ref,
+      render,
+      props: mergeProps<'div'>(flexProps, props)
+    });
+
+    return element;
   }
 );
diff --git a/packages/raystack/components/grid/grid-item.tsx b/packages/raystack/components/grid/grid-item.tsx
index 1b2ca489f..18cc77d12 100644
--- a/packages/raystack/components/grid/grid-item.tsx
+++ b/packages/raystack/components/grid/grid-item.tsx
@@ -1,8 +1,8 @@
-import { Slot } from 'radix-ui';
-import { HTMLAttributes, forwardRef } from 'react';
+import { mergeProps, useRender } from '@base-ui/react';
+import { forwardRef } from 'react';
 import { AlignType } from './types';
 
-type GridItemProps = HTMLAttributes<HTMLDivElement> & {
+type GridItemProps = useRender.ComponentProps<'div'> & {
   area?: string;
   colStart?: number | string;
   colEnd?: number | string;
@@ -12,7 +12,6 @@ type GridItemProps = HTMLAttributes<HTMLDivElement> & {
   rowSpan?: number | string;
   justifySelf?: AlignType;
   alignSelf?: AlignType;
-  asChild?: boolean;
 };
 
 export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
@@ -28,31 +27,32 @@ export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
       justifySelf,
       alignSelf,
       style,
-      asChild,
+      render,
       ...props
     },
     ref
   ) => {
-    const Comp = asChild ? Slot.Root : 'div';
+    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)
+    });
 
-    return (
-      <Comp
-        ref={ref}
-        style={{
-          gridArea: area,
-          gridColumnStart: colStart,
-          gridColumnEnd: colEnd,
-          gridRowStart: rowStart,
-          gridRowEnd: rowEnd,
-          gridColumn: colSpan ? `span ${colSpan}` : undefined,
-          gridRow: rowSpan ? `span ${rowSpan}` : undefined,
-          justifySelf,
-          alignSelf,
-          ...style
-        }}
-        {...props}
-      />
-    );
+    return element;
   }
 );
 
diff --git a/packages/raystack/components/grid/grid.tsx b/packages/raystack/components/grid/grid.tsx
index cd7649dbb..77cc55b88 100644
--- a/packages/raystack/components/grid/grid.tsx
+++ b/packages/raystack/components/grid/grid.tsx
@@ -1,5 +1,5 @@
-import { Slot } from 'radix-ui';
-import { HTMLAttributes, forwardRef, useMemo } from 'react';
+import { mergeProps, useRender } from '@base-ui/react';
+import { forwardRef, useMemo } from 'react';
 import { AlignExtendedType, AlignType } from './types';
 
 const GAPS = {
@@ -12,7 +12,7 @@ const GAPS = {
 
 type GapType = keyof typeof GAPS;
 
-type GridProps = HTMLAttributes<HTMLDivElement> & {
+type GridProps = useRender.ComponentProps<'div'> & {
   /**
    * Supports CSS Grid template areas syntax.
    *
@@ -54,7 +54,6 @@ type GridProps = HTMLAttributes<HTMLDivElement> & {
   justifyContent?: AlignExtendedType;
   alignContent?: AlignExtendedType;
   inline?: boolean;
-  asChild?: boolean;
 };
 
 export const Grid = forwardRef<HTMLDivElement, GridProps>(
@@ -75,7 +74,7 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       alignContent,
       inline = false,
       style = {},
-      asChild,
+      render,
       ...props
     },
     ref
@@ -95,31 +94,32 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
       return templateAreas;
     }, [templateAreas]);
 
-    const Comp = asChild ? Slot.Root : 'div';
+    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)
+    });
 
-    return (
-      <Comp
-        ref={ref}
-        style={{
-          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
-        }}
-        {...props}
-      />
-    );
+    return element;
   }
 );