This guide demonstrates the various MDX features available in KNEXT.js. And provides examples of how to use them.
KNEXT.js provides a rich set of typography components:
Regular paragraph text with bold and italic formatting.
Lead text is great for introductory paragraphs.
Large text for emphasis
Small text for less important information
Muted text for secondary information
Use inline code for short code snippets.
Cards are great for grouping related content together.
| Feature | Description | Status |
|---|---|---|
| Typography | Rich text formatting | Available |
| Components | Interactive UI components | Available |
| Feature | Status |
|---|---|
| React 19 | ✅ |
| Server Components | ✅ |
This was mistaken text
Images are automatically optimized using Next.js Image component:
You can use any custom components defined in your MDX components:
Blockquotes are perfect for highlighting important information or quotes from other sources.
Note: The animations above use GSAP's ScrollTrigger for scroll-based animations and timeline animations for continuous effects. Check out the source code to see how they're implemented.
To add these animations to your own MDX content:
AnimatedContent component with the variant prop set to scroll or tagline.useMDXAnimations hook in your client componentsThis guide demonstrates the core MDX features available in KNEXT.js. For more details, check out the individual component documentation.
Here are some helpful links to learn more:
You can also join our Discord community for help and discussions.