---
type: block
title: Article
description: Editorial article layouts for long-form stories, interviews, and analysis.
---

> Fulldev UI for React. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/react/styles/{style}/{name}.json`; see [installation](/react/docs/installation.md).

## Article 1

```tsx title="Usage of @fulldev/article-1 (react/gallery/blocks/article-1.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Article1 } from "@/components/blocks/article-1"

const placeholderImage = placeholder.src

export default function Article1Demo() {
  return (
    <>
      <Article1
        title="Designing React pages like a magazine, not a dashboard"
        description="A strong content system needs editorial hierarchy, deliberate whitespace, and room for imagery, quotes, and callouts to breathe."
        author={{
          image: placeholderImage,
          initials: "SV",
          name: "Sil Veltman",
          date: "May 2026 · 8 min read",
        }}
        image={{
          src: placeholderImage,
          alt: "",
        }}
      >
        <p>
          When a block library grows beyond buttons and cards, the next problem
          is rhythm. Article layouts need a predictable reading width, but they
          also need places for context, secondary media, and editor notes.
        </p>
        <p>
          This version keeps the story column focused while moving the
          supporting context into a side card. That makes it useful for essays,
          changelogs, interviews, and longer release notes.
        </p>
        <p>
          Build it with semantic sections, card surfaces, and a small set of
          reusable UI primitives instead of one-off editorial CSS.
        </p>
      </Article1>
    </>
  )
}
```

## Article 2

```tsx title="Usage of @fulldev/article-2 (react/gallery/blocks/article-2.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Article2 } from "@/components/blocks/article-2"

const placeholderImage = placeholder.src

export default function Article2Demo() {
  return (
    <>
      <Article2
        title="How teams turn component libraries into publishable page systems"
        description="This variant starts centered with metadata inline, which works well for longer interview or analysis pages."
        author={{
          image: placeholderImage,
          initials: "SV",
          name: "Sil Veltman",
          date: "May 3, 2026",
          readingTime: "6 min read",
        }}
        image={{
          src: placeholderImage,
          alt: "",
        }}
      >
        <p>
          When a block library grows beyond buttons and cards, the next problem
          is rhythm. Article layouts need a predictable reading width, but they
          also need places for context, secondary media, and editor notes.
        </p>
        <p>
          This version keeps the story column focused while moving the
          supporting context into a side card. That makes it useful for essays,
          changelogs, interviews, and longer release notes.
        </p>
        <p>
          Build it with semantic sections, card surfaces, and a small set of
          reusable UI primitives instead of one-off editorial CSS.
        </p>
      </Article2>
    </>
  )
}
```

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/article-1 @fulldev/article-2
```