diff --git a/packages/snaps-sdk/src/jsx/components/Cell.ts b/packages/snaps-sdk/src/jsx/components/Cell.ts
new file mode 100644
index 0000000000..117dc23788
--- /dev/null
+++ b/packages/snaps-sdk/src/jsx/components/Cell.ts
@@ -0,0 +1,42 @@
+import { createSnapComponent } from '../component';
+
+/**
+ * The props of the {@link Cell} component.
+ *
+ * @property image - The image to show as part of the Cell, must be an SVG string.
+ * @property title - The title.
+ * @property description - The description, shown below the title.
+ * @property value - The value, shown on the right side.
+ * @property extra - An additional optional value shown below the value.
+ */
+export type CellProps = {
+ image?: string | undefined;
+ title: string;
+ description?: string | undefined;
+ value: string;
+ extra?: string | undefined;
+};
+
+const TYPE = 'Cell';
+
+/**
+ * A cell component which can be used to display values within a cell structure.
+ *
+ * @param props - The props of the component.
+ * @param props.image - The image to show as part of the Cell, must be an SVG string.
+ * @param props.title - The title.
+ * @param props.description - The description, shown below the title.
+ * @param props.value - The value, shown on the right side.
+ * @param props.extra - An additional optional value shown below the value.
+ * @returns A box element.
+ * @example
+ * |
+ */
+export const Cell = createSnapComponent(TYPE);
+
+/**
+ * A cell element.
+ *
+ * @see Cell
+ */
+export type CellElement = ReturnType;
diff --git a/packages/snaps-sdk/src/jsx/components/index.ts b/packages/snaps-sdk/src/jsx/components/index.ts
index f4b483585b..dfa62d6b47 100644
--- a/packages/snaps-sdk/src/jsx/components/index.ts
+++ b/packages/snaps-sdk/src/jsx/components/index.ts
@@ -1,5 +1,6 @@
import type { AddressElement } from './Address';
import type { BoxElement } from './Box';
+import type { CellElement } from './Cell';
import type { ContainerElement } from './Container';
import type { CopyableElement } from './Copyable';
import type { DividerElement } from './Divider';
@@ -19,6 +20,7 @@ export * from './form';
export * from './formatting';
export * from './Address';
export * from './Box';
+export * from './Cell';
export * from './Copyable';
export * from './Divider';
export * from './Value';
@@ -40,6 +42,7 @@ export type JSXElement =
| StandardFormattingElement
| AddressElement
| BoxElement
+ | CellElement
| ContainerElement
| CopyableElement
| DividerElement
diff --git a/packages/snaps-sdk/src/jsx/validation.ts b/packages/snaps-sdk/src/jsx/validation.ts
index afa480d954..54a0bff8dd 100644
--- a/packages/snaps-sdk/src/jsx/validation.ts
+++ b/packages/snaps-sdk/src/jsx/validation.ts
@@ -42,6 +42,7 @@ import type {
BoxElement,
ButtonElement,
CheckboxElement,
+ CellElement,
CopyableElement,
DividerElement,
DropdownElement,
@@ -380,6 +381,17 @@ export const ValueStruct: Describe = element('Value', {
extra: string(),
});
+/**
+ * A struct for the {@link CellElement} type.
+ */
+export const CellStruct: Describe = element('Cell', {
+ image: optional(string()),
+ title: string(),
+ description: optional(string()),
+ value: string(),
+ extra: optional(string()),
+});
+
/**
* A struct for the {@link HeadingElement} type.
*/
@@ -488,6 +500,7 @@ export const BoxChildStruct = nullUnion([
TextStruct,
TooltipStruct,
CheckboxStruct,
+ CellStruct,
]);
/**
@@ -527,6 +540,7 @@ export const JSXElementStruct: Describe = nullUnion([
CheckboxStruct,
FooterStruct,
ContainerStruct,
+ CellStruct,
]);
/**