Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProThe mobile list row and its grouped container: leading visual, title, subtitle, trailing value, chevron, in an inset-grouped or plain edge-to-edge style.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for settings screens, account pages and any list of navigable or tappable items on a phone.
Do not use it for tabular data (use a table) or for rows that need many columns. For long alphabetical lists use Section List.
import { ListGroup, ListRow } from "@/components/ui/list-row"<ListGroup inset header="Account">
<ListRow title="Ada Lovelace" subtitle="ada@example.com" href="/profile" />
<ListRow title="Sign out" destructive onClick={signOut} />
</ListGroup>| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
ListGroup | header / footer | ReactNode | - | Heading above (also names the list) and help text below. |
ListGroup | inset | boolean | false | Rounded card with side margins. |
ListRow | title / subtitle | ReactNode | title required | Main and secondary line. |
ListRow | leading / trailing | ReactNode | - | Icon or avatar at the start; value, switch or badge at the end. |
ListRow | href / onClick | string / handler | - | Makes the row a link or a button. |
ListRow | chevron | boolean | true if interactive | Show the disclosure chevron. |
ListRow | destructive / selected / disabled | boolean | false | States. |
ListRow | as | "li" | "div" | "li" | Use "div" when you wrap the row in your own li. |
The component ships with a Testing Library test (list-row.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.