Zum Inhalt springen
UI Kit
Accent

Long Reads

Der Artikel selbst, gesetzt zum Lesen. Randnotizen neben dem Text, Fußnoten mit Vorschau, Bilder in vier Breiten, Kapitel mit einer Leiste, die sich füllt, und ein Essay mit Initial und Zitat.

5 Variants
Kategorie wechseln

Long Read

Randnotizen

Notizen stehen neben ihrem Absatz und leuchten mit ihrer Marke auf. Auf dem Telefon öffnet eine Marke die Notiz direkt im Text.

Im Studio öffnen

Fußnoten

Nummerierte Verweise mit Vorschau beim Darüberfahren oder Fokus. Die Anmerkungen folgen dem Text, jede mit dem Weg zurück an ihre Stelle.

Im Studio öffnen

Bilder im Text

Bilder in vier Breiten mit nummerierten Bildunterschriften. Breite wachsen beim Scrollen an ihren Platz, jedes Bild öffnet sich groß per Druck.

Im Studio öffnen

Kapitel

Kapitelanfänge mit großen Ziffern. Die Leiste neben dem Text füllt sich Kapitel für Kapitel, auf dem Telefon zeigt eine Leiste das aktuelle Kapitel und öffnet die Liste.

Im Studio öffnen

Essay

Ein mittiger Auftakt, ein Initial, das aufsteigt, und ein Zitat, das in den Rand ragt und Wort für Wort aufleuchtet. Ein Schlusszeichen beendet den Text.

Im Studio öffnen

Details

Was Long Read mitbringt, aus Registry und Quellcode gelesen.

Bereich
Content
Variants
5
Version
1.0.0 · seit 1.1.0
Datei
components/ui/long-read.tsx
Bringt mit
utilskiticonrevealmotionsection
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 14 eigene Texte
Studio
Alle 5 Variants bearbeitbar
In Sammlungen
Blog oder Magazin
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle LongReadProps aus components/ui/long-read.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    LongReadVariant

    sidenotesfootnotesfigureschaptersessay

  • eyebrowoptional
    React.ReactNode
  • titlePflicht
    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

Eingebaute Texte

Diese Texte schreibt Long Read selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 14 Texte anzeigen
byEnglisch By {name}Deutsch Von {name}
minutesEnglisch {n} min readDeutsch {n} Min. Lesezeit
noteEnglisch Note {n}Deutsch Anmerkung {n}
showNoteEnglisch Show note {n}Deutsch Anmerkung {n} zeigen
notesEnglisch NotesDeutsch Anmerkungen
backToEnglisch Back to reference {n}Deutsch Zurück zu Verweis {n}
enlargeEnglisch Show picture largeDeutsch Bild groß zeigen
closeEnglisch CloseDeutsch Schließen
chapterEnglisch Chapter {n}Deutsch Kapitel {n}
chaptersEnglisch ChaptersDeutsch Kapitel
ofEnglisch {a} of {b}Deutsch {a} von {b}
progressEnglisch Reading progressDeutsch Lesefortschritt
figureEnglisch Fig. {n}Deutsch Abb. {n}
endEnglisch End of articleDeutsch Ende des Artikels

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Baut auf dem nativen dialog-Element auf. Der Browser hält den Fokus im Fenster und schließt es mit Escape.
  • Setzt aria-controls, aria-current, aria-describedby, aria-expanded, aria-label, aria-labelledby, aria-valuemax, aria-valuemin und aria-valuenow, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen img, progressbar, separator und tooltip.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bewegt sich mit dem Scrollen, der Fortschritt folgt der Position auf der Seite.
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 6 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Long Read?

Mit aiw add @ai-website/long-read. Der Befehl legt die Datei components/ui/long-read.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind icon, reveal, motion und section. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Long Read?

5 Varianten, Randnotizen, Fußnoten, Bilder im Text, Kapitel und Essay. Du wählst sie mit der Prop variant, zum Beispiel variant="footnotes".

Kann ich die Texte von Long Read übersetzen?

Ja. Long Read bringt 14 eigene Texte auf Deutsch und Englisch mit, etwa „Anmerkungen“, „Bild groß zeigen“ und „Schließen“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Long Read einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Long Read mit aiw_components und installieren sie mit aiw_add @ai-website/long-read. Nenn im Prompt die Variante, etwa variant="sidenotes", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Long Read ohne Code anpassen?

Ja, im Studio. Alle 5 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden LongRead-Code zum Kopieren.

Ähnliche Components

Mehr aus Content, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Long Reads stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert