Velocity X Components

Long-form

Readability Kit

Four long-form scannability primitives — Callout (4 variants), a Key Takeaways TL;DR box, a large PullQuote and a reading-time pill. Branded via CSS custom properties, dark-mode aware, zero motion, zero dependencies.

Free MIT licensed. Install it with the CLI — no account, no key.
bash 
$ velocityx add readability-kit

Built for astro.

Full docs for Readability Kit →

astro v1.0.1

Readability Kit

Four long-form scannability primitives — Callout (4 variants), a Key Takeaways TL;DR box, a large PullQuote and a reading-time pill. Branded via CSS custom properties, dark-mode aware, zero motion, zero dependencies.

Preview isn't available in this repo yet — install with the CLI to view the source

Props

This component's API isn't documented yet.

Files this creates

The CLI writes these paths into your project, relative to its root — nothing else moves.

text 
components/velocity/readability-kit/Callout.astro
components/velocity/readability-kit/KeyTakeaways.astro
components/velocity/readability-kit/PullQuote.astro
components/velocity/readability-kit/ReadingTime.astro

Using the Readability Kit component

Install it with velocityx add readability-kit. The CLI writes the source straight into your project — no runtime dependency, no registry lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.

All 406 components

Related components

More from Long-form.

Admonition BlockPro

The note / tip / warning / danger callout a docs page or technical article needs repeatedly, from one component instead of four. Left accent bar + icon + label so variants read apart at a glance without relying on colour alone, built for pages that stack several of these without feeling noisy.

astro
Article Disclosure BannerPro

The affiliate/sponsored/review-unit disclosure strip that monetised long-form content needs near the top of the piece — calm, matter-of-fact copy with an optional link to a standing disclosure policy.

astro
Article Feedback PromptPro

A lightweight 'was this helpful?' strip for the end of a post or docs page — thumbs up/down with an optional comment box that only appears after a choice is made, ending in a thank-you state. A deliberately lighter, binary take than a full satisfaction-score prompt, built to drop straight into prose with no state library.

astro
Article HeroPro

The opening block for a blog or long-form page — kicker, headline, dek, and an author/date/read-time meta row, with an optional cover image. Marked up as a proper document header with one real h1, so the rest of the article's heading order stays correct.

astro