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

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

## Products 1

```tsx title="Usage of @fulldev/products-1 (react/gallery/blocks/products-1.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Products1 } from "@/components/blocks/products-1"

const placeholderImage = placeholder.src

export default function Products1Demo() {
  return (
    <>
      <Products1
        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" },
          },
        ]}
      />
    </>
  )
}
```

## Products 2

```tsx title="Usage of @fulldev/products-2 (react/gallery/blocks/products-2.tsx, not installed)"
import { Products2 } from "@/components/blocks/products-2"

export default function Products2Demo() {
  return (
    <>
      <Products2
        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" },
          },
        ]}
      />
    </>
  )
}
```

## Products 3

```tsx title="Usage of @fulldev/products-3 (react/gallery/blocks/products-3.tsx, not installed)"
import { Products3 } from "@/components/blocks/products-3"

export default function Products3Demo() {
  return (
    <>
      <Products3
        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" },
          },
        ]}
      />
    </>
  )
}
```

## Products 4

```tsx title="Usage of @fulldev/products-4 (react/gallery/blocks/products-4.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Products4 } from "@/components/blocks/products-4"

const placeholderImage = placeholder.src

export default function Products4Demo() {
  return (
    <>
      <Products4
        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" },
          },
        ]}
      />
    </>
  )
}
```

## Products 5

```tsx title="Usage of @fulldev/products-5 (react/gallery/blocks/products-5.tsx, not installed)"
import { placeholderImage as placeholder } from "@/lib/placeholder-image"
import { Products5 } from "@/components/blocks/products-5"

const placeholderImage = placeholder.src

export default function Products5Demo() {
  return (
    <>
      <Products5
        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" },
          },
        ]}
      />
    </>
  )
}
```

## Install what this page shows

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