Item

Presents one list entry. Title and description sit left; metadata sits right.

Preview

Alkmaar

The studio city.

Delft

The grid city.

In action

Town

Alkmaar

The studio city.

Delft

The grid city.

When to use

Use it for

Rows in a flush list: a title, a line of description, a trailing meta value.
Settings lists, results, and directories.

Not for

Rows that navigate; wrap the title in a Link.
Tabular numbers across many columns; use Table.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Item } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/item.

2. Vendor the source

npx @noorddev/vlak-cli add item

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/item.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Item } from "@noorddev/vlak-react";

<Item title="Alkmaar" description="The studio city." meta="NL" />

Props

Item

A flush row. Title occupies the cell; meta trails.

Prop	Type	Default	Description
`title`required	`ReactNode`
`description`	`ReactNode`
`meta`	`ReactNode`

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "title">.

Accessibility

A <div> with two <p> lines and a trailing <span>; nothing is interactive by itself.

Markup

<div class="rs-item"><div><p class="rs-item-title">Alkmaar</p><p class="rs-item-desc">The studio city.</p></div><span class="rs-item-meta">NL</span></div>

Classes

.rs-item.rs-item-title.rs-item-desc.rs-item-meta