Cell is the kit's re-export of @arco-design/mobile-react's Cell component. It's
currently a passthrough — no kit-specific design tokens layered on top — so the
import surface stays inside @appboxo/ui-kit and apps don't need to declare Arco as
a direct dependency.
Brand themes shape the visual via the standard --cell-* CSS custom properties (see
themes/<brand>/theme.css), so the kit's Freedom brand and Arco defaults both work
without any extra wiring at the call site.
import { Cell, Flex } from "@appboxo/ui-kit"
import { PreviewLayout, Section } from "./_section"
export function CellDefaultPreview() {
return (
<PreviewLayout>
<Section
title="Cell"
description="Raw Arco Mobile Cell passthrough. Picks up the kit's --cell-* design tokens from the active brand theme."
>
<div style={{ background: "var(--fill-1)", borderRadius: 12 }}>
<Cell label="Account" showArrow>
user@example.com
</Cell>
<Cell label="Subscription" showArrow>
Pro
</Cell>
<Cell label="Notifications" showArrow>
Email + push
</Cell>
</div>
</Section>
<Section title="Without arrows">
<div style={{ background: "var(--fill-1)", borderRadius: 12 }}>
<Cell label="App version">2.1.4</Cell>
<Cell label="Build">abcd123</Cell>
</div>
</Section>
</PreviewLayout>
)
}
Why a passthrough vs a designed wrapper?
The kit graduates passthroughs to designed wrappers (Carousel, Skeleton) when a
real design token surface or prop sugar gets added on top. Cell will graduate the
moment we ship per-row variant tokens (compact / divided / inset) and a typed
leading / trailing slot API. Until then, please file an issue if Arco's CellProps
type doesn't cover your use case.
API
The component accepts every Arco CellProps prop verbatim. See the
Arco Mobile React Cell docs
for the full API.
import { Cell } from "@appboxo/ui-kit"Installation
pnpm add @appboxo/ui-kit