Total Posts

0

Total Commits

0

(v1: 0, v2: 0)
Total Deployments

0

Latest commit:Unable to fetch commit info
9/2/2025
Latest deployment:
pending
9/2/2025
v2
Started 9/2/2025

Built by Remco Stoeten with a little ❤️

Welcome to Snippets
Text Formatting Components
_internal docs

Text Formatting Components

A comprehensive guide to using text formatting and documentation components.

Text Formatting Components

A comprehensive guide to using text formatting and documentation components.

⚠️

These components are designed to work with the site's theme and styling. Make sure you have the required dependencies installed.

Basic Text Formatting

The following components provide basic text formatting capabilities:

Italic Text

This text will be italicized - Use for emphasis or highlighting

👨‍💻<I>This text will be italicized</I>

Underlined Text

This text will be underlined - Use for links or important terms

👨‍💻<U>This text will be underlined</U>

Bold Text

This text will be bold - Use for strong emphasis

👨‍💻<B>This text will be bold</B>

Animation Components

Add dynamic effects to your text:

Pulse Animation

This text will pulse - Subtle attention-grabbing effect

👨‍💻<Pulse>This text will pulse</Pulse>

Ping Animation

This text will ping - More pronounced animation effect

👨‍💻<Ping>This text will ping</Ping>

Emoji Integration

Add contextual emojis to your content:

Default Navigation Emojis

👉Uses navigation emojis by default👈

👨‍💻<WithEmoji>Uses navigation emojis by default</WithEmoji>

Development Categories

🖥️Frontend development🎨

👨‍💻<WithEmoji emojiCategory="frontend">Frontend development</WithEmoji>

🔌Backend development⚙️

👨‍💻<WithEmoji emojiCategory="backend">Backend development</WithEmoji>

💾Database operations🗃️

👨‍💻<WithEmoji emojiCategory="database">Database operations</WithEmoji>

Documentation Components

Special components for documentation:

Code Notes

👨‍💻Highlight important code-related information
👨‍💻<CodeNote>Highlight important code-related information</CodeNote>

Tips

💡Provide helpful suggestions and best practices
👨‍💻<Tip>Provide helpful suggestions and best practices</Tip>

Warnings

⚠️

Alert users about potential issues or important considerations

👨‍💻<Warning>Alert users about potential issues or important considerations</Warning>

Important Notes

🔑Highlight critical information that shouldn't be missed
👨‍💻<Important>Highlight critical information that shouldn't be missed</Important>

Examples

🔍Show practical usage examples
👨‍💻<Example>Show practical usage examples</Example>

Composite Components

Combine multiple effects:

Bold with Pulse

Combines bold text with pulse animation

👨‍💻<PulseBold>Combines bold text with pulse animation</PulseBold>

Italic with Emoji

👨‍💻Combines italic text with relevant emojis💻

👨‍💻<EmojiItalic>Combines italic text with relevant emojis</EmojiItalic>

Interactive Emoji Animation

👉Emojis move on hover👈

👨‍💻<EmojiBeforeAfter>Emojis move on hover</EmojiBeforeAfter>

Welcome to Snippets

React, Next.js knowledge, references & thoughts by Remco Stoeten

Project Rules and Guidelines

Next Page

On this page

Basic Text FormattingItalic TextUnderlined TextBold TextAnimation ComponentsPulse AnimationPing AnimationEmoji IntegrationDefault Navigation EmojisDevelopment CategoriesDocumentation ComponentsCode NotesTipsWarningsImportant NotesExamplesComposite ComponentsBold with PulseItalic with EmojiInteractive Emoji Animation
Sep 2, 2025
3 min read
510 words