# Pricing page

A pricing page using Shadcn UI components and Croct.

By Shadcn UI. Categories: framework, interface, language, library.

[Demo](https://shadcn-ui-pricing-page.preview.croct.live) · [Deploy](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcroct-tech%2Fvercel-template&project-name=shadcn-ui-pricing-page&repository-name=shadcn-ui-pricing-page&demo-title=Pricing+page&demo-description=A+pricing+page+using+Shadcn+UI+components+and+Croct.&demo-image=https%3A%2F%2Fcdn.croct.io%2Fassets%2Ftemplates%2Fcovers%2Flibrary-shadcn-ui-pricing-page.png&external-id=shadcn-ui%3A%2F%2Fblock%2Fpricing-page&integration-ids=oac_cTQZ22CIXn5XgZXYk2nBwFdU&demo-url=https%3A%2F%2Fshadcn-ui-pricing-page.preview.croct.live) · [Source](https://github.com/croct-tech/templates/blob/master/templates/shadcn-ui/block/pricing-page/)

## Installation

```sh
npx croct@latest use shadcn-ui://block/pricing-page
```

# Introduction

This template provides a fully featured SaaS pricing page built using [Shadcn UI](https://ui.shadcn.com/?utm_source=croct) components and Croct for dynamic content management and personalization.

It includes all standard pricing page elements, along with:

- **Content management**: Update page content without redeploying your application.
- **AB testing**: Create and compare multiple page versions to determine which converts best.
- **Personalization**: Customize page elements dynamically based on user attributes. Adjust billing frequency (monthly/yearly), highlight specific plans, reorder features, and more.
- **Analytics**: Monitor user interactions, measure element effectiveness, and track conversion rates.

The template is compatible with any React project using [Tailwind CSS](https://tailwindcss.com/?utm_source=croct). For [Next.js](https://nextjs.org/?utm_source=croct), both `app` and `pages` routers are supported.

## Usage

Run the following command on an existing project or in an empty folder to create a new one:

```croct-cmd
croct use shadcn-ui://block/pricing-page
```

You can pass options in the command line to customize the template:

```croct-cmd
croct use shadcn-ui://block/pricing-page --router=page
```

## Options

The following options are available for this template:

| Option        | Description                                  | Required | Default  |
|---------------|----------------------------------------------|----------|----------|
| `version`     | The Next.js version to use for new projects. | No       | `latest` |
| `router`      | The router to use (`app` or `page`).         | No       | `app`    |