Components

import { BlogList } from "@vlozi/blog/react";
 
<BlogList
  columns={3}
  category="tutorials"
  tag="react"
  showPagination
/>

import { BlogCard } from "@vlozi/blog/react";
 
<BlogCard
  post={post}
  variant="featured"
  onClick={(p) => router.push(`/blog/${p.slug}`)}
/>

<BlogPost slug="my-first-post" showFeaturedImage />

import { BlogCategoryNav } from "@vlozi/blog/react";
 
<BlogCategoryNav
  variant="pills"
  activeCategory={selectedCategory}
  onSelect={(slug) => setSelectedCategory(slug)}
  showCounts
/>

import { BlogTagNav } from "@vlozi/blog/react";
 
<BlogTagNav
  variant="cloud"
  activeTag={selectedTag}
  onSelect={(slug) => setSelectedTag(slug)}
  showCounts
/>

import { BlogInfiniteList } from "@vlozi/blog/react";
 
<BlogInfiniteList
  columns={3}
  limit={12}
  category="tutorials"
  rootMargin="400px"
/>

import { BlogArchive } from "@vlozi/blog/react";
 
<BlogArchive
  variant="grouped"
  postHref={(p) => `/blog/${p.slug}`}
/>

import { RelatedPosts } from "@vlozi/blog/react";
 
<RelatedPosts slug={post.slug} limit={3} columns={3} />

import { PrevNextNav } from "@vlozi/blog/react";
 
<PrevNextNav slug={post.slug} />

import { BlogContent } from "@vlozi/blog/react";
 
<article className="my-post-layout">
  <header>
    <h1>{post.title}</h1>
    {post.excerpt && <p>{post.excerpt}</p>}
  </header>
 
  {/* Body — sanitized + hydrated + syntax-highlighted */}
  {post.content && <BlogContent html={post.content} />}
</article>

import Image from "next/image";
import { BlogContent, type VloziImageComponent } from "@vlozi/blog/react";
 
const NextBlogImage: VloziImageComponent = ({ src, alt, width, height }) => (
  <Image
    src={src}
    alt={alt}
    width={width ?? 1200}
    height={height ?? 800}
    style={{ width: "100%", height: "auto" }}
  />
);
 
<BlogContent html={post.content} imageComponent={NextBlogImage} />

<BlogContent
  html={post.content}
  transformHtml={(html) =>
    html.replace(
      /youtube\.com\/watch\?v=([\w-]+)/g,
      'youtube-nocookie.com/embed/$1',
    )
  }
/>

import {
  BlogPostSkeleton,
  BlogCardSkeleton,
  BlogListSkeleton,
} from "@vlozi/blog/react";
 
// Article-page skeleton — banner + title + meta + 5 body lines
if (loading) return <BlogPostSkeleton />;
 
// Single card skeleton — image + meta + title + 2 excerpt lines
<BlogCardSkeleton />
 
// Grid of card skeletons sized to match a BlogList(columns={N})
<BlogListSkeleton columns={3} count={6} />

import { MermaidBlock, Carousel, type CarouselSlide } from "@vlozi/blog/react";
 
<MermaidBlock source="graph TD; A-->B; B-->C" theme="default" />
 
const slides: CarouselSlide[] = [
  { src: "/a.jpg", alt: "First", caption: "Optional caption" },
  { src: "/b.jpg", alt: "Second" },
];
<Carousel slides={slides} />

/* Map your design tokens onto the SDK's --vlz-* knobs */
.vlz-content {
  --vlz-accent:        var(--my-primary);
  --vlz-muted-fg:      var(--my-muted-foreground);
  --vlz-border:        var(--my-border);
  --vlz-surface:       var(--my-surface);
  --vlz-surface-hover: var(--my-surface-hover);
}

<BlogList className="gap-8 my-10" />
<BlogCategoryNav className="mb-6" />