Overriding components
Wire your own Link/Image and customize UI components
Use the components prop to wire your router-specific Link/Image components and customize the blog's UI building blocks.
import { BlogProvider } from 'better-blog/client';
function MyLink({ href, children, className }) {
return <a href={href} className={className}>{children}</a>;
}
function MyImage({ src, alt, className, width, height }) {
return <img src={src} alt={alt} className={className} width={width} height={height} />;
}
function MyPostCard({ post }) {
return (
<div className="custom-post-card">
<h3>{post.title}</h3>
<p>{post.excerpt}</p>
</div>
);
}
function MyPostCardSkeleton() {
return <div className="skeleton">Loading...</div>;
}
<BlogProvider
dataProvider={dataProvider}
components={{
Link: MyLink,
Image: MyImage,
PostCard: MyPostCard,
PostCardSkeleton: MyPostCardSkeleton
}}
>
{children}
</BlogProvider>Available Component Overrides
- Link: Component used for navigation (integrate with your router framework)
- Image: Component used for rendering images (e.g., Next.js Image)
- PostCard: Component for rendering individual blog post cards in lists
- PostCardSkeleton: Skeleton component shown while post cards are loading
Customizing Pages
To customize entire pages, use the yar router to create custom routes. See the routing documentation for more details.