Composed
Mobile shell
A 393×852 frame, and the rows, groups and sheets that go inside it.
9:41
Tasks
On going · 2
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/mobile.jsonRows own their horizontal padding
MobileEntityRow carries its own px, and containers must not add more. This is
not a style preference — MobileGroup is an inset card with a radius, and a row
without its own padding puts the avatar straight into the corner curve.
Dividers inset to the text, not the card edge: paddingLeft + leadingWidth + gap. That is what makes the leading column read as a column.
Sheets, not modals
On a phone a sheet arrives from the edge nearest the thumb and never covers the whole screen, so the context it came from stays visible above it.
The page is bg/subtle
Which means cards drop their outline and take a shadow instead — and any control
using bg/subtle disappears. This is why bg/sunken exists.
| Prop | Type | Default | Description |
|---|---|---|---|
| leading | ReactNode | — | MobileEntityRow. Usually a MobileAvatar. |
| trailing | ReactNode | — | Replaces the chevron. A row that toggles is not a row that navigates. |
| dividerInset | number | 60 | MobileGroup. Aligns dividers to the text column. |
| items / active / onChange | … | — | MobileTabBar. |