diff --git a/app/(root)/pricing/page.tsx b/app/(root)/pricing/page.tsx
index 5f08702..5e84a3f 100644
--- a/app/(root)/pricing/page.tsx
+++ b/app/(root)/pricing/page.tsx
@@ -6,6 +6,9 @@ import {
   PricingFAQ,
   PricingCTA,
 } from "@/components/bilalUi/pricing";
+import { isLemonConfigured } from "@/config/lemon";
+
+const lemonReady = isLemonConfigured();
 
 const plans = [
   {
@@ -44,7 +47,9 @@ const plans = [
     cta: "Get Lifetime Access",
     href: "#",
     popular: true,
+    badge: "Coming Soon",
     comingSoon: true,
+    checkout: false,
   },
 ];
 
@@ -130,7 +135,7 @@ export default function PricingPage() {
       <section className="px-4 pb-20">
         <div className="mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-8 items-stretch">
           {plans.map((plan) => (
-            <PricingCard key={plan.name} {...plan} />
+            <PricingCard key={plan.name} {...plan} checkout={plan.checkout} />
           ))}
         </div>
       </section>
@@ -148,7 +153,7 @@ export default function PricingPage() {
 
       <PricingCTA
         description="Join the community and get lifetime access to every block, template, and premium component for just $15."
-        primaryCta={{ label: "Get Lifetime Access — $15", href: "#" }}
+        primaryCta={{ label: "Get Lifetime Access — $15", href: lemonReady ? "/api/lemon/checkout" : "#" }}
         secondaryCta={{ label: "Browse Free Components", href: "/docs/components/button" }}
       />
     </main>
diff --git a/app/api/debug/env/route.ts b/app/api/debug/env/route.ts
new file mode 100644
index 0000000..e7636ff
--- /dev/null
+++ b/app/api/debug/env/route.ts
@@ -0,0 +1,28 @@
+import { NextResponse } from "next/server";
+import { isLemonConfigured, getLemonConfig } from "@/config/lemon";
+
+export async function GET() {
+  const configured = isLemonConfigured();
+  let config: Record<string, string> = {};
+
+  if (configured) {
+    const c = getLemonConfig();
+    config = {
+      storeId: String(c.storeId),
+      productId: String(c.productId),
+      variantId: String(c.variantId),
+      apiKeyLength: String(c.apiKey.length),
+    };
+  }
+
+  return NextResponse.json({
+    configured,
+    env: {
+      hasApiKey: !!process.env.LEMONSQUEEZY_API_KEY,
+      hasStoreId: !!process.env.LEMONSQUEEZY_STORE_ID,
+      hasProductId: !!process.env.LEMONSQUEEZY_PRODUCT_ID,
+      hasVariantId: !!process.env.LEMONSQUEEZY_VARIANT_ID,
+    },
+    config,
+  });
+}
diff --git a/app/api/lemon/checkout/route.ts b/app/api/lemon/checkout/route.ts
new file mode 100644
index 0000000..0d06175
--- /dev/null
+++ b/app/api/lemon/checkout/route.ts
@@ -0,0 +1,58 @@
+import { NextResponse, NextRequest } from "next/server";
+import { createCheckoutUrl, setupLemon } from "@/lib/lemon";
+import { isLemonConfigured } from "@/config/lemon";
+
+export async function GET() {
+  if (!isLemonConfigured()) {
+    return NextResponse.json(
+      { error: "Payment not configured" },
+      { status: 503 },
+    );
+  }
+
+  setupLemon();
+
+  const appUrl = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000";
+
+  const url = await createCheckoutUrl({
+    redirectUrl: `${appUrl}/pricing?checkout=success`,
+  });
+
+  if (!url) {
+    return NextResponse.json(
+      { error: "Failed to create checkout" },
+      { status: 500 },
+    );
+  }
+
+  return NextResponse.redirect(url);
+}
+
+export async function POST(req: Request) {
+  if (!isLemonConfigured()) {
+    return NextResponse.json(
+      { error: "Payment not configured" },
+      { status: 503 },
+    );
+  }
+
+  setupLemon();
+
+  const body = await req.json().catch(() => ({}));
+  const appUrl = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000";
+
+  const url = await createCheckoutUrl({
+    redirectUrl: `${appUrl}/pricing?checkout=success`,
+    email: body.email,
+    name: body.name,
+  });
+
+  if (!url) {
+    return NextResponse.json(
+      { error: "Failed to create checkout" },
+      { status: 500 },
+    );
+  }
+
+  return NextResponse.json({ url });
+}
diff --git a/app/api/lemon/verify/route.ts b/app/api/lemon/verify/route.ts
new file mode 100644
index 0000000..7aab42c
--- /dev/null
+++ b/app/api/lemon/verify/route.ts
@@ -0,0 +1,18 @@
+import { NextResponse } from "next/server";
+import { verifyLicenseKey } from "@/lib/lemon";
+
+export async function POST(req: Request) {
+  const body = await req.json().catch(() => ({}));
+  const { licenseKey } = body;
+
+  if (!licenseKey || typeof licenseKey !== "string") {
+    return NextResponse.json(
+      { valid: false, error: "License key is required" },
+      { status: 400 },
+    );
+  }
+
+  const result = await verifyLicenseKey(licenseKey.trim());
+
+  return NextResponse.json(result);
+}
diff --git a/app/api/lemon/webhook/route.ts b/app/api/lemon/webhook/route.ts
new file mode 100644
index 0000000..416322c
--- /dev/null
+++ b/app/api/lemon/webhook/route.ts
@@ -0,0 +1,39 @@
+import { NextResponse } from "next/server";
+import { getLemonConfig } from "@/config/lemon";
+
+export async function POST(req: Request) {
+  const { webhookSecret } = getLemonConfig();
+
+  const signature = req.headers.get("x-signature");
+  const body = await req.text();
+
+  if (!signature) {
+    return NextResponse.json({ error: "Missing signature" }, { status: 401 });
+  }
+
+  const expected = await crypto.subtle
+    .digest("SHA-256", new TextEncoder().encode(body + webhookSecret))
+    .then((h) =>
+      Array.from(new Uint8Array(h))
+        .map((b) => b.toString(16).padStart(2, "0"))
+        .join(""),
+    );
+
+  if (signature !== expected) {
+    return NextResponse.json({ error: "Invalid signature" }, { status: 401 });
+  }
+
+  const event = JSON.parse(body);
+  const eventName = event.meta?.event_name;
+
+  if (eventName === "order_created") {
+    const licenseKey = event.data?.attributes?.first_order_item?.license_key;
+    const email = event.data?.attributes?.user_email;
+
+    if (licenseKey && email) {
+      console.log(`[LemonSqueezy] Order from ${email}, license: ${licenseKey}`);
+    }
+  }
+
+  return NextResponse.json({ received: true });
+}
diff --git a/app/api/source/[name]/route.ts b/app/api/source/[name]/route.ts
index a5cd274..1a292d5 100644
--- a/app/api/source/[name]/route.ts
+++ b/app/api/source/[name]/route.ts
@@ -1,7 +1,8 @@
-// File: app/api/source/[name]/route.ts
 import { NextResponse } from "next/server"
 import fs from "fs/promises"
+import fsSync from "fs"
 import path from "path"
+import { PRO_COMPONENTS } from "@/config/pro"
 
 async function findFilesRecursively(
   dir: string,
@@ -36,25 +37,92 @@ function selectBestMatch(matches: string[], preferDemo: boolean): string | null
   return nonDemoMatches[0] || demoMatches[0] || sorted[0];
 }
 
+function getComponentGroupFromPath(filePath: string): string | null {
+  const parts = filePath.replace(/\\/g, "/").split("/");
+  const bilalUiIndex = parts.indexOf("bilalUi");
+  if (bilalUiIndex === -1 || bilalUiIndex + 1 >= parts.length) return null;
+  const group = parts[bilalUiIndex + 1];
+  if (group === "demo" || group === "pricing" || group === "pro") return null;
+  return group;
+}
+
+function isProFile(filePath: string): boolean {
+  const group = getComponentGroupFromPath(filePath);
+  if (!group) return false;
+
+  const config = PRO_COMPONENTS[group];
+  if (!config) return false;
+
+  const filename = path.basename(filePath, path.extname(filePath));
+  const groupDir = path.dirname(filePath);
+  const groupDirname = path.basename(groupDir);
+
+  if (groupDirname !== group) return false;
+
+  try {
+    const allFiles = fsSync.readdirSync(groupDir)
+      .filter(f => f.endsWith(".tsx"))
+      .sort();
+    const index = allFiles.indexOf(`${filename}.tsx`);
+    if (index === -1) return false;
+    return index >= config.freeCount;
+  } catch {
+    return false;
+  }
+}
+
+const PRO_PLACEHOLDER = `"use client";
+
+import { Crown, LockKeyhole, Sparkles } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+interface ProPlaceholderProps {
+  children?: React.ReactNode;
+}
+
+export function ProPlaceholder({ children }: ProPlaceholderProps) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 rounded-xl border border-zinc-200 bg-white px-6 py-12 text-center dark:border-zinc-800 dark:bg-zinc-950">
+      <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-violet-100 dark:bg-violet-900/30">
+        <LockKeyhole className="h-6 w-6 text-violet-600 dark:text-violet-400" />
+      </div>
+      <div className="space-y-1">
+        <Badge variant="pro" appearance="outline">
+          <Crown className="h-3 w-3" />
+          Pro Component
+        </Badge>
+        <p className="text-sm text-zinc-500 dark:text-zinc-400">
+          Purchase the Lifetime plan ($15) to unlock this component.
+        </p>
+      </div>
+      <Button asChild>
+        <Link href="/pricing">
+          <Sparkles className="h-3.5 w-3.5" />
+          Unlock with Pro
+        </Link>
+      </Button>
+    </div>
+  );
+}
+`;
+
 export async function GET(
   request: Request,
   { params }: { params: Promise<{ name: string }> }
 ) {
   const { name } = await params
 
-  // Strict Validation & Sanitization
   if (!name) {
     return new NextResponse("Component name required", { status: 400 })
   }
 
-  // Sanitize input to prevent path traversal
   const safeName = path.basename(name)
   if (safeName !== name) {
       return new NextResponse("Invalid request path", { status: 400 })
   }
 
-  // Validate component name format (alphanumeric + hyphens only)
-  // Allow .json extension if that's part of the route pattern (though usually stripped)
   const componentName = safeName.replace(".json", "")
   if (!/^[a-zA-Z0-9-]+$/.test(componentName)) {
        return new NextResponse("Invalid component name", { status: 400 })
@@ -72,6 +140,12 @@ export async function GET(
        return new NextResponse("Component not found", { status: 404 })
     }
 
+    if (isProFile(filePath)) {
+      return new NextResponse(PRO_PLACEHOLDER, {
+        headers: { "Content-Type": "text/plain" },
+      });
+    }
+
     const fileContent = await fs.readFile(filePath, "utf-8")
     return new NextResponse(fileContent, {
       headers: { "Content-Type": "text/plain" },
diff --git a/app/registry/[name]/route.ts b/app/registry/[name]/route.ts
index 3d28d8c..25a3199 100644
--- a/app/registry/[name]/route.ts
+++ b/app/registry/[name]/route.ts
@@ -1,7 +1,8 @@
-// File: app/registry/[name]/route.ts
 import { NextResponse } from "next/server"
 import fs from "fs/promises"
+import fsSync from "fs"
 import path from "path"
+import { PRO_COMPONENTS } from "@/config/pro"
 
 const COMPONENTS_DIR_NAME = "bilalUi"
 const EXCLUDED_FROM_INDEX = new Set([
@@ -12,22 +13,93 @@ const EXCLUDED_FROM_INDEX = new Set([
   "TestDemo.tsx",
 ])
 
-// Helper to extract component data from a file
+function getComponentGroupFromPath(filePath: string): string | null {
+  const parts = filePath.replace(/\\/g, "/").split("/");
+  const bilalUiIndex = parts.indexOf("bilalUi");
+  if (bilalUiIndex === -1 || bilalUiIndex + 1 >= parts.length) return null;
+  const group = parts[bilalUiIndex + 1];
+  if (group === "demo" || group === "pricing" || group === "pro") return null;
+  return group;
+}
+
+function isProFile(filePath: string): boolean {
+  const group = getComponentGroupFromPath(filePath);
+  if (!group) return false;
+
+  const config = PRO_COMPONENTS[group];
+  if (!config) return false;
+
+  const filename = path.basename(filePath, path.extname(filePath));
+  const groupDir = path.dirname(filePath);
+  const groupDirname = path.basename(groupDir);
+
+  if (groupDirname !== group) return false;
+
+  try {
+    const allFiles = fsSync.readdirSync(groupDir)
+      .filter(f => f.endsWith(".tsx"))
+      .sort();
+    const index = allFiles.indexOf(`${filename}.tsx`);
+    if (index === -1) return false;
+    return index >= config.freeCount;
+  } catch {
+    return false;
+  }
+}
+
+const PRO_PLACEHOLDER_CONTENT = `"use client";
+
+import { Crown, LockKeyhole, Sparkles } from "lucide-react";
+import Link from "next/link";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
+interface ProPlaceholderProps {
+  children?: React.ReactNode;
+}
+
+export function ProPlaceholder({ children }: ProPlaceholderProps) {
+  return (
+    <div className="flex flex-col items-center justify-center gap-4 rounded-xl border border-zinc-200 bg-white px-6 py-12 text-center dark:border-zinc-800 dark:bg-zinc-950">
+      <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-violet-100 dark:bg-violet-900/30">
+        <LockKeyhole className="h-6 w-6 text-violet-600 dark:text-violet-400" />
+      </div>
+      <div className="space-y-1">
+        <Badge variant="pro" appearance="outline">
+          <Crown className="h-3 w-3" />
+          Pro Component
+        </Badge>
+        <p className="text-sm text-zinc-500 dark:text-zinc-400">
+          Purchase the Lifetime plan ($15) to unlock this component.
+        </p>
+      </div>
+      <Button asChild>
+        <Link href="/pricing">
+          <Sparkles className="h-3.5 w-3.5" />
+          Unlock with Pro
+        </Link>
+      </Button>
+    </div>
+  );
+}
+`;
+
 async function getComponentData(filePath: string, componentsDir: string) {
   const content = await fs.readFile(filePath, "utf-8")
   const filename = path.basename(filePath, path.extname(filePath))
-  
-  // Extract dependencies
+
+  const isPro = isProFile(filePath);
+  const resolvedContent = isPro ? PRO_PLACEHOLDER_CONTENT : content;
+
   const dependencies = new Set<string>()
   const registryDependencies = new Set<string>()
-  
-  // Regex for imports
+
   const importRegex = /import\s+(?:[\w\s{},*]+)\s+from\s+['"]([^'"]+)['"]/g
   let match
-  
-  while ((match = importRegex.exec(content)) !== null) {
+
+  while ((match = importRegex.exec(resolvedContent)) !== null) {
     const importPath = match[1]
-    
+
     if (importPath.startsWith("@/components/ui/") || importPath.startsWith(`@/components/${COMPONENTS_DIR_NAME}/`)) {
         const depName = path.basename(importPath, path.extname(importPath))
         registryDependencies.add(depName)
@@ -46,18 +118,17 @@ async function getComponentData(filePath: string, componentsDir: string) {
     files: [
       {
         path: relativePath,
-        content: content,
+        content: resolvedContent,
         type: "registry:component"
       }
     ]
   }
 }
 
-// Recursively find all component files
 async function getAllComponentFiles(dir: string, fileList: string[] = []) {
   try {
       const entries = await fs.readdir(dir, { withFileTypes: true })
-      
+
       for (const entry of entries) {
         const fullPath = path.join(dir, entry.name)
         if (entry.isDirectory()) {
@@ -82,7 +153,7 @@ async function findComponentFiles(
 ): Promise<string[]> {
   try {
       const entries = await fs.readdir(dir, { withFileTypes: true })
-      
+
       for (const entry of entries) {
         if (entry.isDirectory()) {
           await findComponentFiles(path.join(dir, entry.name), filename, matches)
@@ -115,13 +186,11 @@ export async function GET(
   { params }: { params: Promise<{ name: string }> }
 ) {
   const { name } = await params
-  
-  // Basic validation & Sanitization
+
   if (!name || !name.endsWith(".json")) {
     return new NextResponse("Invalid request", { status: 400 })
   }
 
-  // Sanitize input to prevent path traversal
   const safeName = path.basename(name)
   if (safeName !== name) {
       return new NextResponse("Invalid request path", { status: 400 })
@@ -130,12 +199,10 @@ export async function GET(
   const componentsDir = path.join(process.cwd(), "components", COMPONENTS_DIR_NAME)
   const componentName = safeName.replace(".json", "")
 
-  // Validate component name format (alphanumeric + hyphens only)
   if (!/^[a-zA-Z0-9-]+$/.test(componentName) && componentName !== "index" && componentName !== "registry") {
        return new NextResponse("Invalid component name", { status: 400 })
   }
 
-  // Handle Index / Registry request
   if (componentName === "index" || componentName === "registry") {
     try {
       const allFiles = await getAllComponentFiles(componentsDir)
@@ -147,7 +214,6 @@ export async function GET(
     }
   }
 
-  // Handle Individual Component request
   const matches = await findComponentFiles(componentsDir, `${componentName}.tsx`)
   const filePath = selectBestMatch(matches, componentName.endsWith("-demo"))
 
diff --git a/components/bilalUi/component-preview.tsx b/components/bilalUi/component-preview.tsx
index cee38ea..1f39ab2 100644
--- a/components/bilalUi/component-preview.tsx
+++ b/components/bilalUi/component-preview.tsx
@@ -17,6 +17,7 @@ import { AnimatePresence, motion } from "motion/react";
 import { OpenInV0Button } from "./open-in-v0-button";
 import { Spinner } from "@/components/ui/spinner";
 import { CodeBlock } from "@/components/ui/code-block";
+import { ProLock } from "./pro/pro-lock";
 
 function SuccessParticles({
   buttonRef,
@@ -93,6 +94,7 @@ interface ComponentPreviewProps {
    * npx shadcn@latest add {NEXT_PUBLIC_APP_URL}/registry/{registry}
    */
   registry?: string;
+  pro?: boolean;
 }
 
 export function ComponentPreview({
@@ -103,6 +105,7 @@ export function ComponentPreview({
   sourceName,
   installCommand,
   registry,
+  pro,
 }: ComponentPreviewProps) {
   const [isCopied, setIsCopied] = React.useState(false);
   const [isInstallCopied, setIsInstallCopied] = React.useState(false);
@@ -331,10 +334,16 @@ export function ComponentPreview({
           <TabsContent value="code" className="mt-0">
             <div className="relative overflow-hidden rounded-b-xl border-t border-zinc-800/80 bg-[radial-gradient(circle_at_top,#18181b_0%,#09090b_45%,#030303_100%)]">
               <div className="overflow-x-auto max-h-150 scrollbar-thin scrollbar-thumb-zinc-700 scrollbar-track-transparent">
-                <CodeBlock
-                  language="tsx"
-                  code={sourceCode || "// Loading..."}
-                />
+                {pro ? (
+                  <div className="flex items-center justify-center min-h-100">
+                    <ProLock />
+                  </div>
+                ) : (
+                  <CodeBlock
+                    language="tsx"
+                    code={sourceCode || "// Loading..."}
+                  />
+                )}
               </div>
             </div>
           </TabsContent>
diff --git a/components/bilalUi/pricing/pricing-card.tsx b/components/bilalUi/pricing/pricing-card.tsx
index 0feed48..df507d5 100644
--- a/components/bilalUi/pricing/pricing-card.tsx
+++ b/components/bilalUi/pricing/pricing-card.tsx
@@ -1,7 +1,8 @@
 "use client";
 
+import { useState } from "react";
 import { motion } from "motion/react";
-import { Check, ArrowRight, Crown, Sparkles } from "lucide-react";
+import { Check, ArrowRight, Crown, Sparkles, Loader2 } from "lucide-react";
 import Link from "next/link";
 import { Badge } from "@/components/ui/badge";
 import { cn } from "@/lib/utils";
@@ -19,6 +20,7 @@ interface PricingCardProps {
   popular?: boolean;
   badge?: string;
   comingSoon?: boolean;
+  checkout?: boolean;
   className?: string;
 }
 
@@ -33,6 +35,7 @@ export function PricingCard({
   popular,
   badge,
   comingSoon,
+  checkout,
   className,
 }: PricingCardProps) {
   if (popular) {
@@ -47,6 +50,7 @@ export function PricingCard({
         href={href}
         badge={badge}
         comingSoon={comingSoon}
+        checkout={checkout}
         className={className}
       />
     );
@@ -97,15 +101,13 @@ function FreeCard({
       initial={{ opacity: 0, x: -30 }}
       animate={{ opacity: 1, x: 0 }}
       transition={{ duration: 0.5, ease: "easeOut" }}
-      whileHover={{ y: -4 }}
+      whileHover={{ y: -2 }}
       className={cn(
-        "relative h-full overflow-hidden rounded-2xl border border-zinc-200 bg-white p-8 transition-shadow duration-300 hover:shadow-lg dark:border-zinc-800 dark:bg-zinc-950",
+        "relative h-full overflow-hidden rounded-2xl border border-zinc-200 bg-white p-8 dark:border-zinc-800 dark:bg-zinc-950",
         className,
       )}
     >
-      <div className="absolute right-0 top-0 h-32 w-32 translate-x-8 -translate-y-8 rounded-full bg-zinc-100/50 blur-3xl dark:bg-zinc-800/30" />
-
-      <div className="relative space-y-6">
+      <div className="space-y-6">
         <div>
           <h3 className="text-lg font-semibold text-zinc-500 dark:text-zinc-400">
             {name}
@@ -164,6 +166,7 @@ function PremiumCard({
   href,
   badge: badgeLabel,
   comingSoon,
+  checkout,
   className,
 }: {
   name: string;
@@ -175,38 +178,34 @@ function PremiumCard({
   href: string;
   badge?: string;
   comingSoon?: boolean;
+  checkout?: boolean;
   className?: string;
 }) {
+  const [loading, setLoading] = useState(false);
+
+  async function handleCheckout() {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/lemon/checkout", { method: "POST" });
+      const data = await res.json();
+      if (data.url) {
+        window.location.href = data.url;
+      }
+    } catch {
+      setLoading(false);
+    }
+  }
   return (
     <motion.div
       initial={{ opacity: 0, x: 30 }}
       animate={{ opacity: 1, x: 0 }}
       transition={{ duration: 0.5, ease: "easeOut", delay: 0.1 }}
-      whileHover={{ y: -4 }}
+      whileHover={{ y: -2 }}
       className={cn(
-        "relative h-full overflow-hidden rounded-2xl border-2 border-violet-200 bg-white p-8 shadow-xl shadow-violet-500/15 transition-shadow duration-300 hover:shadow-2xl hover:shadow-violet-500/25 dark:border-violet-800 dark:bg-zinc-950 dark:shadow-violet-500/10",
+        "relative h-full overflow-hidden rounded-2xl border-2 border-zinc-200 bg-white p-8 dark:border-zinc-800 dark:bg-zinc-950",
         className,
       )}
     >
-      {/* Animated gradient orbs */}
-      <motion.div
-        animate={{ rotate: 360 }}
-        transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
-        className="pointer-events-none absolute -left-24 -top-24 h-48 w-48 rounded-full bg-violet-400/10 blur-3xl dark:bg-violet-500/10"
-      />
-      <motion.div
-        animate={{ rotate: -360 }}
-        transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
-        className="pointer-events-none absolute -bottom-24 -right-24 h-48 w-48 rounded-full bg-fuchsia-400/10 blur-3xl dark:bg-fuchsia-500/10"
-      />
-
-      {/* Shimmer line */}
-      <motion.div
-        animate={{ x: ["-100%", "100%"] }}
-        transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
-        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-violet-400/50 to-transparent"
-      />
-
       <div className="absolute right-5 top-5">
         <Badge variant="pro" appearance="light" size="sm">
           <Crown className="h-3 w-3" />
@@ -214,9 +213,9 @@ function PremiumCard({
         </Badge>
       </div>
 
-      <div className="relative space-y-6">
+      <div className="space-y-6">
         <div>
-          <h3 className="flex items-center gap-2 text-lg font-semibold text-violet-600 dark:text-violet-400">
+          <h3 className="flex items-center gap-2 text-lg font-semibold text-zinc-900 dark:text-zinc-100">
             <Sparkles className="h-4 w-4" />
             {name}
           </h3>
@@ -234,42 +233,66 @@ function PremiumCard({
         </div>
 
           <ul className="space-y-2.5">
-            {features.map((feature, i) => (
-              <motion.li
-                key={getFeatureLabel(feature)}
-                initial={{ opacity: 0, x: 10 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.3, delay: 0.15 + i * 0.05 }}
-                className="flex items-start gap-3 text-sm text-zinc-600 dark:text-zinc-300"
-              >
-                {isFeatureMore(feature) ? (
-                  <Sparkles className="h-4 w-4 mt-0.5 shrink-0 text-zinc-400" />
-                ) : (
-                  <Crown className="h-4 w-4 mt-0.5 shrink-0 text-violet-500" />
-                )}
-                <span>{getFeatureLabel(feature)}</span>
-                {isFeatureSoon(feature) && (
-                  <span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-bold text-amber-600 dark:border-amber-800 dark:bg-amber-900/30 dark:text-amber-400">Soon</span>
-                )}
-              </motion.li>
-            ))}
+            {features.map((feature, i) => {
+              const colors = [
+                "text-amber-500",
+                "text-emerald-500",
+                "text-sky-500",
+                "text-violet-500",
+                "text-pink-500",
+                "text-cyan-500",
+                "text-rose-500",
+                "text-indigo-500",
+              ];
+              const iconColor = isFeatureMore(feature) ? "text-amber-500" : (colors[i % colors.length]);
+              return (
+                <motion.li
+                  key={getFeatureLabel(feature)}
+                  initial={{ opacity: 0, x: 10 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ duration: 0.3, delay: 0.15 + i * 0.05 }}
+                  className="flex items-start gap-3 text-sm text-zinc-600 dark:text-zinc-300"
+                >
+                  {isFeatureMore(feature) ? (
+                    <Sparkles className={cn("h-4 w-4 mt-0.5 shrink-0", iconColor)} />
+                  ) : (
+                    <Crown className={cn("h-4 w-4 mt-0.5 shrink-0", iconColor)} />
+                  )}
+                  <span>{getFeatureLabel(feature)}</span>
+                  {isFeatureSoon(feature) && (
+                    <span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-[10px] font-bold text-amber-600 dark:border-amber-800 dark:bg-amber-900/30 dark:text-amber-400">Soon</span>
+                  )}
+                </motion.li>
+              );
+            })}
           </ul>
 
         <div className="relative">
-          <Link
-            href={comingSoon ? "#" : href}
-            aria-disabled={comingSoon}
-            tabIndex={comingSoon ? -1 : undefined}
-            className={cn(
-              "inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-bold transition-all active:scale-[0.98]",
-              comingSoon
-                ? "pointer-events-none bg-zinc-200 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
-                : "bg-gradient-to-r from-violet-600 to-fuchsia-600 text-white shadow-lg shadow-violet-500/25 hover:from-violet-500 hover:to-fuchsia-500 hover:shadow-xl hover:shadow-violet-500/30",
-            )}
-          >
-            {comingSoon ? "Coming Soon" : cta}
-            {!comingSoon && <ArrowRight className="h-4 w-4" />}
-          </Link>
+          {checkout && !comingSoon ? (
+            <button
+              type="button"
+              onClick={handleCheckout}
+              disabled={loading}
+              className="inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl bg-zinc-900 px-8 text-sm font-bold text-white transition-all hover:bg-zinc-800 active:scale-[0.98] disabled:cursor-wait dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
+            >
+              {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <><Sparkles className="h-4 w-4" />{cta}</>}
+            </button>
+          ) : (
+            <Link
+              href={comingSoon ? "#" : href}
+              aria-disabled={comingSoon}
+              tabIndex={comingSoon ? -1 : undefined}
+              className={cn(
+                "inline-flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-bold transition-all active:scale-[0.98]",
+                comingSoon
+                  ? "pointer-events-none bg-zinc-200 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400"
+                  : "bg-zinc-900 px-8 text-white hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200",
+              )}
+            >
+              {comingSoon ? "Coming Soon" : cta}
+              {!comingSoon && <ArrowRight className="h-4 w-4" />}
+            </Link>
+          )}
         </div>
       </div>
     </motion.div>
diff --git a/components/bilalUi/pro/index.ts b/components/bilalUi/pro/index.ts
index 1fd4028..0225402 100644
--- a/components/bilalUi/pro/index.ts
+++ b/components/bilalUi/pro/index.ts
@@ -3,3 +3,4 @@ export { ProBadge } from "./pro-badge";
 export { ProCard } from "./pro-card";
 export { ProFeatureCard } from "./pro-feature-card";
 export { ProComingSoon } from "./pro-coming-soon";
+export { ProLock } from "./pro-lock";
diff --git a/components/bilalUi/pro/license-dialog.tsx b/components/bilalUi/pro/license-dialog.tsx
new file mode 100644
index 0000000..cffb710
--- /dev/null
+++ b/components/bilalUi/pro/license-dialog.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useState } from "react";
+import { Crown, Check, X, Loader2, KeyRound } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+
+interface LicenseDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onVerify: (key: string) => Promise<{ success: boolean; error?: string }>;
+}
+
+export function LicenseDialog({
+  open,
+  onClose,
+  onVerify,
+}: LicenseDialogProps) {
+  const [key, setKey] = useState("");
+  const [status, setStatus] = useState<
+    "idle" | "loading" | "success" | "error"
+  >("idle");
+  const [error, setError] = useState("");
+
+  if (!open) return null;
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!key.trim()) return;
+
+    setStatus("loading");
+    setError("");
+
+    const result = await onVerify(key.trim());
+
+    if (result.success) {
+      setStatus("success");
+      setTimeout(() => {
+        onClose();
+        setKey("");
+        setStatus("idle");
+      }, 1200);
+    } else {
+      setStatus("error");
+      setError(result.error ?? "Invalid license key");
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
+      <div className="relative w-full max-w-md animate-in fade-in zoom-in-95 duration-200">
+        <div className="rounded-2xl border border-zinc-800 bg-zinc-950 p-6">
+          <div className="mb-6 flex items-center justify-between">
+            <Badge variant="pro" appearance="outline" shape="circle">
+              <Crown className="h-3 w-3" />
+              Pro License
+            </Badge>
+            <button
+              onClick={onClose}
+              className="rounded-full p-1 text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-300"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+
+          <h3 className="mb-1 text-lg font-bold text-white">
+            Enter your license key
+          </h3>
+          <p className="mb-6 text-sm text-zinc-400">
+            Paste the license key you received after purchase to unlock all
+            Pro components.
+          </p>
+
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="relative">
+              <KeyRound className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-zinc-500" />
+              <input
+                type="text"
+                value={key}
+                onChange={(e) => {
+                  setKey(e.target.value);
+                  if (status === "error") setStatus("idle");
+                }}
+                placeholder="XXXXXXXX-XXXXXXXX-XXXXXXXX-XXXXXXXX"
+                className="w-full rounded-xl border border-zinc-800 bg-zinc-900 py-2.5 pl-10 pr-3 text-sm text-white placeholder:text-zinc-600 focus:border-zinc-600 focus:outline-none focus:ring-1 focus:ring-zinc-600"
+                disabled={status === "loading" || status === "success"}
+                autoFocus
+              />
+            </div>
+
+            {status === "error" && (
+              <p className="flex items-center gap-1.5 text-sm text-red-400">
+                <X className="h-3.5 w-3.5" />
+                {error}
+              </p>
+            )}
+
+            {status === "success" && (
+              <p className="flex items-center gap-1.5 text-sm text-emerald-400">
+                <Check className="h-3.5 w-3.5" />
+                License verified! Unlocking Pro...
+              </p>
+            )}
+
+            <button
+              type="submit"
+              disabled={
+                !key.trim() || status === "loading" || status === "success"
+              }
+              className={cn(
+                "flex h-11 w-full items-center justify-center gap-2 rounded-xl text-sm font-semibold transition-all",
+                status === "success"
+                  ? "bg-emerald-600 text-white"
+                  : "bg-white text-zinc-900 hover:bg-zinc-200 active:scale-[0.98]",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+              )}
+            >
+              {status === "loading" && <Loader2 className="h-4 w-4 animate-spin" />}
+              {status === "success" && <Check className="h-4 w-4" />}
+              {status === "loading"
+                ? "Verifying..."
+                : status === "success"
+                  ? "Unlocked!"
+                  : "Verify & Unlock"}
+            </button>
+          </form>
+
+          <p className="mt-4 text-center text-xs text-zinc-600">
+            Didn&apos;t get a key? Check your email receipt or{" "}
+            <a
+              href="https://lemonsqueezy.com/my-orders"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-zinc-400 underline underline-offset-2 hover:text-zinc-300"
+            >
+              visit LemonSqueezy orders
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/bilalUi/pro/pro-lock.tsx b/components/bilalUi/pro/pro-lock.tsx
new file mode 100644
index 0000000..46b9d01
--- /dev/null
+++ b/components/bilalUi/pro/pro-lock.tsx
@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import { Crown, LockKeyhole, Sparkles, KeyRound } from "lucide-react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { useProAccess } from "@/hooks/use-pro-access";
+import { LicenseDialog } from "./license-dialog";
+
+interface ProLockProps {
+  label?: string;
+  className?: string;
+}
+
+export function ProLock({
+  label = "This is a Pro component",
+  className,
+}: ProLockProps) {
+  const { hasAccess, verifyAndStore } = useProAccess();
+  const [showDialog, setShowDialog] = useState(false);
+
+  if (hasAccess) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className={cn(
+          "rounded-2xl border border-zinc-800 bg-zinc-950 px-6 py-16 text-center",
+          "animate-in fade-in zoom-in-50 duration-500",
+          className,
+        )}
+      >
+        <div className="mx-auto flex max-w-sm flex-col items-center gap-6">
+          <div className="flex h-16 w-16 items-center justify-center rounded-full bg-zinc-800">
+            <LockKeyhole className="h-7 w-7 text-zinc-400" />
+          </div>
+
+          <Badge variant="pro" appearance="outline" shape="circle">
+            <Crown className="h-3 w-3" />
+            Pro
+          </Badge>
+
+          <div className="space-y-2">
+            <h3 className="text-xl font-bold text-white">{label}</h3>
+            <p className="text-sm leading-relaxed text-zinc-400">
+              Unlock all premium component variants, page blocks, and full
+              templates with a single $15 payment.
+            </p>
+          </div>
+
+          <div className="flex flex-col items-center gap-3">
+            <Link
+              href="/pricing"
+              className="inline-flex items-center gap-2 rounded-full bg-white px-6 py-2.5 text-sm font-semibold text-zinc-900 transition-all duration-300 ease-out hover:bg-zinc-200 active:scale-[0.98]"
+            >
+              <Sparkles className="h-4 w-4" />
+              Unlock with Pro
+            </Link>
+            <button
+              type="button"
+              onClick={() => setShowDialog(true)}
+              className="inline-flex items-center gap-1.5 text-xs text-zinc-500 underline underline-offset-2 transition-colors hover:text-zinc-300"
+            >
+              <KeyRound className="h-3 w-3" />
+              Already purchased? Enter license key
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <LicenseDialog
+        open={showDialog}
+        onClose={() => setShowDialog(false)}
+        onVerify={verifyAndStore}
+      />
+    </>
+  );
+}
diff --git a/config/lemon.ts b/config/lemon.ts
new file mode 100644
index 0000000..5bc8007
--- /dev/null
+++ b/config/lemon.ts
@@ -0,0 +1,18 @@
+export function getLemonConfig() {
+  return {
+    apiKey: process.env.LEMONSQUEEZY_API_KEY!,
+    storeId: Number(process.env.LEMONSQUEEZY_STORE_ID!),
+    productId: Number(process.env.LEMONSQUEEZY_PRODUCT_ID!),
+    variantId: Number(process.env.LEMONSQUEEZY_VARIANT_ID!),
+    webhookSecret: process.env.LEMONSQUEEZY_WEBHOOK_SECRET!,
+  };
+}
+
+export function isLemonConfigured() {
+  return (
+    !!process.env.LEMONSQUEEZY_API_KEY &&
+    !!process.env.LEMONSQUEEZY_STORE_ID &&
+    !!process.env.LEMONSQUEEZY_PRODUCT_ID &&
+    !!process.env.LEMONSQUEEZY_VARIANT_ID
+  );
+}
diff --git a/config/navigation.ts b/config/navigation.ts
index 72732b6..c33f9da 100644
--- a/config/navigation.ts
+++ b/config/navigation.ts
@@ -337,34 +337,52 @@ export const navigationSections: NavSection[] = [
     items: [
       {
         id: "blocks-introduction",
-        title: "Introduction",
+        title: "Overview",
         href: "/docs/blocks/introduction",
-        description: "Overview of reusable multi-component blocks",
+        description: "Browse all reusable multi-component blocks",
         icon: "Map",
       },
       {
-        id: "blocks-hero-sections",
-        title: "Hero Sections",
-        href: "/docs/blocks/hero-sections",
-        description: "Ready-to-use hero block patterns",
+        id: "blocks-hero",
+        title: "Hero",
+        href: "/docs/blocks/hero",
+        description: "Hero section blocks for landing pages",
         icon: "PanelTop",
-        isComingSoon: true,
       },
       {
-        id: "blocks-pricing-sections",
-        title: "Pricing Sections",
-        href: "/docs/blocks/pricing-sections",
-        description: "Composable pricing table and plan blocks",
-        icon: "ListFilter",
-        isComingSoon: true,
+        id: "blocks-features",
+        title: "Features",
+        href: "/docs/blocks/features",
+        description: "Feature grid and showcase blocks",
+        icon: "LayoutGrid",
       },
       {
-        id: "blocks-dashboard-shells",
-        title: "Dashboard Shells",
-        href: "/docs/blocks/dashboard-shells",
-        description: "Starter dashboard structures and app shells",
-        icon: "RectangleEllipsis",
-        isComingSoon: true,
+        id: "blocks-cta",
+        title: "CTA",
+        href: "/docs/blocks/cta",
+        description: "Call-to-action blocks",
+        icon: "MousePointerClick",
+      },
+      {
+        id: "blocks-dashboard",
+        title: "Dashboard",
+        href: "/docs/blocks/dashboard",
+        description: "Dashboard layout blocks",
+        icon: "LayoutDashboard",
+      },
+      {
+        id: "blocks-pricing",
+        title: "Pricing",
+        href: "/docs/blocks/pricing",
+        description: "Pricing table blocks",
+        icon: "CreditCard",
+      },
+      {
+        id: "blocks-testimonials",
+        title: "Testimonials",
+        href: "/docs/blocks/testimonials",
+        description: "Testimonial and social proof blocks",
+        icon: "MessageSquareQuote",
       },
     ],
   },
diff --git a/config/pro.ts b/config/pro.ts
new file mode 100644
index 0000000..c549a21
--- /dev/null
+++ b/config/pro.ts
@@ -0,0 +1,56 @@
+export const PRO_FREE_MODE = true;
+
+export const PRO_COMPONENTS: Record<string, { freeCount: number }> = {
+  button: { freeCount: 5 },
+  badge: { freeCount: 5 },
+  accordion: { freeCount: 5 },
+  avatar: { freeCount: 5 },
+  breadcrumb: { freeCount: 5 },
+  checkbox: { freeCount: 5 },
+  dialog: { freeCount: 5 },
+  drawer: { freeCount: 5 },
+  "dropdown-menu": { freeCount: 5 },
+  input: { freeCount: 5 },
+  "input-otp": { freeCount: 5 },
+  popover: { freeCount: 5 },
+  progress: { freeCount: 5 },
+  "radio-group": { freeCount: 5 },
+  select: { freeCount: 5 },
+  separator: { freeCount: 5 },
+  sheet: { freeCount: 5 },
+  skeleton: { freeCount: 5 },
+  slider: { freeCount: 5 },
+  switch: { freeCount: 5 },
+  tabs: { freeCount: 5 },
+  textarea: { freeCount: 5 },
+  toast: { freeCount: 5 },
+  "toggle-group": { freeCount: 5 },
+  tooltip: { freeCount: 5 },
+  card: { freeCount: 3 },
+  "date-picker": { freeCount: 2 },
+  alert: { freeCount: 4 },
+};
+
+export function isProComponent(
+  componentName: string,
+  variantIndex?: number,
+): boolean {
+  if (PRO_FREE_MODE) return false;
+
+  if (!variantIndex !== undefined && variantIndex === undefined) {
+    return false;
+  }
+
+  const config = PRO_COMPONENTS[componentName];
+  if (!config) return false;
+
+  if (variantIndex !== undefined) {
+    return variantIndex >= config.freeCount;
+  }
+
+  return true;
+}
+
+export function getFreeCount(componentName: string): number {
+  return PRO_COMPONENTS[componentName]?.freeCount ?? 5;
+}
diff --git a/content/docs/blocks/cta.mdx b/content/docs/blocks/cta.mdx
new file mode 100644
index 0000000..26ba9aa
--- /dev/null
+++ b/content/docs/blocks/cta.mdx
@@ -0,0 +1,6 @@
+---
+title: CTA
+description: Call-to-action blocks for conversions and user engagement.
+---
+
+CTA blocks are coming soon. These will include centered CTAs, banner CTAs, and multi-action layouts.
diff --git a/content/docs/blocks/dashboard.mdx b/content/docs/blocks/dashboard.mdx
new file mode 100644
index 0000000..16a28bb
--- /dev/null
+++ b/content/docs/blocks/dashboard.mdx
@@ -0,0 +1,6 @@
+---
+title: Dashboard
+description: Dashboard shell and layout blocks for admin panels and apps.
+---
+
+Dashboard blocks are coming soon. These will include sidebar layouts, analytics panels, and data tables.
diff --git a/content/docs/blocks/features.mdx b/content/docs/blocks/features.mdx
new file mode 100644
index 0000000..b2b095f
--- /dev/null
+++ b/content/docs/blocks/features.mdx
@@ -0,0 +1,6 @@
+---
+title: Features
+description: Feature grid and showcase blocks for highlighting product capabilities.
+---
+
+Features blocks are coming soon. These will include icon grids, numbered lists, and feature comparison layouts.
diff --git a/content/docs/blocks/hero.mdx b/content/docs/blocks/hero.mdx
new file mode 100644
index 0000000..24abadc
--- /dev/null
+++ b/content/docs/blocks/hero.mdx
@@ -0,0 +1,6 @@
+---
+title: Hero
+description: Hero section blocks for landing pages and marketing sites.
+---
+
+Hero section blocks are coming soon. These will include centered heroes, SaaS heroes, and split layout options.
diff --git a/content/docs/blocks/introduction.mdx b/content/docs/blocks/introduction.mdx
index 5f41bfb..1bf7cb7 100644
--- a/content/docs/blocks/introduction.mdx
+++ b/content/docs/blocks/introduction.mdx
@@ -3,11 +3,7 @@ title: Blocks
 description: Multi-component sections you can copy and ship as complete layouts.
 ---
 
-import { Callout } from "@/components/ui/callout";
-
 Blocks are reusable section-level UI patterns made from multiple components.
 They are designed to help you ship complete pages faster.
 
-<Callout className="mt-4" type="info" title="Coming Soon">
-  Block templates are being prepared and will roll out soon.
-</Callout>
+Choose a category from the sidebar to browse available blocks.
diff --git a/content/docs/blocks/meta.json b/content/docs/blocks/meta.json
index 5102013..57a4aa1 100644
--- a/content/docs/blocks/meta.json
+++ b/content/docs/blocks/meta.json
@@ -1,5 +1,11 @@
 {
   "pages": [
-    "introduction"
+    "introduction",
+    "hero",
+    "features",
+    "cta",
+    "dashboard",
+    "pricing",
+    "testimonials"
   ]
 }
diff --git a/content/docs/blocks/pricing.mdx b/content/docs/blocks/pricing.mdx
new file mode 100644
index 0000000..0ce502e
--- /dev/null
+++ b/content/docs/blocks/pricing.mdx
@@ -0,0 +1,6 @@
+---
+title: Pricing
+description: Pricing table and plan comparison blocks.
+---
+
+Pricing blocks are coming soon. These will include tiered pricing, comparison tables, and feature breakdowns.
diff --git a/content/docs/blocks/testimonials.mdx b/content/docs/blocks/testimonials.mdx
new file mode 100644
index 0000000..24b4ada
--- /dev/null
+++ b/content/docs/blocks/testimonials.mdx
@@ -0,0 +1,6 @@
+---
+title: Testimonials
+description: Testimonial and social proof blocks for building trust.
+---
+
+Testimonials blocks are coming soon. These will include card grids, carousels, and featured quote layouts.
diff --git a/content/docs/components/badge.mdx b/content/docs/components/badge.mdx
index 24cea72..42a8a88 100644
--- a/content/docs/components/badge.mdx
+++ b/content/docs/components/badge.mdx
@@ -70,21 +70,21 @@ Token-style badges with removable actions.
 ### Badge With Icon
 Leading icon treatment for plan and state labels.
 
-<ComponentPreview name="badge-with-icon" registry="badge-with-icon">
+<ComponentPreview name="badge-with-icon" registry="badge-with-icon" pro>
   <BadgeWithIcon />
 </ComponentPreview>
 
 ### Shortcut Badge
 Badges paired with keyboard shortcuts for quick actions.
 
-<ComponentPreview name="shortcut-badge" registry="shortcut-badge">
+<ComponentPreview name="shortcut-badge" registry="shortcut-badge" pro>
   <BadgeShortcuts />
 </ComponentPreview>
 
 ### Badge Status Row
 One state shown in all four appearances.
 
-<ComponentPreview name="status-row-badge" registry="status-row-badge">
+<ComponentPreview name="status-row-badge" registry="status-row-badge" pro>
   <BadgeStatusRow />
 </ComponentPreview>
 
@@ -94,6 +94,7 @@ Alpha through deprecated release lifecycle examples.
 <ComponentPreview
   name="release-stages-badge"
   registry="release-stages-badge"
+  pro
 >
   <BadgeReleaseStages />
 </ComponentPreview>
@@ -101,7 +102,7 @@ Alpha through deprecated release lifecycle examples.
 ### Changelog Badge
 Release note labels for updates, fixes, docs, and perf changes.
 
-<ComponentPreview name="changelog-badge" registry="changelog-badge">
+<ComponentPreview name="changelog-badge" registry="changelog-badge" pro>
   <BadgeChangelog />
 </ComponentPreview>
 
@@ -111,6 +112,7 @@ Flags for runtime, lab, legacy, and headless availability.
 <ComponentPreview
   name="feature-flags-badge"
   registry="feature-flags-badge"
+  pro
 >
   <BadgeFeatureFlags />
 </ComponentPreview>
@@ -121,6 +123,7 @@ Circular count badges for inbox, alerts, and review totals.
 <ComponentPreview
   name="notification-counts-badge"
   registry="notification-counts-badge"
+  pro
 >
   <BadgeNotificationCounts />
 </ComponentPreview>
@@ -128,62 +131,62 @@ Circular count badges for inbox, alerts, and review totals.
 ### Plan Tiers Badge
 Pricing and plan emphasis with larger badge sizing.
 
-<ComponentPreview name="plan-tiers-badge" registry="plan-tiers-badge">
+<ComponentPreview name="plan-tiers-badge" registry="plan-tiers-badge" pro>
   <BadgePlanTiers />
 </ComponentPreview>
 
 ### Tag Cloud Badge
 Mixed-size tags with removable actions.
 
-<ComponentPreview name="tag-cloud-badge" registry="tag-cloud-badge">
+<ComponentPreview name="tag-cloud-badge" registry="tag-cloud-badge" pro>
   <BadgeTagCloud />
 </ComponentPreview>
 
 ### Status Pills Badge
 Rounded status pills including a live animated dot state.
 
-<ComponentPreview name="status-pills-badge" registry="status-pills-badge">
+<ComponentPreview name="status-pills-badge" registry="status-pills-badge" pro>
   <BadgeStatusPills />
 </ComponentPreview>
 
 ### Special Types Badge
 WIP, lab, request, and featured metadata styles.
 
-<ComponentPreview name="special-types-badge" registry="special-types-badge">
+<ComponentPreview name="special-types-badge" registry="special-types-badge" pro>
   <BadgeSpecialTypes />
 </ComponentPreview>
 
 ### Outline Row Badge
 Outline treatment across many supported badge variants.
 
-<ComponentPreview name="outline-row-badge" registry="outline-row-badge">
+<ComponentPreview name="outline-row-badge" registry="outline-row-badge" pro>
   <BadgeOutlineRow />
 </ComponentPreview>
 
 ### Ghost Row Badge
 Ghost appearance examples for lightweight metadata.
 
-<ComponentPreview name="ghost-row-badge" registry="ghost-row-badge">
+<ComponentPreview name="ghost-row-badge" registry="ghost-row-badge" pro>
   <BadgeGhostRow />
 </ComponentPreview>
 
 ### Inline Text Badge
 Inline badge usage inside prose and UI copy.
 
-<ComponentPreview name="inline-text-badge" registry="inline-text-badge">
+<ComponentPreview name="inline-text-badge" registry="inline-text-badge" pro>
   <BadgeInlineText />
 </ComponentPreview>
 
 ### Disabled Badge
 Disabled states across multiple variants and appearances.
 
-<ComponentPreview name="disabled-badge" registry="disabled-badge">
+<ComponentPreview name="disabled-badge" registry="disabled-badge" pro>
   <BadgeDisabled />
 </ComponentPreview>
 
 ### Version Table Badge
 Structured package table with version and lifecycle badges.
 
-<ComponentPreview name="version-table-badge" registry="version-table-badge">
+<ComponentPreview name="version-table-badge" registry="version-table-badge" pro>
   <BadgeVersionTable />
 </ComponentPreview>
diff --git a/content/docs/components/button.mdx b/content/docs/components/button.mdx
index 87aaed7..b3a307b 100644
--- a/content/docs/components/button.mdx
+++ b/content/docs/components/button.mdx
@@ -74,91 +74,91 @@ A vibrant gradient border button with multiple color schemes and animation effec
 ### Pulse Button
 Pulse ring emphasis for a primary action.
 
-<ComponentPreview name="pulse-button" registry="pulse-button">
+<ComponentPreview name="pulse-button" registry="pulse-button" pro>
   <PulseButton>Pulse</PulseButton>
 </ComponentPreview>
 
 ### Gradient Shift Button
 Animated gradient surface with hover emphasis.
 
-<ComponentPreview name="gradient-shift-button" registry="gradient-shift-button">
+<ComponentPreview name="gradient-shift-button" registry="gradient-shift-button" pro>
   <GradientShiftButton>Gradient</GradientShiftButton>
 </ComponentPreview>
 
 ### Slide Reveal Button
 Reveal effect on hover for text or icon swaps.
 
-<ComponentPreview name="slide-reveal-button" registry="slide-reveal-button">
+<ComponentPreview name="slide-reveal-button" registry="slide-reveal-button" pro>
   <SlideRevealButton>Slide Reveal</SlideRevealButton>
 </ComponentPreview>
 
 ### Bounce Button
 Subtle bounce animation for repeated calls to action.
 
-<ComponentPreview name="bounce-button" registry="bounce-button">
+<ComponentPreview name="bounce-button" registry="bounce-button" pro>
   <BounceButton>Bounce</BounceButton>
 </ComponentPreview>
 
 ### Shimmer Button
 Animated shimmer for loading or featured actions.
 
-<ComponentPreview name="shimmer-button" registry="shimmer-button">
+<ComponentPreview name="shimmer-button" registry="shimmer-button" pro>
   <ShimmerButton>Shimmer</ShimmerButton>
 </ComponentPreview>
 
 ### Rotate Button
 Micro-rotation feedback on hover.
 
-<ComponentPreview name="rotate-button" registry="rotate-button">
+<ComponentPreview name="rotate-button" registry="rotate-button" pro>
   <RotateButton>Rotate</RotateButton>
 </ComponentPreview>
 
 ### Glow Button
 Glowing outline on hover to draw attention.
 
-<ComponentPreview name="glow-button" registry="glow-button">
+<ComponentPreview name="glow-button" registry="glow-button" pro>
   <GlowButton>Glow</GlowButton>
 </ComponentPreview>
 
 ### Flip Button
 Perspective tilt for playful depth.
 
-<ComponentPreview name="flip-button" registry="flip-button">
+<ComponentPreview name="flip-button" registry="flip-button" pro>
   <FlipButton>Flip</FlipButton>
 </ComponentPreview>
 
 ### Fill Button
 Border-to-fill transition for secondary CTAs.
 
-<ComponentPreview name="fill-button" registry="fill-button">
+<ComponentPreview name="fill-button" registry="fill-button" pro>
   <FillButton>Fill</FillButton>
 </ComponentPreview>
 
 ### Float Button
 Slow floating motion for ambient emphasis.
 
-<ComponentPreview name="float-button" registry="float-button">
+<ComponentPreview name="float-button" registry="float-button" pro>
   <FloatButton>Float</FloatButton>
 </ComponentPreview>
 
 ### Neon Button
 Neon-like accent for dark surfaces.
 
-<ComponentPreview name="neon-button" registry="neon-button">
+<ComponentPreview name="neon-button" registry="neon-button" pro>
   <NeonButton>Neon</NeonButton>
 </ComponentPreview>
 
 ### Ink Spread Button
 Ink-like hover spread using pseudo-elements.
 
-<ComponentPreview name="ink-spread-button" registry="ink-spread-button">
+<ComponentPreview name="ink-spread-button" registry="ink-spread-button" pro>
   <InkSpreadButton>Ink Spread</InkSpreadButton>
 </ComponentPreview>
 
 ### Spring Button
 Springy scale response for tactile feedback.
 
-<ComponentPreview name="spring-button" registry="spring-button">
+<ComponentPreview name="spring-button" registry="spring-button" pro>
   <SpringButton>Spring</SpringButton>
 </ComponentPreview>
 
@@ -168,6 +168,7 @@ Underline reveal for minimal text actions.
 <ComponentPreview
   name="underline-expand-button"
   registry="underline-expand-button"
+  pro
 >
   <UnderlineExpandButton>Underline</UnderlineExpandButton>
 </ComponentPreview>
@@ -175,28 +176,28 @@ Underline reveal for minimal text actions.
 ### Ripple Button
 Click ripple feedback with motion.
 
-<ComponentPreview name="ripple-button" registry="ripple-button">
+<ComponentPreview name="ripple-button" registry="ripple-button" pro>
   <RippleButton>Ripple</RippleButton>
 </ComponentPreview>
 
 ### Expand Button
 Larger scale expansion on hover.
 
-<ComponentPreview name="expand-button" registry="expand-button">
+<ComponentPreview name="expand-button" registry="expand-button" pro>
   <ExpandButton>Expand</ExpandButton>
 </ComponentPreview>
 
 ### Glass Button
 Glassmorphism styling for translucent surfaces.
 
-<ComponentPreview name="glass-button" registry="glass-button">
+<ComponentPreview name="glass-button" registry="glass-button" pro>
   <GlassButton>Glass</GlassButton>
 </ComponentPreview>
 
 ### Slide Up Button
 Subtle upward motion on hover.
 
-<ComponentPreview name="slide-up-button" registry="slide-up-button">
+<ComponentPreview name="slide-up-button" registry="slide-up-button" pro>
   <SlideUpButton>Slide Up</SlideUpButton>
 </ComponentPreview>
 
@@ -206,6 +207,7 @@ Disabled skeleton-style loading state.
 <ComponentPreview
   name="skeleton-loading-button"
   registry="skeleton-loading-button"
+  pro
 >
   <SkeletonLoadingButton>Loading</SkeletonLoadingButton>
 </ComponentPreview>
@@ -216,6 +218,7 @@ Rotating gradient border treatment.
 <ComponentPreview
   name="border-rotate-button"
   registry="border-rotate-button"
+  pro
 >
   <BorderRotateButton>Rotate Border</BorderRotateButton>
 </ComponentPreview>
diff --git a/hooks/use-pro-access.ts b/hooks/use-pro-access.ts
new file mode 100644
index 0000000..3c67b73
--- /dev/null
+++ b/hooks/use-pro-access.ts
@@ -0,0 +1,49 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+
+const LICENSE_KEY = "bilal-ui-license-key";
+const LICENSE_STATUS = "bilal-ui-license-status";
+
+export function useProAccess() {
+  const [hasAccess, setHasAccess] = useState(false);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(LICENSE_STATUS);
+    setHasAccess(stored === "verified");
+    setLoading(false);
+  }, []);
+
+  const verifyAndStore = useCallback(async (key: string) => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/lemon/verify", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ licenseKey: key }),
+      });
+      const data = await res.json();
+
+      if (data.valid) {
+        localStorage.setItem(LICENSE_KEY, key);
+        localStorage.setItem(LICENSE_STATUS, "verified");
+        setHasAccess(true);
+        return { success: true };
+      }
+      return { success: false, error: data.error ?? "Invalid license key" };
+    } catch {
+      return { success: false, error: "Failed to verify license key" };
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const clearAccess = useCallback(() => {
+    localStorage.removeItem(LICENSE_KEY);
+    localStorage.removeItem(LICENSE_STATUS);
+    setHasAccess(false);
+  }, []);
+
+  return { hasAccess, loading, verifyAndStore, clearAccess };
+}
diff --git a/lib/lemon.ts b/lib/lemon.ts
new file mode 100644
index 0000000..49545ce
--- /dev/null
+++ b/lib/lemon.ts
@@ -0,0 +1,61 @@
+import { lemonSqueezySetup, createCheckout } from "@lemonsqueezy/lemonsqueezy.js";
+import { getLemonConfig } from "@/config/lemon";
+
+export function setupLemon() {
+  const { apiKey } = getLemonConfig();
+  lemonSqueezySetup({ apiKey });
+}
+
+export async function createCheckoutUrl(opts?: {
+  redirectUrl?: string;
+  email?: string;
+  name?: string;
+}): Promise<string | null> {
+  setupLemon();
+  const { storeId, variantId } = getLemonConfig();
+
+  const response = await createCheckout(storeId, variantId, {
+    productOptions: opts?.redirectUrl
+      ? {
+          redirectUrl: opts.redirectUrl,
+          enabledVariants: [variantId],
+        }
+      : { enabledVariants: [variantId] },
+    checkoutData: {
+      email: opts?.email,
+      name: opts?.name,
+    },
+  });
+
+  if (response.error) {
+    console.error("LemonSqueezy checkout error:", response.error);
+    return null;
+  }
+
+  return response.data.data.attributes.url;
+}
+
+export async function verifyLicenseKey(
+  licenseKey: string,
+): Promise<{ valid: boolean; error?: string }> {
+  try {
+    const res = await fetch(
+      "https://api.lemonsqueezy.com/v1/licenses/validate",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ license_key: licenseKey }),
+      },
+    );
+
+    const data = await res.json();
+
+    if (data.valid && data.license_key?.status === "active") {
+      return { valid: true };
+    }
+
+    return { valid: false, error: data.error ?? "License key is not valid" };
+  } catch (err) {
+    return { valid: false, error: "Failed to verify license key" };
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 88e6efd..af76e9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@base-ui/react": "^1.2.0",
         "@hookform/resolvers": "^5.2.2",
+        "@lemonsqueezy/lemonsqueezy.js": "^4.0.0",
         "@radix-ui/react-accordion": "^1.2.12",
         "@radix-ui/react-alert-dialog": "^1.1.15",
         "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -1664,6 +1665,15 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@lemonsqueezy/lemonsqueezy.js": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@lemonsqueezy/lemonsqueezy.js/-/lemonsqueezy.js-4.0.0.tgz",
+      "integrity": "sha512-xcY1/lDrY7CpIF98WKiL1ElsfoVhddP7FT0fw7ssOzrFqQsr44HgolKrQZxd9SywsCPn12OTOUieqDIokI3mFg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/@mdx-js/mdx": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.1.1.tgz",
diff --git a/package.json b/package.json
index c1ae297..734a18e 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@base-ui/react": "^1.2.0",
     "@hookform/resolvers": "^5.2.2",
+    "@lemonsqueezy/lemonsqueezy.js": "^4.0.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",