---
type: block
title: Pricing
description: Pricing sections for plan grids, featured offers, and concise offer presentation.
---

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

## Pricing 1

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

export default function Pricing1Demo() {
  return (
    <>
      <Pricing1
        title="Simple, transparent pricing"
        description="Choose the plan that fits your workflow. Upgrade or downgrade at any time."
        featuredLabel="Popular"
        plans={[
          {
            name: "Starter",
            description: "For individuals and small projects getting started.",
            price: {
              value: 19,
              currency: "USD",
              unit: "month",
            },
            features: [
              "Up to 3 projects",
              "Basic analytics",
              "Community support",
              "1 GB storage",
            ],
            button: { label: "Get started", href: "/docs/" },
          },
          {
            name: "Team",
            description:
              "For growing teams that need more power and collaboration.",
            price: {
              value: 49,
              currency: "USD",
              unit: "month",
            },
            featured: true,
            features: [
              "Unlimited projects",
              "Advanced analytics",
              "Priority support",
              "10 GB storage",
              "Team collaboration",
            ],
            button: { label: "Get started", href: "/docs/" },
          },
          {
            name: "Studio",
            description: "For agencies and large teams with advanced needs.",
            price: {
              value: 99,
              currency: "USD",
              unit: "month",
            },
            features: [
              "Everything in Team",
              "Custom integrations",
              "Dedicated support",
              "Unlimited storage",
              "SSO and audit logs",
            ],
            button: { label: "Contact sales", href: "/docs/" },
          },
        ]}
      />
    </>
  )
}
```

## Pricing 2

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

export default function Pricing2Demo() {
  return (
    <>
      <Pricing2
        locale="en-US"
        discountLabel="Save"
        title="Pick the plan that matches your needs"
        description="Start small and scale as you grow. All plans include a 14-day free trial."
        plans={[
          {
            name: "Basic",
            description: "Essential tools for personal use and small projects.",
            price: {
              value: 29,
              currency: "USD",
              unit: "month",
            },
            features: [
              "5 projects",
              "Basic analytics",
              "Email support",
              "2 GB storage",
            ],
            button: { label: "Start free trial", href: "/docs/" },
          },
          {
            name: "Pro",
            description:
              "Advanced features for professionals and growing teams.",
            price: {
              value: 79,
              compareAt: 99,
              currency: "USD",
              unit: "month",
            },
            featured: true,
            features: [
              "Unlimited projects",
              "Advanced analytics",
              "Priority support",
              "50 GB storage",
              "Custom domains",
              "API access",
            ],
            button: { label: "Start free trial", href: "/docs/" },
          },
        ]}
      />
    </>
  )
}
```

## Pricing 3

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

export default function Pricing3Demo() {
  return (
    <>
      <Pricing3
        badge="Limited offer"
        title="Everything you need in one plan"
        description="No complex tiers. One plan with everything included for your entire team."
        offer={{
          name: "Studio bundle",
          description:
            "Full access for teams managing content, product, and marketing.",
          price: {
            value: 249,
            currency: "USD",
            unit: "month",
          },
          features: [
            "Unlimited projects and users",
            "Advanced analytics and reporting",
            "Dedicated account manager",
            "Custom integrations and API",
            "SSO and enterprise security",
            "99.9% uptime SLA",
          ],
          button: { label: "Get started today", href: "/docs/" },
        }}
      />
    </>
  )
}
```

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/pricing-1 @fulldev/pricing-2 @fulldev/pricing-3
```