---
type: block
title: Product
description: A focused product section for flagship offers and compact product storytelling.
---

> 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).

## Product 1

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

const placeholderImage = placeholder.src

export default function Product1Demo() {
  return (
    <>
      <Product1
        badge="Featured product"
        title="One focused product section for a flagship offer"
        description="The product family only needs one strong section when the page should quickly explain the offer, its price, and the next action."
        image={{
          src: placeholderImage,
          alt: "",
        }}
        price={{
          value: 129,
          currency: "USD",
          unit: "month",
        }}
        note="Includes reusable launch sections, content layouts, and shared visual rules for docs and marketing pages."
        buttons={[
          { label: "Pricing", href: "/blocks/pricing/" },
          { label: "Reviews", href: "/blocks/reviews/" },
        ]}
      />
    </>
  )
}
```

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/product-1
```