Cell

A cross-platform React cell component that provides a consistent layout structure for list items. Features slots for leading/trailing content and a flexible content area.

Installation

npm install @xsolla/xui-cell
# or
yarn add @xsolla/xui-cell

Demo

Basic Cell

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

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

With Slots

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 CellWithSlots() {
  return (
    <Cell>
      <Cell.Slot>
        <Avatar size="md" name="John Doe" />
      </Cell.Slot>
      <Cell.Content>
        <span style={{ fontWeight: 500 }}>John Doe</span>
        <span style={{ color: '#888' }}>[email protected]</span>
      </Cell.Content>
      <Cell.Slot>
        <ChevronRight size={20} />
      </Cell.Slot>
    </Cell>
  );
}

With Board Style

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

export default function BoardCell() {
  return (
    <Cell withBoard>
      <Cell.Content>
        Cell with board styling (background, border, rounded corners)
      </Cell.Content>
    </Cell>
  );
}

Anatomy

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

<Cell
  withBoard={false}              // Add background, border, and padding
>
  <Cell.Slot>                    {/* Leading content (icon, avatar) */}
    <Avatar />
  </Cell.Slot>
  <Cell.Content>                 {/* Main content area (flexes to fill) */}
    <Text>Title</Text>
    <Text>Subtitle</Text>
  </Cell.Content>
  <Cell.Slot>                    {/* Trailing content (chevron, button) */}
    <Icon />
  </Cell.Slot>
</Cell>

Examples

Settings List

import * as React from 'react';
import { Cell } from '@xsolla/xui-cell';
import { User, Bell } from '@xsolla/xui-icons';
import { ChevronRight, Shield } from '@xsolla/xui-icons-base';

export default function SettingsList() {
  return (
    <div>
      <Cell>
        <Cell.Slot>
          <User size={20} />
        </Cell.Slot>
        <Cell.Content>
          <span>Profile</span>
        </Cell.Content>
        <Cell.Slot>
          <ChevronRight size={16} />
        </Cell.Slot>
      </Cell>
      <Cell>
        <Cell.Slot>
          <Bell size={20} />
        </Cell.Slot>
        <Cell.Content>
          <span>Notifications</span>
        </Cell.Content>
        <Cell.Slot>
          <ChevronRight size={16} />
        </Cell.Slot>
      </Cell>
      <Cell>
        <Cell.Slot>
          <Shield size={20} />
        </Cell.Slot>
        <Cell.Content>
          <span>Security</span>
        </Cell.Content>
        <Cell.Slot>
          <ChevronRight size={16} />
        </Cell.Slot>
      </Cell>
    </div>
  );
}

Contact Card

import * as React from 'react';
import { Cell } from '@xsolla/xui-cell';
import { Avatar } from '@xsolla/xui-avatar';
import { Button } from '@xsolla/xui-button';

export default function ContactCard() {
  return (
    <Cell withBoard>
      <Cell.Slot>
        <Avatar
          size="lg"
          src="https://example.com/avatar.jpg"
          name="Jane Smith"
        />
      </Cell.Slot>
      <Cell.Content>
        <span style={{ fontWeight: 600 }}>Jane Smith</span>
        <span style={{ fontSize: 14, color: '#666' }}>Product Manager</span>
      </Cell.Content>
      <Cell.Slot>
        <Button size="sm" variant="secondary">Message</Button>
      </Cell.Slot>
    </Cell>
  );
}

API Reference

Cell

Container component for cell layout.

Cell Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Cell content (Slot and Content components). | | withBoard | boolean | false | Add background, border, and rounded corners. |

Cell.Slot

Container for leading or trailing content.

Cell.Slot Props:

| Prop | Type | Default | Description | | :--- | :--- | :------ | :---------- | | children | ReactNode | - | Slot content (icons, avatars, buttons). |

Cell.Content

Main content area that expands to fill available space.

Cell.Content Props:

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

Layout

• Cell uses horizontal flexbox layout with 12px gap
• Minimum height of 56px
• Horizontal padding of 16px
• withBoard adds: secondary background, border, 8px border radius, and 12px vertical padding