Database

List View

Minimal rows: page icon and title on the left, visible properties as small pills on the right.

Tasks

Usage

  • Use the list layout for a calm, document-like index of pages with a few key properties.
  • Show only the properties people scan for (status, date); the list hides the rest.
  • Don’t use a list when people edit many values in place; use the table layout instead.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/ListViewExample.tsx
import { DatabaseView, createTasksSample } from '@krackedui/motion';

export function ListViewExample() {
  return (
    <DatabaseView data={createTasksSample()} initialViewId="v-list" />
  );
}

Examples

Hovered row

Tasks

Composition

Views read the database from context, so render them inside <DatabaseView> (which picks the active view for you) or inside your own <DatabaseProvider value={useDatabase(...)}>.

anatomy
<ListView>
  row × n (<a>, 30px)  → page icon · title · edit button on hover · PropertyValueView size="sm" × n
  "+ New page"
</ListView>

API Reference

ListView

PropTypeDefault
onOpenRow
(row: Row) => void
hoveredRowId
string

Accessibility

  • Rows are links: Tab focuses them, Enter opens the page.
© 2026 Motion. Internal documentation.