Text

Usage

• Use the Text block for body paragraphs; it is the default block of every page.
• Use inline marks (bold, italic, code, links, mentions) for emphasis inside a paragraph rather than separate blocks.
• Nest child blocks under a paragraph only for content that belongs to it; use Toggle when it should be collapsible.
• Don’t use Text with bold marks as a section title; use Heading instead.

Installation

npm install @krackedui/motion

pnpm add @krackedui/motion

yarn add @krackedui/motion

import '@krackedui/motion/styles.css';

import { BlockContent, TextBlock } from '@krackedui/motion';

export function TextExample() {
  return (
    <BlockContent>
      <TextBlock
        text={[
          { text: 'Plain text with ' },
          { text: 'bold', marks: { bold: true } },
          { text: ', ' },
          { text: 'italic', marks: { italic: true } },
          { text: ', ' },
          { text: 'underline', marks: { underline: true } },
          { text: ', ' },
          { text: 'strikethrough', marks: { strike: true } },
          { text: ' and ' },
          { text: 'inline code', marks: { code: true } },
          { text: '.' },
        ]}
      />
    </BlockContent>
  );
}

Examples

Links and mentions

Text colors

Inline marks.color colors a run; a _background value highlights it.

Block color

Nested children

API Reference

TextBlock

Based on <div> and supports its props (except children, which is the nested blocks). Adds:

Accessibility

• Links render as real <a href> elements with rel="noopener noreferrer".
• Mentions are non-editable spans; their label is plain text, so screen readers read “@Alex”.
• Colored text uses <c>-text-secondary tokens; check contrast for long passages of colored text on colored backgrounds.