React landing page components for product narratives
Landing page components turn a product narrative into scannable sections such as navigation, hero content, feature layouts, social proof, media, calls to action, and footers. This guide links Spectrum UI building blocks that can be composed into SaaS and product landing pages without adopting a fixed page template.
Start with content hierarchy and conversion intent, then add animation where it supports reading order. The linked source remains editable, so layout and motion can be reduced when the page’s copy, performance budget, or accessibility needs call for it.
What Landing Page Components means
A landing page is a sequence, not a pile of unrelated effects. Each section should answer a specific question: what the product is, who it serves, how it works, why it is credible, and what action comes next.
Spectrum UI provides composable pieces rather than a single canonical landing page. Combine navigation and text with bento or card layouts, choose one social-proof pattern, use media reveals selectively, and close with clear follow-up navigation in the footer.
When to use these patterns
You are explaining a product or feature
Use text, cards, bento layouts, and media to break a technical value proposition into an ordered narrative.
The page needs verifiable social proof
Use testimonial components with real attributed content and avoid presenting placeholder statements as customer evidence.
You need a reusable marketing system
Keep sections as local components so campaigns can share structure without duplicating an entire page implementation.
Landing Page Components to explore
Open a component page to inspect its live example, editable source, installation command, dependencies, API details, accessibility notes, and related components.
Build a compact feature section with Bento Grid
Bento Grid supplies the responsive structure while each card keeps its own title and description.
pnpm dlx shadcn@latest add @spectrumui/bento-gridimport { BentoCard } from '@/components/spectrumui/bento-card';
import { BentoGrid } from '@/components/spectrumui/bento-grid';
export function FeatureSection() {
return (
<BentoGrid>
<BentoCard
title="Source ownership"
description="Copy the component into your repository and edit it locally."
colSpan={2}
/>
<BentoCard
title="Documented dependencies"
description="Install only the packages used by the selected source."
colSpan={2}
/>
</BentoGrid>
);
}Related topic guides
Landing Page Components questions
This hub focuses on composable components and blocks. Assemble the sections that match your content instead of importing every example into one page.