Skip to content
UI Kit
Accent color

Long reads

The article itself, set for reading. Sidenotes beside the text, footnotes with previews, pictures in four widths, chapters with a rail that fills and an essay with initial and pull quote.

5 variants
Switch category

Long read

Sidenotes

Notes stand beside their paragraph and light up with their marker. On phones a marker opens the note right in the text.

Open in Studio

Footnotes

Numbered references with a preview on hover or focus. The notes follow the text, each with a way back to its place.

Open in Studio

Figures

Pictures in four widths with numbered captions. Wide ones grow into place while scrolling, every picture opens large on press.

Open in Studio

Chapters

Chapter openers with large numbers. The rail beside the text fills chapter by chapter, on phones a bar shows the current chapter and opens the list.

Open in Studio

Essay

A centered opening, an initial that rises in and a pull quote that leans into the margin and lights up word by word. An end mark closes the text.

Open in Studio

Details

What Long read brings along, read from the registry and the source.

Area
Content
Variants
5
Version
1.0.0 · since 1.1.0
File
components/ui/long-read.tsx
Brings along
utilskiticonrevealmotionsection
npm packages
None
Languages
English and German, 14 texts of its own
Studio
All 5 variants editable
In collections
Blog or magazine
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The LongReadProps interface from components/ui/long-read.tsx, with the comments from the code.

  • variantoptional
    LongReadVariant

    sidenotesfootnotesfigureschaptersessay

  • eyebrowoptional
    React.ReactNode
  • titlerequired
    React.ReactNode
  • descriptionoptional
    React.ReactNode

    The standfirst under the title

  • authoroptional
    LongReadAuthor
  • dateoptional
    string

    As shown, e.g. Oct 21, 2026

  • readingTimeoptional
    number

    Minutes

  • blocksoptional
    LongReadBlock[]
  • notesoptional
    string[]

    sidenotes and footnotes: the notes, [1] in a paragraph is notes[0]

  • figuresoptional
    LongReadFigure[]
  • chaptersoptional
    LongReadChapter[]
  • asoptional
    'h1' | 'h2'

    Heading level of the title, h1 on an article page

Built-in texts

Long read writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 14 texts
byEnglish By {name}German Von {name}
minutesEnglish {n} min readGerman {n} Min. Lesezeit
noteEnglish Note {n}German Anmerkung {n}
showNoteEnglish Show note {n}German Anmerkung {n} zeigen
notesEnglish NotesGerman Anmerkungen
backToEnglish Back to reference {n}German Zurück zu Verweis {n}
enlargeEnglish Show picture largeGerman Bild groß zeigen
closeEnglish CloseGerman Schließen
chapterEnglish Chapter {n}German Kapitel {n}
chaptersEnglish ChaptersGerman Kapitel
ofEnglish {a} of {b}German {a} von {b}
progressEnglish Reading progressGerman Lesefortschritt
figureEnglish Fig. {n}German Abb. {n}
endEnglish End of articleGerman Ende des Artikels

Accessibility

Read from the source of the component.

  • Built on the native dialog element. The browser keeps focus inside and closes it with Escape.
  • Sets aria-controls, aria-current, aria-describedby, aria-expanded, aria-label, aria-labelledby, aria-valuemax, aria-valuemin and aria-valuenow, so screen readers announce purpose and state.
  • Uses the roles img, progressbar, separator and tooltip.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Moves with the scroll, its progress follows the position on the page.
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 6 places in the code switch motion off then.

Frequent questions

How do I install Long read?

With aiw add @ai-website/long-read. The command puts components/ui/long-read.tsx into your project, the code is yours from then on. It brings along icon, reveal, motion and section. It needs no further npm packages.

Which variants does Long read have?

5 variants, Sidenotes, Footnotes, Figures, Chapters and Essay. You pick one with the variant prop, for example variant="footnotes".

Can I translate the texts of Long read?

Yes. Long read carries 14 texts of its own in English and German, such as “Notes”, “Show picture large” and “Close”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Long read?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Long read with aiw_components and install it with aiw_add @ai-website/long-read. Name the variant in your prompt, for example variant="sidenotes", and the assistant writes your content straight into the props.

Can I adjust Long read without code?

Yes, in the Studio. All 5 variants are editable there, texts, lists and switches. The Studio writes the matching LongRead code to copy.

Similar components

More from Content, the same area of the kit.

Often combined with

Sections that usually sit next to Long reads on a page.

Often searched

Jump to

Copied to the clipboard