MDX Components Demo
This article demonstrates how to use custom components within MDX files for rich, interactive content.
1. Twitter Embeds
You can easily embed tweets in your articles:
2. Callout Boxes
Different types of callout boxes for highlighting important information:
Pro Tip
This is an info callout box. Perfect for sharing useful tips and information with readers.
Important Warning
This is a warning callout. Use it to highlight important caveats or potential issues.
Success Story
This is a success callout. Great for highlighting positive outcomes or achievements.
Error Alert
This is an error callout. Use it to highlight problems or things to avoid.
Expert Insight
This is an info callout using DaisyUI alert component. Much cleaner and consistent!
3. Image Galleries
Create beautiful image galleries with different layouts:
Advanced processor architecture
GPU rendering pipeline
Memory subsystem design
Cooling solution overview
4. Technical Specifications
Display technical specifications in a clean, organized format:
๐ง NVIDIA RTX 5090 Specifications
| GPU Architecture | Blackwell (GB202) |
| Process Node | TSMC 4nm (N4P) |
| CUDA Cores | ~21,760 |
| RT Cores | 4th Generation |
| Tensor Cores | 5th Generation |
| Memory | 24GB GDDR7 |
| Memory Bus | 384-bit |
| Memory Bandwidth | ~1.5 TB/s |
| Base Clock | ~2.2 GHz |
| Boost Clock | ~2.7 GHz |
| TDP | 550-600W |
| Power Connector | PCIe 5.0 16-pin |
5. Cards Layout for Specs
You can also display specs in a card format:
๐ง Key Features
6. Statistics Cards
Display impressive statistics using DaisyUI stats component:
RTX 5090 Performance Metrics
7. Comparison Tables
Compare products or specifications easily:
GPU Comparison
| Feature | Recommended RTX 5090 | RTX 4090 |
|---|---|---|
| CUDA Cores | 21,760 | 16,384 |
| Memory | 24GB GDDR7 | 24GB GDDR6X |
| RT Cores | โ | โ |
| DLSS 4.0 | โ | โ |
| Price | $2,199 | $1,599 |
8. Timeline Components
Show product roadmaps or development history:
NVIDIA GPU Evolution
- RTX 20 Series
First consumer ray tracing GPUs
๐
-
RTX 30 SeriesAmpere architecture breakthrough
๐ก
-
RTX 40 SeriesAda Lovelace with DLSS 3
โก
-
RTX 50 SeriesBlackwell architecture revolution
๐ฅ
9. Progress Indicators
Show performance comparisons or development progress:
RTX 5090 vs Competition
Industry leading
Best in class
Premium pricing
High power draw
10. Data Tables
Create clean, responsive tables with simple array data:
RTX Performance Comparison
| Game/Aplikasi | RTX 4090 | RTX 5090 (Prediksi) | Peningkatan |
|---|---|---|---|
| Cyberpunk 2077 4K RT | 35 FPS | 60+ FPS | +71% |
| Blender BMW Render | 2.1 menit | 1.2 menit | +75% |
| 3DMark Time Spy | 28,000 | 47,000+ | +68% |
| DLSS 3 4K Gaming | 85 FPS | 140+ FPS | +65% |
How to Use These Components
To use these components in your MDX files, simply:
- Import the components at the top of your MDX file
- Use them like HTML tags with the required props
- Customize styling through the available props
Development Tip
All these components are responsive and support both light and dark themes automatically. They integrate seamlessly with the siteโs design system.
Benefits of MDX Components
- Rich Content: Create more engaging articles with interactive elements
- Consistency: Reusable components ensure consistent styling
- Maintenance: Easy to update styling across all articles
- Performance: Components are optimized for fast loading
