# 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/feature270. 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. [Feature](/blocks/feature)
5. /
6. Reading Paths By Time Available

# Reading Paths By Time Available[PRO](/pricing)

Three columns keyed to how long the reader has rather than what they want, each opening with the time span, a promise for it, and the two or three pieces that fit inside it.

ViewCodeDocs

Base UI

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

## Feature270: Reading Paths By Time Available

Three columns keyed to how long the reader has rather than what they want, each opening with the time span, a promise for it, and the two or three pieces that fit inside 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/feature270?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

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

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

### Quick start

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

tsxCopy

```
import { Feature270, feature270Demo } from "@/components/beste/block/feature270";

export default function StartHerePage() {
  return <Feature270 {...feature270Demo} />;
}
```

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

tsxCopy

```
import { Feature270 } from "@/components/beste/block/feature270";

export default function StartHerePage() {
  return (
    <Feature270
      eyebrow="Where to begin"
      heading="Pick by the time you have, not the topic"
      description="Most reading lists assume you have a free afternoon."
      slots={[
        {
          duration: "Five minutes",
          title: "One idea, argued once",
          description: "Short pieces that stop as soon as the point is made.",
          links: [
            { label: "Why we stopped sending ranges", href: "/essays/ranges" },
            { label: "Saying no in one paragraph", href: "/essays/no" },
          ],
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type         | Default | Description                          |
| ----------- | ------------ | ------- | ------------------------------------ |
| eyebrow     | string       | –       | Badge6 label above the hairline rule |
| heading     | string       | –       | Section heading under the rule       |
| description | string       | –       | Supporting paragraph                 |
| slots       | TimeSlot\[\] | \[\]    | One column per span of time          |
| className   | string       | –       | Extra classes for the outer section  |

tsCopy

```
type TimeSlot = {
  duration: string;
  title: string;
  description: string;
  links: ReadingLink[];
};

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

### Behavior notes

* `duration` is the accent line at the top of each column, which is what makes the section sort by time rather than by subject.
* Columns take as many links as you pass. Nothing pads a short column, so a path with two pieces simply ends earlier than one with four.
* Links underline on hover as well as moving to the accent colour, so the affordance survives for anyone who cannot separate the two colours.
* Each column sits on its own hairline and the grid is three across from `md` up, stacking in order below that.

## More Feature blocks

[View all Feature](/blocks/feature)

[](/block/feature162)

PRO

feature162

### Numbered Steps Grid

3-column grid of numbered steps with titles and descriptions. Ideal for onboarding flows, process overviews, and how-it-works sections.

[](/block/feature274)

PRO

feature274

### Archive By Year Columns

One column per year on a hairline, each stating the year as a figure with its published count beside it, a sentence on what that year was about, and the pieces that defined it.

[](/block/feature267)

PRO

feature267

### Center-Line Journey Timeline

A feature that runs a hairline down the middle of the section and alternates its stages either side of it, dropping an image tile with a live phone frame onto the step worth showing.

[](/block/feature230)

FREE

feature230

### Three editorial pillar columns

Three tall portrait images in a row, each paired with a padded numeral, title, and description — a monochrome statement of guiding principles.

[](/block/feature116)

PRO

feature116

### Checkbox Checklist Grid

2-column grid of checklist items with checkbox icons and strikethrough styling. Great for progress tracking, launch checklists, or task lists.

[](/block/feature224)

PRO

feature224

### Capability Checklist Split

Two-column split with an eyebrow, big heading, description, and CTA on the left and a checklist of capabilities with rounded check seals on the right.

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