İçerik bileşenleri

Bu bileşenler hücre ızgarasında Markdown, kod, farklar ve büyük harfler render eder.

#<Markdown>

Akışa uygun Markdown. Büyüyen bir dize iletin; kare sabit kalır.

const [text, setText] = useState("");useEffect(() => stream.on("token", (t) => setText((s) => s + t)), []);return <Markdown>{text}</Markdown>;

#<Code>

ts, tsx, json, bash, python, rust, go ve daha fazlası için sözdizimi vurgulama.

<Code code={source} language="tsx" showLineNumbers maxHeight={12} />

#<Diff>

Birleşik farklar veya { before, after } üzerinden hesaplanan farklar.

<Diff patch={{ before, after, filename: "app/page.tsx" }} />

#<Spinner>

Varyantlar: dots, pulse, matrix, line ve braille (terminaller için; Menlo’da braille glifleri yoktur). Duraklatıldığında zamanlayıcılar durur.

<Spinner variant="dots" label="Building…" />

#<AsciiFont>

Başlıklar için büyük piksel harfler.

<AsciiFont text="▼ TEXT.JS" color="accent" />

3 satırlık varyant için font="compact" kullanın. FIGlet harfleri için @textjs/font paketinden font={slant} gibi bir FIGlet yazı tipi iletin.