App Grid

AppGrid

The AppGrid component displays a responsive grid of Cardano applications, with transaction statistics and rankings. It can filter apps by any tag (or multiple tags) and sorts them by transaction volume.

Basic Usage

import AppGrid from '@site/src/components/AppGrid';

<AppGrid categories={['dex']} />

Live Preview:

Minswap

Multi-pool decentralized exchange on Cardano with deep liquidity, yield farming, and one of the highest-volume venues for native token swaps.

Last 30 days101,366 tx

#1

Visit

WingRiders

Native AMM DEX on Cardano focused on fast settlement and predictable fees, with stableswap pools and an integrated yield-farming layer.

Last 30 days32,468 tx

#2

Visit

SundaeSwap

Native, scalable Cardano AMM DEX with automated liquidity provision, yield farming, and an order-book overlay built on Plutus.

Last 30 days14,964 tx

#3

Visit

CSWAP

CSWAP Systems is a next-gen decentralized exchange (DEX) that bridges tokens, NFTs, and real-world assets in one seamless trading ecosystem.

Last 30 days11,871 tx

#4

Visit

More Apps

Explore 6 more DEXs

---

Props

Prop	Type	Default	Description
categories	string[]	['dex']	Array of category ids to filter apps. Apps whose primary category matches any of these are shown.
limit	number	null	Maximum number of apps to display. Shows all if not specified.
showRank	boolean	true	Whether to display rank badges (#1, #2, etc.) on app cards.
showStats	boolean	true	Whether to display transaction statistics on app cards.
gridTitle	string	null	Optional title to display above the grid.
ctaText	string	"Visit"	Text for the call-to-action button on each card.
moreLink	string	null	Custom link for the "More Apps" card. Defaults to /apps?tags=...
moreTitle	string	"More Apps"	Title for the "More Apps" card.

---

Features

Flexible Tag Filtering

Filter apps by any tag or combination of tags:

• Single tag: tags={['dex']} or tags={['lending']}
• Multiple tags: tags={['dex', 'lending']} (shows apps with ANY of these tags)

Automatic Ranking

Apps are automatically ranked by their 30-day transaction volume:

• Top 3 apps get highlighted rank badges
• Ranking is based on real on-chain transaction data
• Apps without transaction data appear after ranked ones (alphabetically)

Transaction Statistics

Each app card displays:

• 30-day transaction count
• Visual rank badge for top performers
• Bar chart icon for quick recognition

Responsive Grid

• Desktop: Multi-column layout (auto-fills based on screen width)
• Mobile: Single column for optimal readability
• Cards maintain consistent height and spacing

Icon Support

Apps can display custom logos via the icon field in apps.js:

• Supports SVG, PNG, WebP, JPEG
• Falls back to initial letter badge if no icon provided

---

Examples

DEX Grid (Default)

<AppGrid
  categories={['dex']}
  limit={4}
  gridTitle="Top Cardano DEXs"
  ctaText="Visit DEX"
  moreTitle="More DEXes"
/>

Top Cardano DEXs

Minswap

Multi-pool decentralized exchange on Cardano with deep liquidity, yield farming, and one of the highest-volume venues for native token swaps.

Last 30 days101,366 tx

#1

Visit DEX

WingRiders

Native AMM DEX on Cardano focused on fast settlement and predictable fees, with stableswap pools and an integrated yield-farming layer.

Last 30 days32,468 tx

#2

Visit DEX

SundaeSwap

Native, scalable Cardano AMM DEX with automated liquidity provision, yield farming, and an order-book overlay built on Plutus.

Last 30 days14,964 tx

#3

Visit DEX

CSWAP

CSWAP Systems is a next-gen decentralized exchange (DEX) that bridges tokens, NFTs, and real-world assets in one seamless trading ecosystem.

Last 30 days11,871 tx

#4

Visit DEX

More DEXes

Explore 6 more DEXs

---

Lending Platforms

<AppGrid
  categories={['lending']}
  limit={4}
  gridTitle="Lending Platforms"
  ctaText="Visit Platform"
  moreTitle="More Lending"
/>

Lending Platforms

Liqwid

Non-custodial pooled lending protocol on Cardano with liquid staking, supporting multiple supplied assets and qToken collateral receipts.

Last 30 days7,716 tx

#1

Visit Platform

Indigo

Autonomous synthetics protocol on Cardano for on-chain price exposure to real-world assets. Mints iAssets backed by collateralized debt positions.

Last 30 days7,445 tx

#2

Visit Platform

Dano Finance

All-in-one DeFi platform on Cardano combining lending, borrowing, and trading with cross-pool collateral and unified interest rate markets.

Last 30 days5,082 tx

#3

Visit Platform

Butane

Decentralized synthetics platform on Cardano enabling on-chain price exposure to off-chain assets via collateralized synthetic positions.

Visit Platform

More Lending

Explore 3 more LENDINGs

---

Marketplaces

<AppGrid
  categories={['marketplace']}
  limit={4}
  gridTitle="Marketplaces"
/>

Marketplaces

Wayup

Cardano NFT marketplace by Anvil. Continues the smart contracts of JpgStore as the platform sunsets, so existing listings and royalties keep working.

Last 30 days4,236 tx

#1

Visit

Iagon

Iagon is an AI-driven shared storage and compute economy. Bridging decentralization with compliance to revolutionize cloud services.

Last 30 days1,465 tx

#2

Visit

Masumi

Masumi is a decentralized protocol empowering AI agents to collaborate seamlessly and monetize their services efficiently.

Last 30 days1,142 tx

#3

Visit

Book.io

NFT marketplace where readers buy, read, and resell eBooks and audiobooks. Each title is an asset with verifiable provenance and resale rights.

Last 30 days6 tx

#4

Visit

More Apps

Explore 7 more MARKETPLACEs

---

Without Rankings

Useful for showcasing apps without emphasizing competitive ranking:

<AppGrid
  categories={['dex']}
  limit={6}
  showRank={false}
/>

Minswap

Multi-pool decentralized exchange on Cardano with deep liquidity, yield farming, and one of the highest-volume venues for native token swaps.

Last 30 days101,366 tx

Visit

WingRiders

Native AMM DEX on Cardano focused on fast settlement and predictable fees, with stableswap pools and an integrated yield-farming layer.

Last 30 days32,468 tx

Visit

SundaeSwap

Native, scalable Cardano AMM DEX with automated liquidity provision, yield farming, and an order-book overlay built on Plutus.

Last 30 days14,964 tx

Visit

CSWAP

CSWAP Systems is a next-gen decentralized exchange (DEX) that bridges tokens, NFTs, and real-world assets in one seamless trading ecosystem.

Last 30 days11,871 tx

Visit

Splash

Open-source decentralized protocol for efficient market-making and trading on Cardano, with batched settlement and gas-efficient routing.

Last 30 days10,995 tx

Visit

VyFinance

Cardano DeFi protocol with a decentralized exchange, redistributive BAR mechanism, governance, lottery, and token and NFT vaults bundled together.

Last 30 days7,306 tx

Visit

More Apps

Explore 4 more DEXs

---

Without Statistics

Clean display focusing only on app information:

<AppGrid
  categories={['wallet']}
  limit={4}
  showStats={false}
/>

AdaLite

AdaLite was developed by vacuumlabs, they were also responsible for the Cardano Ledger app and won the crypto puzzle at the IOHK Summit 2019.

Visit

Atomic Wallet

Multi-cryptocurrency wallet that supports Cardano. During the integration they contributed code to the Cardano Rust library.

Visit

Begin Wallet

Non-custodial Cardano wallet for browser and mobile with payment links, deep-link support, Begin ID usernames (ENS-style), and Ledger and Keystone hardware support.

Visit

Daedalus

Full-node Cardano wallet developed by IOG, one of Cardano's founding entities. Validates the chain locally rather than trusting third parties.

Visit

More Apps

Explore 10 more WALLETs

---

Multiple Tags (DeFi)

Show apps from multiple categories:

<AppGrid
  categories={['dex', 'lending']}
  limit={6}
  gridTitle="DeFi Apps"
  ctaText="Open App"
/>

DeFi Apps

Minswap

Multi-pool decentralized exchange on Cardano with deep liquidity, yield farming, and one of the highest-volume venues for native token swaps.

Last 30 days101,366 tx

#1

Open App

WingRiders

Native AMM DEX on Cardano focused on fast settlement and predictable fees, with stableswap pools and an integrated yield-farming layer.

Last 30 days32,468 tx

#2

Open App

SundaeSwap

Native, scalable Cardano AMM DEX with automated liquidity provision, yield farming, and an order-book overlay built on Plutus.

Last 30 days14,964 tx

#3

Open App

CSWAP

CSWAP Systems is a next-gen decentralized exchange (DEX) that bridges tokens, NFTs, and real-world assets in one seamless trading ecosystem.

Last 30 days11,871 tx

#4

Open App

Splash

Open-source decentralized protocol for efficient market-making and trading on Cardano, with batched settlement and gas-efficient routing.

Last 30 days10,995 tx

#5

Open App

Liqwid

Non-custodial pooled lending protocol on Cardano with liquid staking, supporting multiple supplied assets and qToken collateral receipts.

Last 30 days7,716 tx

#6

Open App

More Apps

Explore 11 more apps

---

How It Works

Filtering & Sorting

1. Filters all apps with ANY of the specified tags from apps.js
2. Sorts by transaction count (descending)
3. Assigns category-specific ranks (1, 2, 3, etc.)
4. Applies limit if specified
5. Displays "More Apps" card when limited

Transaction Data Matching

The component uses the statsLabel field from apps.js to match apps with their transaction data:

{
  title: "Minswap Dex",
  icon: "/img/app-icons/minswap.svg",
  statsLabel: "minswap",  // Matches label in tx-stats.json
  tags: ["dex"],
  // ...
}

See the Transaction Rankings Guide for details on how transaction data is collected and how to get your app tracked.

---

Customization

Adding App Icons

1. Place your logo in /static/img/app-icons/
2. Add the icon field to your app in apps.js:

   icon: "/img/app-icons/your-app.svg"

Transaction Data

To display transaction statistics for your app:

1. Add the statsLabel field to your app entry
2. Ensure the label matches your entry in /src/data/tx-stats.json
3. See Transaction Rankings Guide

---

"More Apps" Card

When using the limit prop, a special card appears at the end of the grid:

• Shows the count of remaining apps not displayed
• Links to /apps?tags=... by default (customizable via moreLink)
• Matches the design of app cards for consistency

---

Mobile Optimization

The grid automatically adjusts for mobile devices:

• Desktop: Multi-column grid (minimum 280px per card)
• Tablet: 2-3 columns depending on screen width
• Mobile: Single column for optimal readability
• Cards maintain consistent padding and spacing across all breakpoints

---

Integration Example

Using AppGrid on a custom page:

---
title: Cardano DeFi Ecosystem
---

import AppGrid from '@site/src/components/AppGrid';

# Decentralized Finance on Cardano

Explore the growing DeFi ecosystem on Cardano, ranked by real transaction volume.

<AppGrid
  categories={['dex', 'lending']}
  limit={8}
  gridTitle="Top DeFi Apps by Volume"
  ctaText="Open App"
/>

[View All Apps](/apps)

---

Related Components

• AppList - Compact list component for categorized apps
• Apps Page - Full app directory with filtering

---

Technical Notes

• Component sources apps from /src/data/apps.js
• Transaction data from /src/data/tx-stats.json
• Ranking is category-specific (not global app ranking)
• Handles missing icons gracefully with fallback badges
• Supports both require() and string URL paths for icons

---

Migration from DexGrid

The AppGrid component replaces the previous DexGrid component. To migrate:

// Before (DexGrid)
import DexGrid from '@site/src/components/DexGrid';
<DexGrid limit={5} showRank={false} />

// After (AppGrid)
import AppGrid from '@site/src/components/AppGrid';
<AppGrid categories={['dex']} limit={5} showRank={false} ctaText="Visit DEX" moreTitle="More DEXes" />

Key differences:

• categories prop is now required (defaults to ['dex'])
• ctaText prop allows customizing the button text (was hardcoded as "Visit DEX")
• moreTitle prop allows customizing the "more" card title
• moreLink prop allows customizing the "more" card link