diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 0844f43a9d062..3ba8e119f0aa5 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "type": "module",
   "exports": {
     "./*": {
diff --git a/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css b/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css
new file mode 100644
index 0000000000000..da2da6867d349
--- /dev/null
+++ b/packages/ui-components/src/Common/Signature/SignatureHeader/index.module.css
@@ -0,0 +1,45 @@
+@reference "../../../styles/index.css";
+
+.header {
+  @apply flex
+    items-start
+    gap-1;
+}
+
+.attribute {
+  @apply font-ibm-plex-mono
+    inline-flex
+    flex-wrap
+    items-center
+    gap-1
+    text-sm
+    font-semibold;
+
+  .longName {
+    @apply break-all
+      sm:break-keep;
+  }
+
+  &.return {
+    @apply font-open-sans
+      shrink-0;
+
+    svg {
+      @apply size-4;
+    }
+  }
+}
+
+.type {
+  @apply font-ibm-plex-mono
+    inline-flex
+    flex-wrap
+    gap-0.5
+    text-sm
+    break-all;
+
+  a {
+    @apply text-green-700
+      dark:text-green-400;
+  }
+}
diff --git a/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx b/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx
new file mode 100644
index 0000000000000..ee8040b13df0c
--- /dev/null
+++ b/packages/ui-components/src/Common/Signature/SignatureHeader/index.tsx
@@ -0,0 +1,51 @@
+import { ArrowTurnDownLeftIcon } from '@heroicons/react/24/outline';
+import classNames from 'classnames';
+
+import type Signature from '#ui/Common/Signature';
+import type { ComponentProps, FC } from 'react';
+
+import styles from './index.module.css';
+
+type SignatureHeaderProps = { isReturn?: boolean } & Omit<
+  ComponentProps<typeof Signature>,
+  'title' | 'description'
+>;
+
+const SignatureHeader: FC<SignatureHeaderProps> = ({
+  name,
+  type,
+  optional,
+  isReturn = false,
+}) => (
+  <div className={styles.header}>
+    {name && (
+      <span
+        className={classNames(styles.attribute, {
+          [styles.return]: isReturn,
+        })}
+      >
+        {isReturn && <ArrowTurnDownLeftIcon />}
+        <span
+          className={classNames({
+            [styles.longName]: name.length > 16,
+          })}
+        >
+          {name}:
+          {optional && (
+            <span
+              role="img"
+              aria-label="Optional"
+              data-tooltip="Optional"
+              tabIndex={0}
+            >
+              ?
+            </span>
+          )}
+        </span>
+      </span>
+    )}
+    {type && <span className={styles.type}>{type}</span>}
+  </div>
+);
+
+export default SignatureHeader;
diff --git a/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css b/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css
new file mode 100644
index 0000000000000..d1554950a9370
--- /dev/null
+++ b/packages/ui-components/src/Common/Signature/SignatureItem/index.module.css
@@ -0,0 +1,50 @@
+@reference "../../../styles/index.css";
+
+.item {
+  @apply flex
+    flex-col
+    gap-1;
+}
+
+.return {
+  @apply rounded-sm
+    bg-green-100
+    px-4
+    py-3
+    dark:bg-neutral-900/40;
+}
+
+.children {
+  @apply relative
+    flex
+    flex-col
+    rounded-sm
+    border
+    border-neutral-200
+    dark:border-neutral-900;
+
+  &:has(> .return:only-child) {
+    @apply border-0;
+  }
+
+  &:not(:has(.return:only-child)) .return {
+    @apply mx-4
+      mb-3;
+  }
+
+  .item:not(.return) {
+    @apply mx-4
+      py-3;
+  }
+
+  .item:not(:last-child, :has(+ .return)) {
+    @apply border-b
+      border-neutral-200
+      dark:border-neutral-900;
+  }
+}
+
+.description {
+  @apply text-sm
+    break-all;
+}
diff --git a/packages/ui-components/src/Common/Signature/SignatureItem/index.tsx b/packages/ui-components/src/Common/Signature/SignatureItem/index.tsx
new file mode 100644
index 0000000000000..df079276d70dd
--- /dev/null
+++ b/packages/ui-components/src/Common/Signature/SignatureItem/index.tsx
@@ -0,0 +1,36 @@
+import classNames from 'classnames';
+
+import SignatureHeader from '#ui/Common/Signature/SignatureHeader';
+
+import type Signature from '#ui/Common/Signature';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type SignatureItemProps = Omit<ComponentProps<typeof Signature>, 'title'>;
+
+const SignatureItem: FC<PropsWithChildren<SignatureItemProps>> = ({
+  kind = 'default',
+  name,
+  type,
+  description,
+  optional,
+  children,
+}) => (
+  <div
+    className={classNames(styles.item, {
+      [styles.return]: kind === 'return',
+    })}
+  >
+    <SignatureHeader
+      name={name}
+      type={type}
+      optional={optional}
+      isReturn={kind === 'return'}
+    />
+    {description && <div className={styles.description}>{description}</div>}
+    {children && <div className={styles.children}>{children}</div>}
+  </div>
+);
+
+export default SignatureItem;
diff --git a/packages/ui-components/src/Common/Signature/SignatureRoot/index.module.css b/packages/ui-components/src/Common/Signature/SignatureRoot/index.module.css
new file mode 100644
index 0000000000000..15d730563dc28
--- /dev/null
+++ b/packages/ui-components/src/Common/Signature/SignatureRoot/index.module.css
@@ -0,0 +1,24 @@
+@reference "../../../styles/index.css";
+
+.container {
+  @apply flex
+    flex-col
+    gap-3;
+}
+
+.title {
+  @apply text-base
+    font-semibold;
+}
+
+.root {
+  @apply flex
+    flex-col
+    gap-4
+    rounded-sm
+    border
+    border-neutral-200
+    px-4
+    py-3
+    dark:border-neutral-900;
+}
diff --git a/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx b/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx
new file mode 100644
index 0000000000000..79e3f145b0d84
--- /dev/null
+++ b/packages/ui-components/src/Common/Signature/SignatureRoot/index.tsx
@@ -0,0 +1,26 @@
+import { useId } from 'react';
+
+import type Signature from '#ui/Common/Signature';
+import type { ComponentProps, FC, PropsWithChildren } from 'react';
+
+import styles from './index.module.css';
+
+type SignatureRootProps = Pick<ComponentProps<typeof Signature>, 'title'>;
+
+const SignatureRoot: FC<PropsWithChildren<SignatureRootProps>> = ({
+  title,
+  children,
+}) => {
+  const titleId = useId();
+
+  return (
+    <section className={styles.container} aria-labelledby={titleId}>
+      <div className={styles.title} id={titleId}>
+        {title}
+      </div>
+      <div className={styles.root}>{children}</div>
+    </section>
+  );
+};
+
+export default SignatureRoot;
diff --git a/packages/ui-components/src/Common/Signature/index.stories.tsx b/packages/ui-components/src/Common/Signature/index.stories.tsx
new file mode 100644
index 0000000000000..686a11779b58b
--- /dev/null
+++ b/packages/ui-components/src/Common/Signature/index.stories.tsx
@@ -0,0 +1,100 @@
+import Signature from '#ui/Common/Signature';
+
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
+
+type Story = StoryObj<typeof Signature>;
+type Meta = MetaObj<typeof Signature>;
+
+export const Default: Story = {
+  args: {
+    title: 'Attributes',
+    children: (
+      <>
+        <Signature
+          name="attribute1"
+          type={
+            <>
+              <a href="#">&lt;Type1&gt;</a>|<a href="#">&lt;Type2&gt;</a>
+            </>
+          }
+        />
+        <Signature
+          name="attribute2"
+          optional
+          type={<a href="#">&lt;Object&gt;</a>}
+          description="An optional attribute."
+        >
+          <Signature name="option1" type={<a href="#">&lt;Type1&gt;</a>} />
+          <Signature name="option2" type={<a href="#">&lt;Type2&gt;</a>} />
+          <Signature
+            name="option3"
+            type={<a href="#">&lt;Type3&gt;</a>}
+            description="One of the available options."
+          />
+        </Signature>
+        <Signature
+          name="Returns"
+          type={<a href="#">&lt;Type4&gt;</a>}
+          description="Returns the result of the function."
+          kind="return"
+        />
+      </>
+    ),
+  },
+};
+
+export const WithLongAttributeNames: Story = {
+  args: {
+    title: 'Attributes',
+    children: (
+      <>
+        <Signature
+          name="thisIsAnAttributeWithAnExcessivelyLongNameToTestTextWrapping"
+          type={
+            <>
+              <a href="#">&lt;Type1&gt;</a>|<a href="#">&lt;Type3&gt;</a>
+            </>
+          }
+        />
+      </>
+    ),
+  },
+};
+
+export const WithLongTypeAndAttributeNames: Story = {
+  args: {
+    title: 'Attributes',
+    children: (
+      <>
+        <Signature
+          name="attribute1"
+          type={
+            <>
+              <a href="#">
+                &lt;ThisIsATypeWithAnExcessivelyLongNameToTestTextWrapping&gt;
+              </a>
+            </>
+          }
+        />
+      </>
+    ),
+  },
+};
+
+export const OptionalAttribute: Story = {
+  args: {
+    title: 'Attributes',
+    children: (
+      <Signature
+        name="optionalAttribute"
+        optional
+        type={<a href="#">&lt;Object&gt;</a>}
+        description="An optional attribute."
+      />
+    ),
+  },
+};
+
+export default {
+  component: Signature,
+} as Meta;
diff --git a/packages/ui-components/src/Common/Signature/index.tsx b/packages/ui-components/src/Common/Signature/index.tsx
new file mode 100644
index 0000000000000..e24ef4fca18cc
--- /dev/null
+++ b/packages/ui-components/src/Common/Signature/index.tsx
@@ -0,0 +1,41 @@
+import SignatureItem from '#ui/Common/Signature/SignatureItem';
+import SignatureRoot from '#ui/Common/Signature/SignatureRoot';
+
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+
+export type SignatureProps = {
+  title?: string;
+  kind?: 'default' | 'return';
+  name?: string;
+  type?: ReactNode;
+  description?: ReactNode;
+  optional?: boolean;
+};
+
+const Signature: FC<PropsWithChildren<SignatureProps>> = ({
+  kind = 'default',
+  name,
+  type,
+  description,
+  optional,
+  title,
+  children,
+}) => {
+  if (title) {
+    return <SignatureRoot title={title}>{children}</SignatureRoot>;
+  }
+
+  return (
+    <SignatureItem
+      kind={kind}
+      name={name}
+      type={type}
+      description={description}
+      optional={optional}
+    >
+      {children}
+    </SignatureItem>
+  );
+};
+
+export default Signature;
diff --git a/packages/ui-components/src/Containers/FunctionSignature/index.stories.tsx b/packages/ui-components/src/Containers/FunctionSignature/index.stories.tsx
new file mode 100644
index 0000000000000..4aebee4bdee88
--- /dev/null
+++ b/packages/ui-components/src/Containers/FunctionSignature/index.stories.tsx
@@ -0,0 +1,152 @@
+import FunctionSignature from '#ui/Containers/FunctionSignature';
+
+import type { Meta as MetaObj, StoryObj } from '@storybook/react-webpack5';
+
+type Story = StoryObj<typeof FunctionSignature>;
+type Meta = MetaObj<typeof FunctionSignature>;
+
+export const Default: Story = {
+  args: {
+    title: 'Attributes',
+    items: [
+      {
+        name: 'streams',
+        type: (
+          <>
+            <a href="#">&lt;Stream[]&gt;</a>|<a href="#">&lt;Iterable[]&gt;</a>|
+            <a href="#">&lt;AsyncIterable[]&gt;</a>|
+            <a href="#">&lt;Function[]&gt;</a>
+          </>
+        ),
+      },
+      {
+        name: 'options',
+        optional: true,
+        type: <a href="#">&lt;Object&gt;</a>,
+        children: [
+          {
+            name: 'Signal',
+            type: <a href="#">&lt;AbortSignal&gt;</a>,
+          },
+          {
+            name: 'end',
+            type: <a href="#">&lt;boolean&gt;</a>,
+            description: (
+              <>
+                End the destination stream when the source stream ends.
+                Transform streams are always ended, even if this value is&nbsp;
+                false.<strong>Default:</strong> true.
+              </>
+            ),
+          },
+        ],
+      },
+      {
+        name: 'Returns',
+        type: <a href="#">&lt;Promise&gt;</a>,
+        description: 'Fulfills when the pipeline is complete.',
+        kind: 'return',
+      },
+    ],
+  },
+};
+
+export const Nested: Story = {
+  args: {
+    title: 'Attributes',
+    items: [
+      {
+        name: 'source',
+        type: (
+          <>
+            <a href="#">&lt;Stream&gt;</a>|<a href="#">&lt;Iterable&gt;</a>|
+            <a href="#">&lt;AsyncIterable&gt;</a>|
+            <a href="#">&lt;Function&gt;</a>
+          </>
+        ),
+        children: [
+          {
+            name: 'attribute1',
+            type: <a href="#">&lt;Attribute1&gt;</a>,
+          },
+          {
+            name: 'attribute2',
+            type: <a href="#">&lt;Attribute2&gt;</a>,
+          },
+          {
+            name: 'attribute3',
+            type: <a href="#">&lt;Attribute3&gt;</a>,
+          },
+          {
+            name: 'Returns',
+            kind: 'return',
+            description: 'description',
+            type: (
+              <>
+                <a href="#">&lt;Promise&gt;</a>|
+                <a href="#">&lt;AsyncIterable&gt;</a>
+              </>
+            ),
+          },
+        ],
+      },
+      {
+        name: '...transforms',
+        type: (
+          <>
+            <a href="#">&lt;Stream&gt;</a>|<a href="#">&lt;Function&gt;</a>
+          </>
+        ),
+        children: [
+          {
+            name: 'source',
+            description: 'description',
+            type: <a href="#">&lt;AsyncIterable&gt;</a>,
+            children: [
+              {
+                name: 'Returns',
+                kind: 'return',
+                description: 'description',
+                type: (
+                  <>
+                    <a href="#">&lt;Promise&gt;</a>|
+                    <a href="#">&lt;AsyncIterable&gt;</a>
+                  </>
+                ),
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const ReturnType: Story = {
+  args: {
+    items: [
+      {
+        name: 'Returns',
+        type: <a href="#">&lt;Promise&gt;</a>,
+        description: 'Fulfills when the pipeline is complete.',
+        kind: 'return',
+      },
+    ],
+  },
+};
+
+export const HasOnlyTypeDefinition: Story = {
+  args: {
+    title: 'Type',
+    items: [
+      {
+        type: <a href="#">&lt;Promise&gt;</a>,
+        description: 'A simple type definition.',
+      },
+    ],
+  },
+};
+
+export default {
+  component: FunctionSignature,
+} as Meta;
diff --git a/packages/ui-components/src/Containers/FunctionSignature/index.tsx b/packages/ui-components/src/Containers/FunctionSignature/index.tsx
new file mode 100644
index 0000000000000..96eeaf00b53be
--- /dev/null
+++ b/packages/ui-components/src/Containers/FunctionSignature/index.tsx
@@ -0,0 +1,42 @@
+import Signature from '#ui/Common/Signature';
+
+import type { ComponentProps, FC } from 'react';
+
+type SignatureDefinition = Omit<
+  ComponentProps<typeof Signature>,
+  'children'
+> & {
+  children?: Array<SignatureDefinition>;
+};
+
+type FunctionSignatureProps = {
+  title?: string;
+  items: Array<SignatureDefinition>;
+};
+
+const renderSignature = (param: SignatureDefinition, index: number) => (
+  <Signature
+    key={`${param.name}-${index}`}
+    name={param.name}
+    type={param.type}
+    optional={param.optional}
+    description={param.description}
+    kind={param.kind}
+  >
+    {param.children?.map((child, i) => renderSignature(child, i))}
+  </Signature>
+);
+
+const FunctionSignature: FC<FunctionSignatureProps> = ({ title, items }) => {
+  if (title) {
+    return (
+      <Signature title={title}>
+        {items.map((param, i) => renderSignature(param, i))}
+      </Signature>
+    );
+  }
+
+  return items.map((param, i) => renderSignature(param, i));
+};
+
+export default FunctionSignature;