Cell

A cross-platform layout primitive for list rows and card-like surfaces, with leading/trailing slots, a flexible content area, and an opinionated multi-line text block.

Installation

npm install @xsolla/xui-cell

Imports

import { Cell } from "@xsolla/xui-cell";

Quick start

import * as React from "react";
import { Cell } from "@xsolla/xui-cell";

export default function QuickStart() {
  return (
    <Cell>
      <Cell.Content>Basic cell content</Cell.Content>
    </Cell>
  );
}

API Reference

<Cell>

Container row. Extends BoxProps, so any layout/style prop the underlying Box accepts is forwarded.

| Prop | Type | Default | Description | | ----------- | ------------------------------------ | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | testID | string | — | Test ID for testing frameworks. On web this renders as data-testid; on React Native it renders as testID. | | children | ReactNode | - | Slots, content, or text block. | | view | "default" \| "stroke" \| "surface" | "default" | Visual variant. default is a plain row (min height 56px). stroke adds a 1px border and 8px radius. surface adds a secondary background fill and 8px radius. | | withBoard | boolean | false | Deprecated. When true and view is unset, behaves like view="stroke". | | onPress | () => void | - | Press/click handler. When set, the cell becomes interactive and shows a pointer cursor with a hover background. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

<Cell.Slot>

Fixed-width container for leading or trailing content (icons, avatars, buttons). Does not flex.

| Prop | Type | Default | Description | | ---------- | ----------- | ------- | ------------- | | children | ReactNode | - | Slot content. |

<Cell.Content>

Flexible content area that fills the remaining space.

| Prop | Type | Default | Description | | ---------- | ----------- | ------- | ----------------- | | children | ReactNode | - | Content elements. |

<Cell.Text>

Pre-styled multi-row text block. Each row has independent left and right slots with size and weight tuned for cells.

| Prop | Type | Default | Description | | ------------------ | ----------- | ------- | ----------------------------------------------------------------------------------------- | | title | ReactNode | - | Primary text on the title row (left). 16px / 500 weight when string. | | titleRight | ReactNode | - | Secondary text on the title row (right). 12px / 400 weight when string. | | description | ReactNode | - | Description on the second row (left). 12px / 400 weight when string. | | descriptionRight | ReactNode | - | Description on the second row (right). 12px / 400 weight when string. | | caption | ReactNode | - | Caption on the third row (left). 12px / 400 weight when string, tertiary content colour. | | captionRight | ReactNode | - | Caption on the third row (right). 12px / 400 weight when string, tertiary content colour. |

Inherits ThemeOverrideProps (themeMode, themeProductContext).

Anatomy

import { Cell } from "@xsolla/xui-cell";

<Cell view="default">
  <Cell.Slot>{/* leading */}</Cell.Slot>
  <Cell.Content>{/* flexible body */}</Cell.Content>
  {/* or use Cell.Text instead of Cell.Content */}
  <Cell.Text title="Title" description="Description" caption="Caption" />
  <Cell.Slot>{/* trailing */}</Cell.Slot>
</Cell>;

Examples

View variants

import * as React from "react";
import { Cell } from "@xsolla/xui-cell";

export default function Views() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
      <Cell view="default">
        <Cell.Content>Default</Cell.Content>
      </Cell>
      <Cell view="stroke">
        <Cell.Content>Stroke</Cell.Content>
      </Cell>
      <Cell view="surface">
        <Cell.Content>Surface</Cell.Content>
      </Cell>
    </div>
  );
}

With Cell.Text

import * as React from "react";
import { Cell } from "@xsolla/xui-cell";
import { Avatar } from "@xsolla/xui-avatar";
import { ChevronRight } from "@xsolla/xui-icons-base";

export default function CellWithText() {
  return (
    <Cell view="stroke">
      <Cell.Slot>
        <Avatar size="md" name="Jane Smith" />
      </Cell.Slot>
      <Cell.Text
        title="Jane Smith"
        titleRight="Pro"
        description="[email protected]"
        descriptionRight="2h ago"
        caption="Product Manager"
      />
      <Cell.Slot>
        <ChevronRight size={20} aria-hidden />
      </Cell.Slot>
    </Cell>
  );
}

Pressable cell

import * as React from "react";
import { Cell } from "@xsolla/xui-cell";
import { ChevronRight } from "@xsolla/xui-icons-base";

export default function PressableCell() {
  return (
    <Cell onPress={() => console.log("pressed")}>
      <Cell.Text
        title="Account settings"
        description="Email, password, sessions"
      />
      <Cell.Slot>
        <ChevronRight size={20} aria-hidden />
      </Cell.Slot>
    </Cell>
  );
}

Settings list

import * as React from "react";
import { Cell } from "@xsolla/xui-cell";
import { ChevronRight } from "@xsolla/xui-icons-base";

export default function SettingsList() {
  return (
    <div>
      <Cell onPress={() => {}}>
        <Cell.Text title="Profile" />
        <Cell.Slot>
          <ChevronRight size={16} aria-hidden />
        </Cell.Slot>
      </Cell>
      <Cell onPress={() => {}}>
        <Cell.Text title="Notifications" />
        <Cell.Slot>
          <ChevronRight size={16} aria-hidden />
        </Cell.Slot>
      </Cell>
      <Cell onPress={() => {}}>
        <Cell.Text title="Security" />
        <Cell.Slot>
          <ChevronRight size={16} aria-hidden />
        </Cell.Slot>
      </Cell>
    </div>
  );
}

Accessibility

• Provide an accessible label on the cell (or its leading slot) when used as an action.
• When onPress is set, ensure the cell receives keyboard focus on web; pair it with a role such as button if the surrounding context does not already imply interactivity.
• Decorative icons inside slots should be marked aria-hidden.