App Grid

AppGrid

The AppGrid component displays a responsive grid of Cardano applications, with transaction statistics and rankings. It filters apps by their primary category (one or several) 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 days93,197 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 days40,795 tx

#2

Visit

Splash

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

Last 30 days17,036 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 days12,457 tx

#4

Visit

More Apps

Explore 5 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. The badge is part of the statistics block, so it only appears together with showStats and only on apps that have transaction data.
showStats	boolean	true	Whether to display transaction statistics on app cards. false also hides the rank badges.
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.
excludeSlug	string	null	Slug of an app to exclude from the grid (e.g. to omit the current app).
prioritizeMaintainerPicks	boolean	false	When true, maintainer-picked apps are sorted ahead of others.

---

Features

Flexible Category Filtering

Filter apps by any category or combination of categories:

• Single category: categories={['dex']} or categories={['lending']}
• Multiple categories: categories={['dex', 'lending']} (shows apps in ANY of these categories)

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 days93,197 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 days40,795 tx

#2

Visit DEX

Splash

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

Last 30 days17,036 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 days12,457 tx

#4

Visit DEX

More DEXes

Explore 5 more DEXs

---

Lending Platforms

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

Lending Platforms

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 days30,168 tx

#1

Visit Platform

Liqwid

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

Last 30 days3,385 tx

#2

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 days1,898 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,697 tx

#1

Visit

Masumi

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

Last 30 days1,272 tx

#2

Visit

Iagon

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

Last 30 days835 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 6 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 days93,197 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 days40,795 tx

Visit

Splash

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

Last 30 days17,036 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 days12,457 tx

Visit

SundaeSwap

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

Last 30 days10,512 tx

Visit

VyFinance

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

Last 30 days6,382 tx

Visit

More Apps

Explore 3 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 the three organizations that launched Cardano. Validates the chain locally rather than trusting third parties.

Visit

More Apps

Explore 9 more WALLETs

---

Multiple Categories (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 days93,197 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 days40,795 tx

#2

Open App

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 days30,168 tx

#3

Open App

Splash

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

Last 30 days17,036 tx

#4

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 days12,457 tx

#5

Open App

SundaeSwap

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

Last 30 days10,512 tx

#6

Open App

More Apps

Explore 10 more apps

---

How It Works

Filtering & Sorting

1. Filters all apps from apps.js whose primary category is one of the specified categories. Properties (opensource, nft, ...) are not considered
2. Sorts by transaction count (descending), then by title. With prioritizeMaintainerPicks, maintainer picks come first regardless of their count
3. Assigns category-specific ranks (1, 2, 3, etc.) in that order
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
  category: "dex",        // exactly one, this is what AppGrid filters on
  properties: ["opensource"],
  // ...
}

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