Pricing Plan Card (Components/PricingCard.vue)

larasonic-vue · resources/js/Components/PricingCard.vue · vue · MIT
ui, payments, crm, fw:vue

Reusable Vue card that displays a pricing plan with price, feature list, billing period, and call-to-action button. Use for pricing pages and subscription comparisons.

<!--
  Source: https://github.com/shipfastlabs/larasonic-vue | License: MIT | Copyright 2024 Pushpak Chhajed
  Provided via justclaw.it.com; keep this notice with the code.
-->
<script setup>
import { CheckIcon } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { Card, CardFooter } from '@/components/ui/card'

defineProps({
  features: {
    type: Array,
    required: false,
    default: () => [
      'Production-ready Docker setup',
      'Advanced authentication system',
      'API endpoints with Sanctum',
      'Comprehensive documentation',
      'Regular updates & improvements',
      'Best In Class IDE support',
    ],
  },
  price: {
    type: Number,
    default: 19,
  },
  plan: {
    type: String,
    default: 'PRO',
  },
  description: {
    type: St

... (truncated -- full source via MCP)

See the full source, get the GitHub permalink, and search for more like it.

Get a free API key