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 tags={['dex']} />

Live Preview:

Minswap Dex

Minswap is a multi-pool decentralized exchange on Cardano.

Last 30 days129,124 tx

#1

Visit

WingRiders

The DEX on Cardano. Native and fast AMM decentralized exchange platform.

Last 30 days36,857 tx

#2

Visit

SundaeSwap

SundaeSwap is a native, scalable decentralized exchange and automated liquidity provision protocol.

Last 30 days22,040 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 days10,040 tx

#4

Visit

More Apps

Explore 8 more DEXs

---

Props

Prop	Type	Default	Description
tags	string[]	['dex']	Array of tags to filter apps by. Apps matching ANY of the tags will be 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
  tags={['dex']}
  limit={4}
  gridTitle="Top Cardano DEXs"
  ctaText="Visit DEX"
  moreTitle="More DEXes"
/>

Top Cardano DEXs

Minswap Dex

Minswap is a multi-pool decentralized exchange on Cardano.

Last 30 days129,124 tx

#1

Visit DEX

WingRiders

The DEX on Cardano. Native and fast AMM decentralized exchange platform.

Last 30 days36,857 tx

#2

Visit DEX

SundaeSwap

SundaeSwap is a native, scalable decentralized exchange and automated liquidity provision protocol.

Last 30 days22,040 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 days10,040 tx

#4

Visit DEX

More DEXes

Explore 8 more DEXs

---

Lending Platforms

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

Lending Platforms

Liqwid

Liqwid is a non-custodial pooled lending protocol with liquid staking built on Cardano.

Last 30 days7,686 tx

#1

Visit Platform

Aada.finance

Aada is a peer-to-peer lending and borrowing protocol on the Cardano blockchain.

Visit Platform

Danogo

Danogo is a yield aggregator that provides lending and borrowing, obtaining optimized rates by combining data from multiple Cardano protocols.

Visit Platform

FluidTokens

FluidTokens is the leading Cardano-Bitcoin DeFi ecosystem, presenting a diverse range of services like lending, borrowing, staking, sponsored transactions and an array of other inventive products including rental options, boosted stake features, and more.

Visit Platform

More Lending

Explore 2 more LENDINGs

---

Marketplaces

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

Marketplaces

Indigo

Indigo is an autonomous synthetics protocol for on-chain price exposure to real-world assets, built on Cardano.

Last 30 days7,850 tx

#1

Visit

JPG Store

Discover artwork, explore communities, and support artists on Cardano.

Last 30 days7,791 tx

#2

Visit

Liqwid

Liqwid is a non-custodial pooled lending protocol with liquid staking built on Cardano.

Last 30 days7,686 tx

#3

Visit

Strike Finance

DeFi derivatives protocol revolutionizing perpetual futures trading on the Cardano blockchain.

Last 30 days1,638 tx

#4

Visit

More Apps

Explore 16 more MARKETPLACEs

---

Without Rankings

Useful for showcasing apps without emphasizing competitive ranking:

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

Minswap Dex

Minswap is a multi-pool decentralized exchange on Cardano.

Last 30 days129,124 tx

Visit

WingRiders

The DEX on Cardano. Native and fast AMM decentralized exchange platform.

Last 30 days36,857 tx

Visit

SundaeSwap

SundaeSwap is a native, scalable decentralized exchange and automated liquidity provision protocol.

Last 30 days22,040 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 days10,040 tx

Visit

Splash

Decentralized open-source protocol for efficient market-making and trading on Cardano.

Last 30 days8,983 tx

Visit

VyFinance

VyFinance is Decentralized Finance protocol built on Cardano that includes features such as a decentralised exchange (DEx), redistributive mechanism (BAR), governance, lottery and token/NFT Vaults.

Last 30 days4,491 tx

Visit

More Apps

Explore 6 more DEXs

---

Without Statistics

Clean display focusing only on app information:

<AppGrid
  tags={['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

Begin Wallet a non-custodial light Cardano Wallet, available as an Extension and Mobile. We offer payment link compatibility with deep link support, Begin ID user name based on ENS protocol for Wallet Address. Hardware wallet support Ledger and Keystone. Based on our own open source cryptographic core.

Visit

D

Daedalus

Daedalus is a full node and developed by IOHK, one of the founding entities of Cardano.

Visit

More Apps

Explore 11 more WALLETs

---

Multiple Tags (DeFi)

Show apps from multiple categories:

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

DeFi Apps

Minswap Dex

Minswap is a multi-pool decentralized exchange on Cardano.

Last 30 days129,124 tx

#1

Open App

WingRiders

The DEX on Cardano. Native and fast AMM decentralized exchange platform.

Last 30 days36,857 tx

#2

Open App

SundaeSwap

SundaeSwap is a native, scalable decentralized exchange and automated liquidity provision protocol.

Last 30 days22,040 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 days10,040 tx

#4

Open App

Splash

Decentralized open-source protocol for efficient market-making and trading on Cardano.

Last 30 days8,983 tx

#5

Open App

Liqwid

Liqwid is a non-custodial pooled lending protocol with liquid staking built on Cardano.

Last 30 days7,686 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
  tags={['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 tags={['dex']} limit={5} showRank={false} ctaText="Visit DEX" moreTitle="More DEXes" />

Key differences:

• tags 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