Component

LinkList

Render compact resource and reading-list rows with dates, descriptions, and external-link handling.

Usage

Import the component entry and start with its smallest complete example.

Import

import { LinkList } from "@chitrank2050/monoline-ui/link-list"

Basic usage

<LinkList
  title="Further reading"
  action={<a href="/writing">All essays</a>}
  items={[
    {
      label: "01",
      date: "May 12, 2026",
      title: "Designing a type-safe BFF with tRPC and Zod",
      href: "/writing/type-safe-bff",
      tag: "Engineering",
      meta: "9m →",
    },
  ]}
/>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

LinkList works for a titled collection of editorial resources with linked or static rows.

Avoid when

The collection is an application menu, a set of selectable options, or tabular data.

Accessibility

LinkList uses anchors for linked items and articles for static ones. Give the section a contextual title and keep item titles descriptive.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

sizesm | md | lgList density and row type scale

titleReactNodeExact header label

actionReactNodeHeader action such as All essays

itemsLinkListItem[]Dynamic link rows

childrenReactNodeCompound composition override

linkComponentComponentTypeNext Link or router link adapter

Design tokens

Theme variables this component reads for color, spacing, and motion.

--ml-link-list-row-padding-yCSS varVertical row rhythm

--ml-link-list-label-widthCSS varLeading number column

--ml-link-list-date-widthCSS varDesktop date column

--ml-link-list-title-textCSS varTitle type scale

--borderCSS varHeader and row separators

Implementation

The source used by the example above, including any state it needs.

import { LinkList } from "@chitrank2050/monoline-ui/link-list"

export function FurtherReading({ essays }) {
  const visibleEssays = essays.slice(0, 4)

  return (
    <LinkList
      title="Further reading"
      action={essays.length > 4 ? <a href="/writing">All essays</a> : null}
      items={visibleEssays}
    />
  )
}

Compare related components or review the package and theme setup.

01ComponentEditorial LineComponent · ReferenceReference→02ComponentResources PanelComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview