Content 4 - Article with key takeaways boxPro

A content section that opens with a bordered key-takeaways summary box beside the article meta, followed by numbered body sections. Use it for research summaries, reports or explainers where busy readers want the gist first.

About Content 4

A content section that opens with a bordered key-takeaways summary box beside the article meta, followed by numbered body sections. Use it for research summaries, reports or explainers where busy readers want the gist first.

Content 4 is a pro content block for React, built on shadcn/ui and Tailwind CSS. It ships as 95 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • key takeaways
  • summary
  • tldr
  • article
  • report
  • explainer

Installation

  1. Add the Chocolate UI registry to your components.json (see the installation guide).
  2. Run the shadcn CLI:
npx shadcn@latest add @chocolate/content-04

Dependencies installed automatically: lucide-react.

Uses: reveal, utils.

Usage

import Content04 from "@/components/blocks/content-04"

export default function Page() {
  return <Content04 />
}

FAQ