# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/post88. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Post](/blocks/post)
5. /
6. Article With Sticky Contents Rail

# Article With Sticky Contents Rail[PRO](/pricing)

A full article layout with a ruled byline row, a wide lead image, prose blocks that carry their own anchors, an accent-ruled pull quote, a closing tag row, and a contents rail that sticks beside the text on desktop.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/post88`

## Post88: Article With Sticky Contents Rail

A full article layout with a ruled byline row, a wide lead image, prose blocks that carry their own anchors, an accent-ruled pull quote, a closing tag row, and a contents rail that sticks beside the text on desktop.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/post88?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/post88?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

This installs the block to `components/beste/block/post88.tsx` and the `badge6` component it uses for the eyebrow (installed to `components/beste/component/badge6.tsx`).

### Quick start

The installed file exports `post88Demo` alongside the block: the exact props behind the preview above. Spread it to get a working article page in one line.

tsxCopy

```
import { Post88, post88Demo } from "@/components/beste/block/post88";

export default function ArticlePage() {
  return <Post88 {...post88Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsxCopy

```
import { Post88 } from "@/components/beste/block/post88";

export default function ArticlePage() {
  return (
    <Post88
      eyebrow="Practice"
      title="The estimate is the design work nobody sees"
      summary="Pricing a project is not admin you do after the thinking."
      date="18 March 2026"
      readTime="9 min read"
      author={{
        name: "Maria Santos",
        title: "Partner",
        avatar: { src: "/people/maria.jpg", alt: "Maria Santos" },
      }}
      featuredImage={{ src: "/covers/estimate.jpg", alt: "An estimate on a desk" }}
      tocTitle="On this page"
      content={[
        { type: "paragraph", content: "Every studio we know treats the estimate as the boring part." },
        {
          type: "heading",
          content: "What a number is actually saying",
          anchor: { title: "What a number is saying", id: "what-a-number-is-saying" },
        },
        { type: "list", items: ["How long the problem is.", "How much you have solved before."] },
        { type: "quote", content: "If the first line of your estimate is free, you have already told the client which part you do not value." },
      ]}
      tags={[{ label: "Pricing", href: "/subjects/pricing" }]}
    />
  );
}
```

### Props

| Prop          | Type             | Default | Description                               |
| ------------- | ---------------- | ------- | ----------------------------------------- |
| eyebrow       | string           | –       | Badge6 label above the article title      |
| title         | string           | –       | Article title, rendered as the page h1    |
| summary       | string           | –       | Standfirst under the title                |
| date          | string           | –       | Publication date in the byline row        |
| readTime      | string           | –       | Reading time, printed after the date      |
| author        | Author           | –       | Name, role and portrait in the byline row |
| featuredImage | FeaturedImage    | –       | Wide lead image under the byline          |
| tocTitle      | string           | –       | Label above the contents rail             |
| content       | ContentBlock\[\] | \[\]    | The article body, block by block          |
| tags          | Tag\[\]          | \[\]    | Subject links under the article           |
| className     | string           | –       | Extra classes for the outer section       |

tsCopy

```
type ContentBlock = {
  type: "paragraph" | "heading" | "subheading" | "list" | "quote";
  content?: string;
  items?: string[];
  anchor?: { title: string; id: string };
};

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
};

type FeaturedImage = {
  src: string;
  alt: string;
};

type Tag = {
  label: string;
  href: string;
};
```

### Behavior notes

* The contents rail is derived from the content, not passed in. Any block carrying an `anchor` becomes an entry, and a heading without one simply does not appear in the rail.
* Rail links call `preventDefault` and scroll with `scrollIntoView({ behavior: "smooth" })`, and the headings carry `scroll-mt-24` so a sticky site header does not land on the title.
* The rail is `lg:sticky lg:top-24` beside the text on desktop and `order-first` above it on smaller screens, where a sticky sidebar would be in the way.
* `list` blocks render as a real `ul` with accent markers, and `quote` blocks as a `blockquote` on an accent rule. Anything else falls through to a paragraph.
* The article is a `article` element with a single `h1`, so a page using this block should not carry another one.

## More Post blocks

[View all Post](/blocks/post)

[](/block/post87)

PRO

post87

### Editorial Article Layout

A full article layout with an oversized light title, an author row framed by hairlines, a wide lead image, prose sections with accent-bulleted lists, an accent-ruled pull quote, and a closing share row.

[](/block/post9)

PRO

post9

### Article with Right Author Box

Two-column layout with main content on left and sticky author profile card on right with social links. Great for individual contributor articles.

[](/block/post3)

PRO

post3

### Featured Article Layout

Full-width article with gradient overlay hero image, featured badge, and complete metadata. Ideal for flagship content that deserves prominent visual presentation.

[](/block/post12)

PRO

post12

### Article with Related Posts

Two-column layout with main article and right sidebar containing related article cards with thumbnails. Perfect for discovery-focused content.

[](/block/post5)

PRO

post5

### Card-Based Article

Article wrapped in a bordered card container with featured image at top and tags integrated into header. Works well for curated collections or featured stories.

[](/block/post27)

PRO

post27

### News Article Sidebar

Newspaper-style layout with byline, serif typography, author bio sidebar, and trending articles list. Ideal for news or journalism.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.