PostMeta

A versatile metadata component designed for blog posts, documentation pages, and content-driven layouts

Install

pnpm dlx hybrid-astro-ui@latest post-meta

npx hybrid-astro-ui@latest add post-meta

yarn dlx hybrid-astro-ui@latest add post-meta

bunx hybrid-astro-ui@latest add post-meta

---
import { PostMeta } from "@/src/components/hybrid-astro-ui/post-meta"
---

<PostMeta 
    pubDate={new Date(2025,7,9)}
    locale="en-US"
    author="Sarah Chen"
    category={{ title: "Web Development", path: "/web-development" }}
    timeRead="4 min read"
/>

Optional values

Please note that both author and timeRead are optional properties, which means you may choose to omit them if they are not needed.

Custom class

You can pass a custom class to the PostMeta component to style its overall layout, typography, or any visual aspect you want to adjust. This allows you to adapt the metadata presentation to different sections or design contexts within your project.

---
import { PostMeta } from "@/src/components/hybrid-astro-ui/post-meta"
---

<div>
    <PostMeta 
      class="font-bold text-cyan-400 tracking-wide"
      pubDate={new Date(2025, 7, 9)}
      locale="en-US"
      category={{ title: "Frontend Engineering", path: "/frontend-engineering" }}
    />

    <PostMeta 
      class="font-extrabold opacity-65 text-neutral-500"
      pubDate={new Date(2025, 7, 9)}
      locale="en-US"
      category={{ title: "UI/UX Design", path: "/ui-ux-design" }}
    />

    <PostMeta 
      class="font-medium text-gray-600 tracking-tight"
      pubDate={new Date(2025, 7, 9)}
      locale="en-US"
      category={{ title: "Technical Writing", path: "/technical-writing" }}
    />

    <PostMeta 
      class="font-serif font-semibold text-slate-700 italic"
      pubDate={new Date(2025, 7, 9)}
      locale="en-US"
      category={{ title: "Software Architecture", path: "/software-architecture" }}
    />
</div>