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

> 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: 'pricing-1' }}
---
import Pricing1Block from "@/components/blocks/pricing-1.astro"
---

<Pricing1Block
  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/" },
    },
  ]}
/>
```

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

<Pricing2Block
  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/" },
    },
  ]}
/>
```

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

<Pricing3Block
  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/" },
  }}
/>
```

## Installation

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