PluginGrid

v1.0.0

Grid layout for rendering collections of PluginCard items.

Import

import { PluginGrid } from '@meteorack/sdk-react';

How To Use It

Use it to render a responsive collection of plugin or module cards with consistent spacing.
Pass loading state when data is still pending so the grid can keep its layout stable with skeleton placeholders.

Works Well With

PluginCard PageHeader Notice

Props

plugins: PluginData[]

Array of plugin records passed through to PluginCard items.

loading?: boolean

Renders skeleton cards while plugin data is loading.

className?: string

Optional class name for the grid wrapper.

Example

PluginGrid.tsx

import { PluginGrid } from '@meteorack/sdk-react';

const plugins = [
  {
    slug: 'seo',
    name: 'Meteorack SEO',
    description: 'Metadata, sitemap, and schema tools.',
    version: '1.2.0',
    iconUrl: '/seo-icon.svg',
    status: 'active',
    licenseStatus: 'licensed',
    isLicensed: true,
  },
  {
    slug: 'forms',
    name: 'Meteorack Forms',
    description: 'High-conversion forms and automations.',
    version: '1.1.0',
    iconUrl: '/forms-icon.svg',
    status: 'not_installed',
    licenseStatus: 'trial',
    isLicensed: false,
    price: '$29/mo',
  },
];

export function ModuleCatalog() {
  return <PluginGrid plugins={plugins} loading={false} />;
}

PreviousPluginCard NextLicenseBadge