Component

List Row

A dense row primitive for ledgers, settings lists, feeds, and command rows.

Preview

Lunch with Mara

Food / Today

$18.40

Design invoice

Income / May 30

$2,450

Review automations

Settings / 2 min

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { ListRow } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/list-row.json

Copied source import

code

import "@/styles/axie.css";import { ListRow } from "@/components/axie/list-row";

Prefer @axie/list-row? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { ListRow } from "axie-ui";export function Example() {  return <ListRow detail="Food" meta="Today" title="Lunch with Mara" tone="danger" />;}

Accessibility

Use buttons for actionable rows and links for navigational rows.
Keep the title readable without depending on the metadata.
Avoid truncating the only text that explains the row state.

API Reference

Prop	Type	Default	Description
title	string	-	Main row text.
detail	string	-	Secondary row text.
meta	string	-	Trailing metadata.
tone	neutral \| accent \| danger \| info	neutral	Controls the row dot color.