Superdev CMS Blog Integration for React
npm install @superdevhq/blogbash
npm install @superdevhq/blog
`
Zero-Effort Integration
Just add the BlogModule to your existing route tree. It will automatically handle everything under /blog (listing and posts).
In your src/App.tsx:
`tsx
import { BlogModule } from '@superdevhq/blog';
import { superdevClient } from '@/lib/superdev/client';
// ... inside your
path="/blog/*"
element={ }
/>
`
$3
1. Self-Routing: Automatically manages /blog, /blog/:category/:slug, and /blog/:slug.
2. CMS Aware: It will render null if cmsActive is false in your project settings, making it safe to include in the base template.
3. Configurable Layout: Pass showSidebar={true} to activate a built-in 2-column sidebar layout for your blog pages.
4. Fully Independent: You don't need to create any blog pages or logic in your application.
Standalone Sidebar & Footer Components
You can use these components anywhere in your app (sidebars, footers, etc.) to list categories and tags.
$3
Displays a vertical list of categories and a tag cloud.
`tsx
import { BlogSidebar } from '@superdevhq/blog';
import { superdevClient } from '@/lib/superdev/client';
client={superdevClient}
showTags={true}
categoriesTitle="Explore Topics"
/>
`
$3
A minimal link list perfect for footers.
`tsx
import { BlogFooterLinks } from '@superdevhq/blog';
client={superdevClient}
type="categories"
title="Resource Center"
layout="vertical"
/>
`
Peer Dependencies
Ensure your project has the following:
- @superdevhq/client
- @tanstack/react-query
- react-router-dom
- lucide-react, date-fns, tailwind-merge, clsx
- @tailwindcss/typography` (for prose styling)