Package Exports
- @m13v/seo-components
- @m13v/seo-components/components/AnimatedBeam.tsx
- @m13v/seo-components/components/AnimatedChecklist.tsx
- @m13v/seo-components/components/AnimatedCodeBlock.tsx
- @m13v/seo-components/components/AnimatedDemo.tsx
- @m13v/seo-components/components/AnimatedMetric.tsx
- @m13v/seo-components/components/AnimatedSection.tsx
- @m13v/seo-components/components/ArticleMeta.tsx
- @m13v/seo-components/components/BackgroundGrid.tsx
- @m13v/seo-components/components/BeforeAfter.tsx
- @m13v/seo-components/components/BentoGrid.tsx
- @m13v/seo-components/components/BookCallCTA.tsx
- @m13v/seo-components/components/Breadcrumbs.tsx
- @m13v/seo-components/components/CodeComparison.tsx
- @m13v/seo-components/components/ComparisonTable.tsx
- @m13v/seo-components/components/FaqSection.tsx
- @m13v/seo-components/components/FlowDiagram.tsx
- @m13v/seo-components/components/FullSiteAnalytics.tsx
- @m13v/seo-components/components/GlowCard.tsx
- @m13v/seo-components/components/GradientText.tsx
- @m13v/seo-components/components/GuideChatPanel.tsx
- @m13v/seo-components/components/HeadingAnchors.tsx
- @m13v/seo-components/components/HorizontalStepper.tsx
- @m13v/seo-components/components/HtmlSitemap.tsx
- @m13v/seo-components/components/InlineCta.tsx
- @m13v/seo-components/components/InlineTestimonial.tsx
- @m13v/seo-components/components/IntegrationsGrid.tsx
- @m13v/seo-components/components/LottiePlayer.tsx
- @m13v/seo-components/components/Marquee.tsx
- @m13v/seo-components/components/MetricsRow.tsx
- @m13v/seo-components/components/MorphingText.tsx
- @m13v/seo-components/components/MotionSequence.tsx
- @m13v/seo-components/components/NewsletterSignup.tsx
- @m13v/seo-components/components/NumberTicker.tsx
- @m13v/seo-components/components/OrbitingCircles.tsx
- @m13v/seo-components/components/ParallaxSection.tsx
- @m13v/seo-components/components/Particles.tsx
- @m13v/seo-components/components/ProofBand.tsx
- @m13v/seo-components/components/ProofBanner.tsx
- @m13v/seo-components/components/RelatedPostsGrid.tsx
- @m13v/seo-components/components/RemotionClip.tsx
- @m13v/seo-components/components/SeoComponentsStyles.tsx
- @m13v/seo-components/components/SeoPageComments.tsx
- @m13v/seo-components/components/SeoPageReactions.tsx
- @m13v/seo-components/components/SequenceDiagram.tsx
- @m13v/seo-components/components/ShimmerButton.tsx
- @m13v/seo-components/components/ShineBorder.tsx
- @m13v/seo-components/components/SitemapSidebar.tsx
- @m13v/seo-components/components/StepTimeline.tsx
- @m13v/seo-components/components/StickyBottomCta.tsx
- @m13v/seo-components/components/Team.tsx
- @m13v/seo-components/components/TerminalOutput.tsx
- @m13v/seo-components/components/TextShimmer.tsx
- @m13v/seo-components/components/TypingAnimation.tsx
- @m13v/seo-components/lib/ai-usage.ts
- @m13v/seo-components/lib/analytics-context.tsx
- @m13v/seo-components/lib/author-token.ts
- @m13v/seo-components/lib/discover-guides.ts
- @m13v/seo-components/lib/generate-sitemap.ts
- @m13v/seo-components/lib/guide-chat-route.ts
- @m13v/seo-components/lib/guide-context.ts
- @m13v/seo-components/lib/json-ld.ts
- @m13v/seo-components/lib/newsletter-route.ts
- @m13v/seo-components/lib/page-entry.ts
- @m13v/seo-components/lib/slugify.ts
- @m13v/seo-components/lib/supabase-admin.ts
- @m13v/seo-components/lib/track.ts
- @m13v/seo-components/lib/walk-pages.ts
- @m13v/seo-components/next
- @m13v/seo-components/server
- @m13v/seo-components/styles.css
- @m13v/seo-components/styles.src.css
Readme
@m13v/seo-components
42 animated React components for programmatic SEO pages. Ships as TypeScript source (no build step); Next.js transpiles it directly.
Install
npm install @seo/components@npm:@m13v/seo-componentsThis aliases the package so you import from @seo/components everywhere.
Usage
// Client components
import { Breadcrumbs, ArticleMeta, FaqSection, ComparisonTable } from "@seo/components";
import { SitemapSidebar, GuideChatPanel, HeadingAnchors } from "@seo/components";
import { AnimatedBeam, MorphingText, NumberTicker, Particles } from "@seo/components";
// Server utilities (API routes, server components)
import { walkPages, createGuideChatHandler, discoverGuides } from "@seo/components/server";Components
Trust & Content
| Component | What it does |
|---|---|
Breadcrumbs |
SEO breadcrumb trail with JSON-LD |
ArticleMeta |
Author, date, read time |
FaqSection |
Expandable FAQ with FAQPage schema |
ComparisonTable |
Feature comparison grid |
ProofBand |
Logo/stat proof strip |
ProofBanner |
Quote + metric banner |
InlineTestimonial |
Inline quote block |
Animation (Magic UI style)
| Component | What it does |
|---|---|
AnimatedBeam |
SVG beam connecting elements |
MorphingText |
Text that morphs between strings |
NumberTicker |
Counting number animation |
OrbitingCircles |
Orbiting icon circles |
Particles |
Interactive particle field |
Marquee |
Infinite scroll marquee |
ShimmerButton |
Button with shimmer effect |
GradientText |
Animated gradient text |
TextShimmer |
Shimmering text highlight |
TypingAnimation |
Typewriter effect |
ShineBorder |
Animated border glow |
BackgroundGrid |
Dot/line grid background |
Layout & Display
| Component | What it does |
|---|---|
BentoGrid |
Responsive bento card grid |
BeforeAfter |
Side-by-side before/after |
AnimatedDemo |
Animated product demo frame |
GlowCard |
Card with glow on hover |
ParallaxSection |
Parallax scroll section |
StepTimeline |
Numbered step timeline |
MotionSequence |
Sequenced entrance animations |
AnimatedSection |
Fade-in section wrapper |
AnimatedMetric |
Single animated stat |
MetricsRow |
Row of animated stats |
Code & Technical
| Component | What it does |
|---|---|
AnimatedCodeBlock |
Syntax-highlighted code with line animations |
CodeComparison |
Side-by-side code diff |
TerminalOutput |
Terminal-style output |
FlowDiagram |
Animated flow chart |
SequenceDiagram |
Step sequence diagram |
AnimatedChecklist |
Animated checkbox list |
CTA
| Component | What it does |
|---|---|
InlineCta |
Inline call-to-action block |
StickyBottomCta |
Fixed bottom CTA bar |
Interactive
| Component | What it does |
|---|---|
SitemapSidebar |
Universal sidebar with search, page discovery, subsection tracking |
HeadingAnchors |
Auto-injects id on H2s for sidebar linking |
GuideChatPanel |
AI page assistant with Gemini streaming (NDJSON) |
Video
| Component | What it does |
|---|---|
RemotionClip |
Remotion video player embed |
LottiePlayer |
Lottie animation player |
Server Utilities
import { walkPages, createGuideChatHandler, logAiUsage } from "@seo/components/server";| Export | What it does |
|---|---|
walkPages() |
Discovers all pages in src/app/, extracts titles, descriptions, H2 sections |
createGuideChatHandler() |
Gemini streaming chat route handler |
discoverGuides() |
Legacy guide discovery (delegates to walkPages) |
getGuideContext() |
Builds page context for AI chat |
logAiUsage() |
Token usage tracking |
getSupabaseAdmin() |
Supabase admin client |
slugify() |
URL-safe slug utility |
JSON-LD Helpers
import { breadcrumbListSchema, faqPageSchema, articleSchema, howToSchema } from "@seo/components";Theming
Components use CSS variables for brand colors. Override in your globals.css:
:root {
--seo-accent: #0d9488; /* teal-600 default */
--seo-accent-light: #ccfbf1; /* teal-100 */
--seo-accent-dark: #134e4a; /* teal-900 */
}Peer Dependencies
Required: next >= 14, react >= 18, framer-motion >= 11
Optional: remotion, @remotion/player, lottie-react, @google/generative-ai, posthog-js
License
MIT