Component

EditorialLine

Render publication rows with index, date, title, summary, tag, and action metadata.

Usage

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

Import

import { EditorialLine } from "@chitrank2050/monoline-ui/editorial-line"

Basic usage

<EditorialLine
  n={1}
  date="June 17, 2026"
  title="Refactoring CSS structure for tree-shaking"
  readTime={5}
  tag="Engineering"
  href="#"
/>

Usage guidance

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

Use when

EditorialLine suits a dated article, release, or project summary in a dense index.

Avoid when

A record lacks a meaningful title and date, or each row needs several actions.

Accessibility

With href present, the whole line is one anchor; otherwise it is an article. The supplied date uses a time element.

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.

nnumberThe numeric index label (padded to 2 digits automatically)

dateReactNodeDate string / element to render

titleReactNodeMain article/post title content

readTimenumberOptional reading time in minutes

tagReactNodeOptional tag category element/string

hrefstringOptional URL path to render the element as an anchor link

hoverbooleanEnables hover background and transition style (defaults to true)

Implementation

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

import { EditorialLine } from "@chitrank2050/monoline-ui/editorial-line"

export function ArticleList() {
  return (
    <div className="flex flex-col w-full">
      <EditorialLine
        n={1}
        date="June 17, 2026"
        title="Introduction to Monoline-UI Design Tokens"
        readTime={4}
        tag="Design"
        href="#"
      />
      <EditorialLine
        n={2}
        date="June 18, 2026"
        title="Layout options and spacing rules"
        readTime={6}
        tag="Reference"
        href="#"
      />
    </div>
  )
}

Compare related components or review the package and theme setup.

01ComponentLink ListComponent · ReferenceReference→02ComponentMeta RowComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview