Content Section React component
A long-form content section: a sticky side column with the title, read time, a scroll-linked progress bar and chapter links that follow your reading, next to chapters built from paragraphs, numbered lists, images with captions, pull quotes and stat rows that reveal as you scroll.
About the Content Section component
Content Section is for long-form writing inside a marketing site: a case study, a guide, a manifesto or a story about how a customer works. The side column holds the title, a read-time estimate and links to each part; it stays in view while people read, with a progress bar that fills as they scroll.
The content is built from simple blocks, so you can write it as data: paragraphs, numbered lists, images with captions, pull quotes and rows of stats. Each block rises in gently as it comes into view, and the current chapter is highlighted in the side column.
When to use it
Use it for case studies, long feature explanations, guides or an about page told as a story.
For a full blog post with comments and author pages, a dedicated page template fits better.
Installation
Add the Content Section component to your project with the shadcn CLI. It lands in components/content-section.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/content-sectionOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ContentSection /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| eyebrow | string | "Case study" |
| title | string | "How one team replaced its Monday meeting" |
| description | string | "A short story about writing things down, told in three parts." |
| chapters | { id: string; title: string; blocks: ContentBlock[] }[] | DEFAULT_CHAPTERS |
| toc Sticky side column with a reading progress bar and links to each chapter. | boolean | true |
| action A primary action under the side column, e.g. a sign-up link. Pass null to hide it. | { label: string; href: string } | null | { label: "Get the update template", href: "#" } |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- eyebrowstringDefault: "Case study"
- titlestringDefault: "How one team replaced its Monday meeting"
- descriptionstringDefault: "A short story about writing things down, told in three parts."
- chapters{ id: string; title: string; blocks: ContentBlock[] }[]Default: DEFAULT_CHAPTERS
- toc
Sticky side column with a reading progress bar and links to each chapter.
booleanDefault: true - action
A primary action under the side column, e.g. a sign-up link. Pass null to hide it.
{ label: string; href: string } | nullDefault: { label: "Get the update template", href: "#" } - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Content Section FAQ
- How do I write the content?
- Pass chapters, each with an id, a title and blocks. A block is a paragraph, image, quote, list or stats object; mix them in any order. The id is used for the link in the side column.
- How is the read time worked out?
- From the words in paragraphs, quotes and lists at about 220 words a minute, rounded and at least one minute.
- Can I use my own components inside?
- The blocks cover the common pieces. For anything else, copy the Block function in the file and add a new type, for example a video or a code sample; it is plain React.
- What happens on phones?
- The side column stacks above the content and the chapter links are hidden, since the page is one column. The title, read time and action button stay.
- Is it accessible?
- Each chapter is an article with a heading, the contents are a nav with aria-current on the part being read, images take alt text, and reduced motion turns off the reveal animations.
