---
type: block
title: Products
description: Product collection layouts for bundles, grouped offers, and category-led merchandising.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro live props={{ name: 'products-1' }}
---
import Products1Block from "@/components/blocks/products-1.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Products1Block
  locale="en-US"
  discountLabel="Save"
  badge="Product grid"
  title="A simple product grid that works well after a features section"
  products={[
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      title: "Landing page kit",
      description:
        "Tight cards are enough when the page already established the main product story.",
      price: { value: 80, compareAt: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      title: "Docs launch kit",
      description:
        "Tight cards are enough when the page already established the main product story.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      title: "Section starter pack",
      description:
        "Tight cards are enough when the page already established the main product story.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      title: "Conversion toolkit",
      description:
        "Tight cards are enough when the page already established the main product story.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
  ]}
/>
```

```astro live props={{ name: 'products-2' }}
---
import Products2Block from "@/components/blocks/products-2.astro"
---

<Products2Block
  badge="Collection"
  title="A compact list layout for product overviews"
  products={[
    {
      title: "Marketing pages",
      description:
        "Describe the collection first, then let subpages or product cards handle the deeper details.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      title: "Documentation templates",
      description:
        "Describe the collection first, then let subpages or product cards handle the deeper details.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      title: "Conversion flows",
      description:
        "Describe the collection first, then let subpages or product cards handle the deeper details.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      title: "Onboarding bundle",
      description:
        "Describe the collection first, then let subpages or product cards handle the deeper details.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
  ]}
/>
```

```astro live props={{ name: 'products-3' }}
---
import Products3Block from "@/components/blocks/products-3.astro"
---

<Products3Block
  badge="Pricing"
  title="Minimal cards with prominent pricing"
  products={[
    {
      title: "Hero set",
      description:
        "Use compact cards when the products are really grouped content patterns.",
      price: { value: 49, currency: "USD" },
    },
    {
      title: "Article set",
      description:
        "Use compact cards when the products are really grouped content patterns.",
      price: { value: 79, currency: "USD" },
    },
    {
      title: "Pricing set",
      description:
        "Use compact cards when the products are really grouped content patterns.",
      price: { value: 99, currency: "USD" },
    },
  ]}
/>
```

```astro live props={{ name: 'products-4' }}
---
import Products4Block from "@/components/blocks/products-4.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Products4Block
  title="A product row with room for a collection-wide action"
  description="Each card can link to a deeper product page or serve as a compact collection overview."
  buttons={[
    { label: "View all products", href: "/blocks/product/" },
    { label: "Compare plans", href: "/blocks/pricing/" },
  ]}
  products={[
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      title: "Launch page bundle",
      description:
        "Each card can link to a deeper product page or serve as a compact collection overview.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      title: "Editorial bundle",
      description:
        "Each card can link to a deeper product page or serve as a compact collection overview.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      title: "Onboarding bundle",
      description:
        "Each card can link to a deeper product page or serve as a compact collection overview.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
  ]}
/>
```

```astro live props={{ name: 'products-5' }}
---
import Products5Block from "@/components/blocks/products-5.astro"
import placeholderImage from "@/assets/placeholder.svg"
---

<Products5Block
  badge="Featured"
  title="Image-centric product grid with hover effects"
  buttons={[{ label: "Featured product", href: "/blocks/product/" }]}
  products={[
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      title: "Landing page kit",
      description:
        "Tall product cards with hover zoom, ideal for visual product showcases.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      title: "Docs launch kit",
      description:
        "Tall product cards with hover zoom, ideal for visual product showcases.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      title: "Section starter pack",
      description:
        "Tall product cards with hover zoom, ideal for visual product showcases.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
    {
      image: {
        src: placeholderImage,
        alt: "",
      },
      title: "Conversion toolkit",
      description:
        "Tall product cards with hover zoom, ideal for visual product showcases.",
      price: { value: 100, currency: "USD", unit: "month" },
    },
  ]}
/>
```

## Installation

```bash
npx shadcn@latest add @fulldev/products-1 @fulldev/products-2 @fulldev/products-3 @fulldev/products-4 @fulldev/products-5
```