@vetaui/blog-kit

MDX-powered blog system for Next.js apps in the Veta design system. Pre-built components for post cards, headers, table of contents, author meta, related posts, and navigation.

Install

pnpm add @vetaui/foundations @vetaui/atoms @vetaui/blog-kit gray-matter reading-time

Usage

// app/blog/page.tsx
import { BlogList } from "@vetaui/blog-kit";
import { getAllPosts } from "@/lib/blog";

export default async function BlogPage() {
  const posts = await getAllPosts();
  return <BlogList posts={posts} />;
}

// app/blog/[slug]/page.tsx
import { BlogPostHeader, TocList, BlogPostNav } from "@vetaui/blog-kit";

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  return (
    <article>
      <BlogPostHeader
        title={post.title}
        author={post.author}
        date={post.date}
        readingTime={post.readingTime}
        tags={post.tags}
      />
      <div className="flex gap-8">
        <div className="flex-1 prose">{post.content}</div>
        <aside className="w-56 hidden lg:block">
          <TocList headings={post.headings} />
        </aside>
      </div>
      <BlogPostNav prev={post.prev} next={post.next} />
    </article>
  );
}

Component catalog

| Component | Description | | --- | --- | | BlogList | Grid of BlogPostCard components | | BlogPostCard | Card with cover, title, author, date, reading time, tags | | BlogPostHeader | Full-width post header with all meta | | BlogPostMeta | Compact author + date + reading time badge strip | | TocList | Sticky table of contents with active-heading tracking | | BlogPostNav | Previous / next post navigation | | RelatedPosts | "You might also like" section |

Types

import type { BlogPost, BlogPostSummary, BlogFrontmatter, BlogAuthor } from "@vetaui/blog-kit";

License

MIT — Dambert Munoz