{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-card",
  "title": "Pricing card",
  "description": "one plan · stack 2–3 on a paywall · `highlighted` on one",
  "dependencies": [
    "lucide-react-native@^1.21.0"
  ],
  "registryDependencies": [
    "@kit-native/badge",
    "@kit-native/card",
    "@kit-native/icon",
    "@kit-native/lib-utils",
    "@kit-native/text"
  ],
  "files": [
    {
      "path": "components/kit/pricing-card.tsx",
      "content": "import { Badge } from '@/components/ui/badge';\nimport { Card } from '@/components/ui/card';\nimport { Icon } from '@/components/ui/icon';\nimport { Text } from '@/components/ui/text';\nimport { cn } from '@/lib/utils';\nimport { CheckIcon } from 'lucide-react-native';\nimport type * as React from 'react';\nimport { View } from 'react-native';\n\ntype Props = {\n  name: string;\n  price: string;\n  /** \"per month\", \"per seat / month\", \"one-off\". */\n  period?: string;\n  description?: string;\n  features: string[];\n  /** The plan's Button. */\n  action: React.ReactNode;\n  /** The recommended plan: a border and a badge. One per screen. */\n  highlighted?: boolean;\n  badge?: string;\n  className?: string;\n};\n\n/** One plan. Stack 2–3 on a paywall; highlight one. */\nexport function PricingCard({ name, price, period, description, features, action, highlighted, badge = 'Most popular', className }: Props) {\n  return (\n    <Card className={cn('relative gap-5 p-5', highlighted && 'border-primary border-2', className)}>\n      {highlighted ? (\n        <Badge className=\"absolute -top-3 left-5\">\n          <Text>{badge}</Text>\n        </Badge>\n      ) : null}\n      <View className=\"gap-1\">\n        <Text role=\"heading\" className=\"font-semibold\">\n          {name}\n        </Text>\n        {description ? <Text className=\"text-muted-foreground text-sm\">{description}</Text> : null}\n      </View>\n      <View className=\"flex-row items-baseline gap-1\">\n        <Text className=\"text-4xl font-semibold tracking-tight\">{price}</Text>\n        {period ? <Text className=\"text-muted-foreground text-sm\">{period}</Text> : null}\n      </View>\n      <View className=\"gap-2\">\n        {features.map((f) => (\n          <View key={f} className=\"flex-row gap-2\">\n            <Icon as={CheckIcon} size={16} className=\"text-success mt-0.5\" />\n            <Text className=\"flex-1 text-sm\">{f}</Text>\n          </View>\n        ))}\n      </View>\n      <View>{action}</View>\n    </Card>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/kit/pricing-card.tsx"
    }
  ],
  "meta": {
    "exports": [
      "PricingCard"
    ],
    "api": "<PricingCard name price period? description? features action highlighted? />"
  },
  "docs": "Run `npx expo install --fix` afterwards so Expo SDK packages match your SDK. Needs the kit theme (`@kit-native/theme`) and `KitThemeProvider` from `@kit-native/lib-theme-context` at the root.",
  "categories": [
    "marketing"
  ],
  "type": "registry:component"
}