PostMeta

PostMeta renders a post's byline: the author, a • separator and the date. PostCard and HighlightCard both use it, and you can use it in your own card or post header. Each side can be hidden on its own, and the separator only appears when both show.

PostMeta

Mira Kovač•September 14, 2026

import { PostMeta } from '@systhemaui/next'

export default function Demo() {
  return (
    <PostMeta
      className="post-byline"
      author="Mira Kovač"
      authorAvatar={{ url: '/demo-assets/avatar-1.webp' }}
      date="September 14, 2026"
      dateTime="2026-09-14T09:00:00.000Z"
      showAuthor
      showDate
    />
  )
}

ImportLink to this section

import { PostMeta } from '@systhemaui/next'

In a React app without Next.js, import it from @systhemaui/react.

ExamplesLink to this section

From a PostViewLink to this section

postByline(post) returns the author, the formatted date and the ISO dateTime from a PostView, formatted in post.locale (en-US by default):

import { PostMeta, postByline, type PostView } from '@systhemaui/next'

export function Byline({ post }: { post: PostView }) {
  const { author, date, dateTime } = postByline(post)
  return (
    <PostMeta
      className="post-byline"
      author={author}
      authorAvatar={post.author?.avatar}
      date={date}
      dateTime={dateTime}
      showAuthor
      showDate
    />
  )
}

One side onlyLink to this section

showAuthor and showDate are required, so the caller decides what shows. A side with no value (null) is skipped as well, and when neither side renders, PostMeta renders nothing.

import { PostMeta } from '@systhemaui/next'

export default function Demo() {
  return (
    <div className="flex flex-col items-center gap-4">
      <PostMeta
        className="post-byline"
        author="Jonas Weber"
        date={null}
        showAuthor
        showDate={false}
      />
      <PostMeta
        className="post-byline"
        author={null}
        date="September 2, 2026"
        dateTime="2026-09-02"
        showAuthor={false}
        showDate
      />
    </div>
  )
}

Styling each sideLink to this section

className goes on the row, and authorClassName and dateClassName are merged over each side's default classes with tailwind-merge.

<PostMeta
  className="post-card-meta"
  author="Mira Kovač"
  date="September 14, 2026"
  showAuthor
  showDate
  dateClassName="uppercase tracking-wide"
/>

PropsLink to this section

PostMeta does not format dates. Pass a display string as date and the machine-readable value as dateTime, or use postByline.

HTML and CSSLink to this section

<div class="post-meta text-small flex flex-wrap items-center gap-x-2">
  <span class="post-meta-author inline-flex items-center gap-2">
    <img class="post-meta-avatar size-6 rounded-full object-cover" src="/media/mira.webp" alt="Mira Kovač" />
    Mira Kovač
  </span>
  <span class="post-meta-separator" aria-hidden="true">•</span>
  <time class="post-meta-date" datetime="2026-09-14T09:00:00.000Z">September 14, 2026</time>
</div>

The .post-meta* hooks come from the posts CSS layer, which mutes the byline against the current text color.

Next.jsLink to this section

@systhemaui/next re-exports PostMeta from @systhemaui/react unchanged.

AccessibilityLink to this section

• The separator is aria-hidden, so screen readers hear "Mira Kovač September 14, 2026".
• The date is a <time> element; pass dateTime so it carries a machine-readable value.
• The avatar's alt is authorAvatar.alt, or the author's name when that is empty, so a screen reader hears the name twice when an avatar shows. An empty alt falls back to the name too.

RelatedLink to this section

• PostCard and HighlightCard
• Posts view model and helpers