Algorand MDX Components Demo

Welcome to the Algorand Markdown Protocol! This document showcases all the amazing components available for creating rich, interactive content about the Algorand ecosystem.

✨ Interactive Demo: All components use CSS container queries for responsive design. Drag the right edge of any container to see how components adapt to different widths!

Account Components

Basic Account Display

Here's the current user's account:

Trading Accounts

You can also reference accounts inline, like ALICE...4ZI4L, in your text.

Account Search

Search Components

Asset Search

Find any Algorand Standard Asset:

NFD Profile Search

Search for verified NFD profiles:

Transaction Search

Look up transaction details:

NFT Marketplace Search

Find NFT listings on the marketplace:

NFD Profile Components

Rich Profile Display

Here's a verified NFD profile with social links:

Community Profiles

Inline Profile References

You can mention users like alice.algo or current-user.algo in conversations.

Asset Components

Featured Asset

Let's showcase a special NFT from our collection:

Currency Assets

Here are some common currency assets:

Inline Asset References

When discussing trades, you might reference assets like USDC$1 or KITTEN001$50 inline.

Transaction Components

Rich Transaction Display

Here's a transaction with full context and details:

Payment Transaction

Inline Transaction References

Reference transactions in text like K7H3J...9Y2Z5 for quick context.

NFT Marketplace

Featured NFT Listing

Check out this amazing NFT available for purchase:

Another Listing

Here's another great piece from a different collection:

Raffle & Auction Features

Active Raffle

Check out this exciting raffle with limited entries remaining:

Live Auction

Here's an active auction with competitive bidding:

Trading & Governance

Trade Offers

Propose asset swaps with other users:

Advanced Search for Trading

Find specific trade offers:

Community Polls

Participate in governance and community decisions:

Compact Poll

Perfect for sidebars and space-constrained layouts:

Poll Search

Find community polls and governance votes:

Social Features

This protocol enables rich social interactions around Algorand assets. You can:

• 🏷️ Tag accounts like @alice.algo or @bob.algo
• 💰 Reference assets like $USDC or $ALGO
• 🎯 Link to apps like #TinymanAMM
• 📋 Share transactions with full context
• 🎨 Embed marketplace listings directly in posts
• 🎲 Create raffles and auctions with built-in mechanics
• 🔄 Propose trades with interactive accept/reject flows
• 📊 Run polls with token-weighted voting

Theme System

The components work beautifully in both CyberCute and Headless modes. The CyberCute theme uses subtle gradients and refined colors to highlight important information without being overwhelming.

• Borders: Most borders use zinc colors for subtle definition
• Highlights: Primary and accent colors are reserved for verified badges, status indicators, and interactive elements
• Typography: Clean hierarchy with proper contrast ratios
• Animations: Smooth, spring-based animations that feel natural

---

This demo showcases the power of combining MDX with Algorand ecosystem data. Toggle between headless and themed modes using the button in the top-right corner!