# 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/blog67. 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. [Blog](/blocks/blog)
5. /
6. Series Index With Standing State

# Series Index With Standing State[PRO](/pricing)

An index of writing that was planned as runs rather than posts, pairing each series and how far along it is with its numbered parts in the column beside it.

ViewCodeDocs

Base UI

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

## Blog67: Series Index With Standing State

An index of writing that was planned as runs rather than posts, pairing each series and how far along it is with its numbered parts in the column beside it.

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/blog67?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

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

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

### Quick start

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

tsxCopy

```
import { Blog67, blog67Demo } from "@/components/beste/block/blog67";

export default function SeriesPage() {
  return <Blog67 {...blog67Demo} />;
}
```

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

tsxCopy

```
import { Blog67 } from "@/components/beste/block/blog67";

export default function SeriesPage() {
  return (
    <Blog67
      eyebrow="Written in order"
      heading="The series, and where each one stands"
      description="Some pieces only make sense next to the ones around them."
      partLabel="Part"
      series={[
        {
          name: "Pricing the work",
          status: "Finished, six parts",
          summary: "From the first email to the invoice.",
          parts: [
            { title: "The day we stopped billing hours", href: "/essays/hours" },
            { title: "What a flat price has to cover", href: "/essays/flat-price" },
          ],
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type       | Default | Description                               |
| ----------- | ---------- | ------- | ----------------------------------------- |
| eyebrow     | string     | –       | Badge6 label above the hairline rule      |
| heading     | string     | –       | Section heading under the rule            |
| description | string     | –       | Supporting paragraph, capped at max-w-3xl |
| partLabel   | string     | –       | Word before each part number, e.g. "Part" |
| series      | Series\[\] | \[\]    | One hairline row per series               |
| className   | string     | –       | Extra classes for the outer section       |

tsCopy

```
type Series = {
  name: string;
  status: string;
  summary: string;
  parts: SeriesPart[];
};

type SeriesPart = {
  title: string;
  href: string;
};
```

### Behavior notes

* Part numbers come from the array index, so reordering `parts` renumbers them. The list is an `ol`, which keeps that order meaningful to a screen reader as well as on screen.
* `status` is free text rather than a computed count, so a series can say "three of five published" or "ongoing, no end planned" without the block inventing progress.
* Each series is a two column row from `md` up, the name and its state on the left and the parts on the right. Below that the parts fall under their series.
* Only the part titles are links. The series name is a heading, so nothing competes with the chapter you are meant to click.
* Rows are separated by hairlines with no trailing rule at the end of the list.

## More Blog blocks

[View all Blog](/blocks/blog)

[](/block/blog58)

PRO

blog58

### Ruled Writing Index

Image-free article index where every entry is one ruled row carrying the date, the category, the title and the reading time with a corner arrow, stacking to a readable block on mobile.

[](/block/blog57)

FREE

blog57

### Journal Lead And Index

Editorial journal preview pairing one lead entry with a wide image, category, title, excerpt and date against a ruled index of three shorter entries, headed by an eyebrow, a display heading and an outline pill CTA.

[](/block/blog61)

FREE

blog61

### Filterable Archive Index

A dense blog archive whose subject pills are derived from the posts themselves and carry live counts, filtering a two-column list of hairline rows stamped with a date and a reading time.

[](/block/blog36)

PRO

blog36

### Tutorial Series Cards

Multi-part tutorial series with numbered parts. Book icon, part count, and progress-style list. Perfect for step-by-step learning content.

[](/block/blog44)

PRO

blog44

### Newsroom Lead and Index

A newsroom listing with a heading, a divider, and an eyebrow over a hairline rule, a two-column lead story with a large image, the remaining stories stacked as numbered ruled rows with square thumbnails, and a seal button to the full archive.

[](/block/blog43)

PRO

blog43

### Editorial Article Grid

A blog listing with an eyebrow over a hairline rule, a two-column heading, and three linked article cards with a hover-zoom image, a category label, a title, an excerpt, and byline.

## 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.