@jet-w/astro-blog.component.product-card

A reusable product card Vue component designed for @jet-w/astro-blog. Display products, projects, or any card-based content with search, price filtering, and responsive grid layout.

Tech Stack

Framework

Vue 3 Astro

Language

TypeScript

Build

tsup ESM

Features

Text Search

Filter cards by title, description, tags, status, and price

Price Filtering

Set min/max price range to narrow down results

Responsive Grid

Configurable 2, 3, or 4 column layouts with mobile support

Status Badges

Color-coded status indicators: active, completed, wip, archived

What is Product Card?

@jet-w/astro-blog.component.product-card is a Vue 3 component set that provides an interactive product/project showcase within Astro-based blogs and documentation sites.

It is designed for scenarios where you need to present a collection of items — such as products, tools, projects, or resources — with rich card-based layouts and filtering controls.

Key Capabilities

  • Text Search — Filter cards by matching across title, description, tags, link, status, and price fields.
  • Price Range Filter — Set minimum and/or maximum price to narrow down results. Supports Free as a price value.
  • Status Badges — Color-coded badges for active, completed, wip, archived, or custom statuses.
  • Colored Tags — Tags displayed as rounded badges with automatically cycling theme colors.
  • Cover Images — Optional 16
    cover images with hover zoom effect.
  • Clickable Cards — Cards with a link prop become clickable and open in a new tab.
  • Description Tooltip — Long descriptions truncated to 2 lines with full text revealed on hover.
  • Dark Mode — Full dark mode support, adapting automatically to the parent page theme.
  • Responsive Grid — 1 column on mobile, 2 on tablet, and 2/3/4 on desktop.

Quick Start

Install the package:

npm install @jet-w/astro-blog.component.product-card

Use the component in an Astro MDX page:

import ProductCardGrid from '@jet-w/astro-blog.component.product-card/components/ProductCardGrid.vue';

export const cards = [
  {
    title: 'Mechanical Keyboard',
    description: 'A premium 75% mechanical keyboard with hot-swappable switches.',
    image: '/images/keyboard.jpg',
    price: '$129.99',
    tags: ['Electronics', 'Peripherals'],
    link: 'https://example.com/keyboard',
    status: 'active',
  },
  {
    title: 'Open Source Toolkit',
    description: 'A curated collection of open-source developer tools.',
    tags: ['Software', 'Open Source'],
    price: 'Free',
    status: 'active',
  },
];

<ProductCardGrid client:load cards={cards} columns={3} />

Links