https://github.com/m4nute/pricing-page-shadcn

Pricing Page template made with Shadcn UI & Next.js 14. Completely customizable
https://github.com/m4nute/pricing-page-shadcn

nextjs pricing shadcn-ui tailwindcss

Last synced: 3 months ago
JSON representation

Pricing Page template made with Shadcn UI & Next.js 14. Completely customizable

• Host: GitHub
• URL: https://github.com/m4nute/pricing-page-shadcn
• Owner: m4nute
• Created: 2023-11-10T20:24:33.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-04-05T15:13:57.000Z (7 months ago)
• Last Synced: 2024-04-13T13:11:52.793Z (7 months ago)
• Topics: nextjs, pricing, shadcn-ui, tailwindcss
• Language: TypeScript
• Homepage: https://pricing-page-shadcn.vercel.app
• Size: 53.7 KB
• Stars: 55
• Watchers: 1
• Forks: 4
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-shadcn-ui - pricing-page-shadcn - Pricing Page made with shadcn/ui & Next.js 14. Completely customizable. (Libs and Components)
• jimsghstars - m4nute/pricing-page-shadcn - Pricing Page template made with Shadcn UI & Next.js 14. Completely customizable (TypeScript)
• awesome-shadcn-ui - Pricing Page Shadcn - Pricing Page template made with Shadcn UI & Next.js 14. Completely customizable (Components)
• awesome-shadcn-ui - Pricing Page Shadcn - Pricing Page template made with Shadcn UI & Next.js 14. Completely customizable (Components)

README

        
# Pricing Page made with Shadcn UI

## Installation

Run this or the equivalent in npm/pnpm/yarn

- bunx shadcn-ui@latest init

- bunx shadcn-ui add dropdown-menu tabs card button

- bun i next-themes

To setup light/dark/system mode, you can follow the [official dark theme guide](https://ui.shadcn.com/docs/dark-mode/next).

This pricing page should adapt automatically to the selected theme.

## Features

- Dark & Light Mode

- Monthly / Yearly Plan

- Yearly Plan savings automatically calculated and highlighted

- "Popular" tag for highlighting a specific plan (PRO Plan in the live preview)

- "Exclusive" tag for highlighting a specific plan (EXCLUSIVE Plan in the dark theme live preview)

## Need Help?

I provide consultations and offer development services. Email me at [email protected] if you're interested.