diff --git a/packages/core/src/components/non-ideal-state/nonIdealState.tsx b/packages/core/src/components/non-ideal-state/nonIdealState.tsx
index 3e3b588259..0bf7c5e5fe 100644
--- a/packages/core/src/components/non-ideal-state/nonIdealState.tsx
+++ b/packages/core/src/components/non-ideal-state/nonIdealState.tsx
@@ -19,7 +19,7 @@ import * as React from "react";
 
 import { type IconName, IconSize } from "@blueprintjs/icons";
 
-import { AbstractPureComponent, Classes, DISPLAYNAME_PREFIX, type MaybeElement, type Props } from "../../common";
+import { Classes, DISPLAYNAME_PREFIX, type MaybeElement, type Props } from "../../common";
 import { ensureElement } from "../../common/utils";
 import { H4 } from "../html/html";
 import { Icon } from "../icon/icon";
@@ -79,34 +79,20 @@ export interface NonIdealStateProps extends Props {
  *
  * @see https://blueprintjs.com/docs/#core/components/non-ideal-state
  */
-export class NonIdealState extends AbstractPureComponent<NonIdealStateProps> {
-    public static displayName = `${DISPLAYNAME_PREFIX}.NonIdealState`;
-
-    public static defaultProps: Partial<NonIdealStateProps> = {
-        iconMuted: true,
-        iconSize: NonIdealStateIconSize.STANDARD,
-        layout: "vertical",
-    };
-
-    public render() {
-        const { action, children, className, layout } = this.props;
-
+export const NonIdealState: React.FC<NonIdealStateProps> = ({
+    action,
+    children,
+    className,
+    description,
+    icon,
+    iconMuted = true,
+    iconSize = NonIdealStateIconSize.STANDARD,
+    layout = "vertical",
+    title,
+}) => {
+    const maybeRenderVisual = () => {
         return (
-            <div className={classNames(Classes.NON_IDEAL_STATE, `${Classes.NON_IDEAL_STATE}-${layout}`, className)}>
-                {this.maybeRenderVisual()}
-                {this.maybeRenderText()}
-                {action}
-                {children}
-            </div>
-        );
-    }
-
-    private maybeRenderVisual() {
-        const { icon, iconMuted, iconSize } = this.props;
-        if (icon == null) {
-            return undefined;
-        } else {
-            return (
+            !!icon && (
                 <div
                     className={Classes.NON_IDEAL_STATE_VISUAL}
                     style={{ fontSize: `${iconSize}px`, lineHeight: `${iconSize}px` }}
@@ -119,21 +105,30 @@ export class NonIdealState extends AbstractPureComponent<NonIdealStateProps> {
                         tabIndex={-1}
                     />
                 </div>
-            );
-        }
-    }
-
-    private maybeRenderText() {
-        const { description, title } = this.props;
-        if (title == null && description == null) {
-            return undefined;
-        } else {
-            return (
+            )
+        );
+    };
+
+    const maybeRenderText = () => {
+        return (
+            !!title &&
+            !!description && (
                 <div className={Classes.NON_IDEAL_STATE_TEXT}>
                     {title && <H4>{title}</H4>}
                     {description && ensureElement(description, "div")}
                 </div>
-            );
-        }
-    }
-}
+            )
+        );
+    };
+
+    return (
+        <div className={classNames(Classes.NON_IDEAL_STATE, `${Classes.NON_IDEAL_STATE}-${layout}`, className)}>
+            {maybeRenderVisual()}
+            {maybeRenderText()}
+            {action}
+            {children}
+        </div>
+    );
+};
+
+NonIdealState.displayName = `${DISPLAYNAME_PREFIX}.NonIdealState`;