{"id":27654,"date":"2026-08-13T22:31:18","date_gmt":"2026-08-13T22:31:18","guid":{"rendered":"https:\/\/umang.pk\/2026\/08\/13\/shadcn-ui-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-react-%d9%85%db%8c%da%ba-%d8%aa%d9%88%d8%b3%db%8c%d8%b9-%d9%be%d8%b0%db%8c%d8%b1-kyc\/"},"modified":"2026-08-13T22:31:20","modified_gmt":"2026-08-13T22:31:20","slug":"shadcn-ui-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-react-%d9%85%db%8c%da%ba-%d8%aa%d9%88%d8%b3%db%8c%d8%b9-%d9%be%d8%b0%db%8c%d8%b1-kyc","status":"publish","type":"post","link":"https:\/\/umang.pk\/ur\/2026\/08\/13\/shadcn-ui-%da%a9%d8%a7-%d8%a7%d8%b3%d8%aa%d8%b9%d9%85%d8%a7%d9%84-%da%a9%d8%b1%d8%aa%db%92-%db%81%d9%88%d8%a6%db%92-react-%d9%85%db%8c%da%ba-%d8%aa%d9%88%d8%b3%db%8c%d8%b9-%d9%be%d8%b0%db%8c%d8%b1-kyc\/","title":{"rendered":"Shadcn UI \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 React \u0645\u06cc\u06ba \u062a\u0648\u0633\u06cc\u0639 \u067e\u0630\u06cc\u0631 KYC \u0622\u0646 \u0628\u0648\u0631\u0688\u0646\u06af \u0641\u0644\u0648 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4"},"content":{"rendered":"\n<div id=\"\">\n<p>\u062a\u0639\u0645\u06cc\u0644 \u06a9\u06cc \u0636\u0631\u0648\u0631\u06cc\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc B2B SaaS \u067e\u0631\u0648\u0688\u06a9\u0679 (\u0645\u062b\u0644\u0627\u064b \u0628\u06cc\u0646\u06a9\u0646\u06af\u060c \u0642\u0631\u0636 \u062f\u06cc\u0646\u0627\u060c \u067e\u06d2 \u0631\u0648\u0644\u060c \u06cc\u0627 \u06a9\u0631\u06cc\u067e\u0679\u0648 \u06a9\u0631\u0646\u0633\u06cc) \u0627\u0628\u062a\u062f\u0627\u0626\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u06cc\u06a9 \u06c1\u06cc \u062f\u06cc\u0648\u0627\u0631 \u0633\u06d2 \u0679\u06a9\u0631\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u0633\u06cc \u06a9\u0627\u0631\u0648\u0628\u0627\u0631 \u06a9\u0648 \u0627\u067e\u0646\u0627 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0622\u067e \u06a9\u0648 \u0627\u0633 \u0628\u0627\u062a \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u06a9\u0631\u0646\u06cc \u06c1\u0648\u06af\u06cc \u06a9\u06c1 \u0648\u06c1 \u06a9\u0627\u0631\u0648\u0628\u0627\u0631 \u06a9\u0648\u0646 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0622\u0646 \u0628\u0648\u0631\u0688\u0646\u06af \u06a9\u0633\u06cc \u06a9\u0633\u0679\u0645 \u0641\u0627\u0631\u0645 \u06a9\u06cc \u0637\u0631\u062d \u0645\u062d\u0633\u0648\u0633 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06cc\u060c \u0635\u0631\u0641 \u06a9\u0627\u0631\u0648\u0628\u0627\u0631 \u06a9\u06cc \u0642\u0633\u0645 \u0627\u06a9\u0679\u06be\u0627 \u06a9\u0631\u0646\u0627\u060c \u0631\u062c\u0633\u0679\u0631\u06cc\u0634\u0646 \u06a9\u06d2 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u06be\u06cc\u0646\u0686\u0646\u0627\u060c \u0627\u0648\u0631 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u062f\u06a9\u06be\u0627\u0646\u0627 \u06a9\u06c1 \u06a9\u06c1\u0627\u06ba \u062a\u0635\u062f\u06cc\u0642 \u06a9\u0631\u0646\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u0645\u0636\u0645\u0648\u0646 Shadcn UI \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0646\u0627\u0626\u06d2 \u06af\u0626\u06d2 \u062a\u06cc\u0646 \u0642\u062f\u0645\u06cc Know Your Customer (KYC) \u0628\u06c1\u0627\u0624 \u06a9\u0627 \u062a\u062c\u0632\u06cc\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u0639\u0646\u06cc\u060c \u067e\u06cc\u0634 \u0631\u0641\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0633\u0679\u06cc\u067e\u0631\u060c \u0627\u06a9\u0627\u0624\u0646\u0679 \u06a9\u06cc \u0642\u0633\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0631\u06cc\u0688\u06cc\u0648 \u06af\u0631\u0648\u067e\u060c \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0641\u0627\u0626\u0644 \u0627\u067e \u0644\u0648\u0688 \u0627\u06cc\u0631\u06cc\u0627\u060c \u0627\u0648\u0631 \u062a\u0635\u062f\u06cc\u0642 \u06a9\u06cc \u062d\u06cc\u062b\u06cc\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0644\u0631\u0679\u0633\u06d4 \u0622\u067e \u06c1\u0631 \u0641\u06cc\u0635\u0644\u06d2 \u06a9\u06cc \u0648\u062c\u0648\u06c1\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0622\u0633\u0627\u0646 \u0645\u062a\u0628\u0627\u062f\u0644 \u06a9\u0648\u0688 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u0635\u0644 \u062c\u0632\u0648 \u06a9\u0648\u0688 \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u067e \u06cc\u06c1\u0627\u06ba \u0645\u06a9\u0645\u0644 \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0628\u06c1\u0627\u0624 \u06a9\u0648 \u0622\u0632\u0645\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <strong>onboarding-kyc-flow.vercel.app<\/strong>. \u0646\u06cc\u0686\u06d2 \u062f\u06cc\u0626\u06d2 \u06af\u0626\u06d2 \u06a9\u0648\u0688 \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u067e\u0691\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0633\u06d2 \u0622\u0632\u0645\u0627\u0626\u06cc\u06ba\u06d4 \u0627\u0648\u0631 \u0688\u0627\u0631\u06a9 \u0627\u0648\u0631 \u0644\u0627\u0626\u0679 \u0645\u0648\u0688\u0632 \u0628\u06be\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-table-of-contents\"><strong>\u0627\u0646\u0688\u06cc\u06a9\u0633<\/strong><\/h2>\n<h2 id=\"heading-prerequisites\">\u0634\u0631\u0637\u06cc\u06ba<\/h2>\n<p>\u0627\u0633 \u0628\u06c1\u0627\u0624 \u0633\u06d2 \u06af\u0632\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0622\u067e \u06a9\u0648 \u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 React \u0641\u0646\u06a9\u0634\u0646 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0627\u0648\u0631 \u06c1\u06a9\u0633 \u0633\u06d2 \u0648\u0627\u0642\u0641 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 <code>useState<\/code>, <code>useRef<\/code>\u0627\u0648\u0631 <code>useEffect<\/code>.<\/p>\n<p>\u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2:<\/p>\n<ul>\n<li>\n<p>\u0627\u06cc\u067e \u0631\u0648\u0679\u0631 \u0627\u0648\u0631 shadcn\/ui \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 Next.js \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u067e\u06c1\u0644\u06d2 \u06c1\u06cc \u0634\u0631\u0648\u0639 \u06a9\u0631 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u0645\u0636\u0645\u0648\u0646 \u0627\u0633 \u0627\u0628\u062a\u062f\u0627\u0626\u06cc \u0633\u06cc\u0679 \u0627\u067e \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>v0 \u0627\u06a9\u0627\u0624\u0646\u0679 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u06c1\u06d2\u06d4 \u0622\u067e Bolt \u06cc\u0627 Lovable \u0628\u06be\u06cc \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u0648 \u0627\u0633\u06cc shadcn MCP \u067e\u0631\u0627\u0645\u067e\u0679 \u0641\u0639\u0627\u0644\u06cc\u062a \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-what-youre-building\">\u0622\u067e \u06a9\u06cc\u0627 \u0628\u0646\u0627 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba<\/h2>\n<p>\u0628\u06c1\u0627\u0624 \u0645\u06cc\u06ba \u062a\u06cc\u0646 \u0645\u0631\u0627\u062d\u0644 \u06c1\u06cc\u06ba:<\/p>\n<ol>\n<li>\n<p><strong>\u0627\u06a9\u0627\u0624\u0646\u0679 \u06a9\u06cc \u0642\u0633\u0645:<\/strong> \u0635\u0627\u0631\u0641\u06cc\u0646 \u0627\u0633\u0679\u0627\u0631\u0679 \u0627\u067e\u060c \u0627\u0646\u0679\u0631\u067e\u0631\u0627\u0626\u0632\u060c \u06cc\u0627 \u06af\u0648\u0631\u0646\u0645\u0646\u0679 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0641\u06cc\u0635\u0644\u06c1 \u0628\u0627\u0642\u06cc \u062a\u062c\u0631\u0628\u06d2 \u06a9\u0648 \u0622\u06af\u06d2 \u0628\u0691\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u0635\u062f\u06cc\u0642\u06cc \u0644\u0627\u0626\u0646 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0633 \u0628\u0627\u062a \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0648\u0646 \u0633\u06d2 \u0648\u0631\u06a9 \u0627\u0633\u067e\u06cc\u0633 \u0688\u06cc\u0641\u0627\u0644\u0679\u0633 \u0644\u0627\u06af\u0648 \u06c1\u0648\u06ba \u06af\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba:<\/strong> \u0635\u0627\u0631\u0641\u06cc\u0646 \u0628\u0631\u0622\u0645\u062f\u06cc \u06a9\u0627\u0631\u0648\u0628\u0627\u0631\u06cc \u0631\u062c\u0633\u0679\u0631\u06cc\u0634\u0646 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a\u060c \u0679\u06cc\u06a9\u0633 \u0631\u06cc\u0679\u0631\u0646 \u06cc\u0627 \u06a9\u0645\u067e\u0646\u06cc \u0631\u062c\u0633\u0679\u0631\u06cc\u0634\u0646 \u06a9\u0648 PDF \u06cc\u0627 CSV \u0641\u0627\u0631\u0645\u06cc\u0679 \u0645\u06cc\u06ba \u06af\u06be\u0633\u06cc\u0679\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u062a\u0635\u062f\u06cc\u0642 \u06a9\u06cc \u062d\u06cc\u062b\u06cc\u062a:<\/strong> \u0635\u0627\u0631\u0641\u06cc\u0646 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0627\u0633\u0679\u06cc\u0679\u0633 \u0686\u06cc\u06a9 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u06a9\u0648 \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u062c\u0627\u0631\u06cc \u0686\u06cc\u06a9\u060c \u062a\u0635\u062f\u06cc\u0642 \u0634\u062f\u06c1 \u0645\u0633\u0627\u0626\u0644\u060c \u06cc\u0627 \u0627\u06cc\u0633\u06d2 \u0645\u0633\u0627\u0626\u0644 \u0646\u0638\u0631 \u0622\u0626\u06cc\u06ba \u06af\u06d2 \u062c\u0646 \u067e\u0631 \u062a\u0648\u062c\u06c1 \u062f\u06cc\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ol>\n<h2 id=\"heading-project-structure\">\u0645\u0646\u0635\u0648\u0628\u06d2 \u06a9\u06cc \u0633\u0627\u062e\u062a<\/h2>\n<p>\u06cc\u06c1 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0627\u06cc\u06a9 \u0645\u0639\u06cc\u0627\u0631\u06cc Next.js \u0627\u06cc\u067e \u06c1\u06d2\u06d4 <strong>shadcn\/ui<\/strong> \u0627\u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06c1\u06cc \u0634\u0631\u0648\u0639 \u06a9\u06cc\u0627 \u062c\u0627 \u0686\u06a9\u0627 \u06c1\u06d2\u06d4 \u0627\u0639\u0644\u06cc \u062f\u0631\u062c\u06d2 \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628 \u06cc\u06c1 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-javascript\">onboarding-kyc-flow\/\n\u251c\u2500\u2500 .vercel\/\n\u251c\u2500\u2500 app\/\n\u251c\u2500\u2500 components\/\n\u251c\u2500\u2500 lib\/\n\u251c\u2500\u2500 public\/\n\u251c\u2500\u2500 .env.development.local\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 components.json\n\u251c\u2500\u2500 next-env.d.ts\n\u251c\u2500\u2500 next.config.mjs\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 pnpm-lock.yaml\n\u251c\u2500\u2500 postcss.config.mjs\n\u251c\u2500\u2500 tsconfig.json\n\u2514\u2500\u2500 tsconfig.tsbuildinfo\n<\/code><\/pre>\n<p><code>components.json<\/code>    shadcn \u0641\u0627\u0626\u0644 \u062c\u0633\u06d2 CLI \u0627\u0633 \u0628\u0627\u062a \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u0691\u06be\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u062c\u0632\u0648 \u06a9\u06c1\u0627\u06ba \u0648\u0627\u0642\u0639 \u06c1\u06d2 \u0627\u0648\u0631 \u06cc\u06c1 \u06a9\u0648\u0646 \u0633\u06d2 \u0627\u0633\u0679\u0627\u0626\u0644 \u0627\u0648\u0631 \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u06cc\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4 <code>components\/<\/code> \u0645\u0634\u062a\u0631\u06a9\u06c1 UI \u062d\u0635\u0648\u06ba (\u0627\u0644\u0631\u0679\u0633\u060c \u0628\u06cc\u062c\u0632\u060c \u0628\u0679\u0646\u0632\u060c \u06a9\u0627\u0631\u0688\u0632\u060c \u067e\u0631\u0648\u06af\u0631\u06cc\u0633\u060c \u0631\u06cc\u0688\u06cc\u0648 \u06af\u0631\u0648\u067e\u060c \u0627\u0644\u06af \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2) \u06a9\u0648 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2 \u062c\u0633 \u067e\u0631 \u0641\u0644\u0648 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 <code>lib\/utils.ts<\/code> \u067e\u06cc\u0634\u06a9\u0634 <code>cn<\/code> \u0645\u0634\u0631\u0648\u0637 \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645\u0648\u06ba \u06a9\u0648 \u06cc\u06a9\u062c\u0627 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u0648\u0631\u06d2 \u0628\u06c1\u0627\u0624 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u0645\u062f\u062f\u06af\u0627\u0631\u06d4 <code>app\/<\/code> \u06cc\u06c1 \u0635\u0641\u062d\u06c1 \u062e\u0648\u062f \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u060c \u0646\u06cc\u0686\u06d2 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u062f\u06a9\u06be\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-radix-ui-vs-base-ui-which-primitives-this-flow-uses\">Radix UI \u0627\u0648\u0631 \u0628\u0646\u06cc\u0627\u062f\u06cc UI: \u0627\u0633 \u0628\u06c1\u0627\u0624 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0639\u0646\u0627\u0635\u0631\u06d4<\/h2>\n<p><strong>Shadcn \u062c\u0632\u0648<\/strong> \u06cc\u06c1 \u06a9\u0633\u06cc \u0627\u06cc\u06a9 \u0688\u06cc\u0641\u0627\u0644\u0679 \u0645\u0642\u0627\u0645\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0633\u06d2 \u0645\u0646\u0633\u0644\u06a9 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0645\u0627\u062d\u0648\u0644\u06cc\u0627\u062a\u06cc \u0646\u0638\u0627\u0645 Radix UI \u06a9\u06d2 \u0644\u06cc\u06d2 \u0688\u06cc\u0641\u0627\u0644\u0679 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 Base UI \u0627\u06cc\u06a9 \u0679\u06be\u0648\u0633 \u0645\u062a\u0628\u0627\u062f\u0644 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06cc \u067e\u0631 \u06cc\u06c1 \u0628\u06c1\u0627\u0624 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0646\u06cc\u0627\u062f\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u0645\u062a\u0627\u062b\u0631 \u06a9\u0631 \u0633\u06a9\u062a\u06cc \u06c1\u06d2 \u06a9\u06c1 \u0627\u06cc\u06a9 \u062c\u0632\u0648 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0622\u067e \u0627\u067e\u0646\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0627\u0633 \u062c\u0632 \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e Shadcn UI \u062c\u06cc\u0633\u06d2 \u0633\u06cc\u0679 \u0633\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0646\u06a9\u0627\u0644 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0645\u062e\u062a\u0644\u0641 \u0630\u0631\u0627\u0626\u0639 \u0633\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u0645\u0644\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u06a9\u0633 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u06a9\u0648 \u0646\u0634\u0627\u0646\u06c1 \u0628\u0646\u0627 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0631\u06cc\u0688\u06a9\u0633 \u067e\u0631 \u0645\u0628\u0646\u06cc \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u0645\u0642\u0627\u0645\u06cc UI \u067e\u0631 \u0645\u0628\u0646\u06cc \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0644\u0627\u0646\u0627 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u06cc\u06a9 \u06c1\u06cc \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u062f\u0648 \u0645\u062e\u062a\u0644\u0641 \u0645\u0642\u0627\u0645\u06cc\u060c \u063a\u06cc\u0631 \u0627\u0633\u0679\u0627\u0626\u0644 \u0634\u062f\u06c1 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba <strong>Radix UI \u0627\u0648\u0631 Base UI \u06a9\u0627 \u06cc\u06c1\u0627\u06ba \u0645\u0648\u0627\u0632\u0646\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong>.<\/p>\n<h2 id=\"heading-scaffolding-the-flow-with-v0-and-an-mcp-server\">v0 \u0627\u0648\u0631 MCP \u0633\u0631\u0648\u0631\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0633\u06c1\u0627\u0631\u0648\u06ba \u06a9\u0627 \u0628\u06c1\u0627\u0624<\/h2>\n<p>\u0645\u0627\u0688\u0644 \u0633\u06cc\u0627\u0642 \u0648 \u0633\u0628\u0627\u0642 \u067e\u0631\u0648\u0679\u0648\u06a9\u0648\u0644 (MCP) \u0633\u0631\u0648\u0631\u0632 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u0648 AI \u06a9\u0648\u0688\u0646\u06af \u0627\u0633\u0633\u0679\u0646\u0679\u0633 \u06a9\u0648 \u06a9\u0627\u0644 \u0627\u06cc\u0628\u0644 \u0679\u0648\u0644\u0632 \u06a9\u06d2 \u0633\u06cc\u0679 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u06a9\u06d2 \u0627\u0633\u0633\u0679\u0646\u0679 \u06a9\u0648 \u0622\u067e \u06a9\u06d2 \u062a\u0631\u0628\u06cc\u062a\u06cc \u0688\u06cc\u0679\u0627 \u0645\u06cc\u06ba \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0646\u0627\u0645\u0648\u06ba \u0627\u0648\u0631 \u067e\u0631\u067e\u0633 \u06a9\u0627 \u0627\u0646\u062f\u0627\u0632\u06c1 \u0644\u06af\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u06cc\u06c1 \u0633\u0631\u0648\u0631 \u0633\u06d2 \u0627\u0635\u0644\u060c \u0627\u067e \u0679\u0648 \u0688\u06cc\u0679 API \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0641\u0633\u0627\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u06cc\u06c1\u0627\u06ba \u062e\u0627\u0635 \u0637\u0648\u0631 \u067e\u0631 \u0627\u06c1\u0645 \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u06d2 \u0646\u0627\u0645\u0648\u06ba \u0627\u0648\u0631 \u0645\u062e\u062a\u0644\u0641 \u067e\u0631\u067e\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be shadcn \u0637\u0631\u0632 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u06a9\u0626\u06cc \u0633\u06cc\u0679 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>Shadcn \u062c\u0632\u0648 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0630\u06cc\u0644 \u0645\u06cc\u06ba v0 \u0633\u06d2 \u0645\u0646\u0633\u0644\u06a9 \u0645\u0641\u062a \u0633\u06cc\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 MCP \u0633\u0631\u0648\u0631 \u0634\u0627\u0626\u0639 \u06a9\u0631\u062a\u06cc \u06c1\u06d2: <strong>\u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u0627 \u06af\u0627\u0626\u06cc\u0688<\/strong>. \u0646\u06cc\u0686\u06d2 \u062f\u06cc \u06af\u0626\u06cc \u0648\u06cc\u0688\u06cc\u0648 \u0645\u06cc\u06ba \u06a9\u0646\u06a9\u0634\u0646 \u06a9\u06d2 \u0645\u0631\u062d\u0644\u06c1 \u0648\u0627\u0631 \u0645\u0631\u0627\u062d\u0644 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0627\u0633\u06cc \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u0622\u0624\u0679 \u067e\u0679 \u06a9\u0648 \u06a9\u0627\u067e\u06cc \u067e\u0631\u0627\u0645\u067e\u0679 \u0641\u06cc\u0686\u0631 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 Lovable \u06cc\u0627 Bolt \u0645\u06cc\u06ba \u0628\u06be\u06cc \u06a9\u0627\u067e\u06cc \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0622\u067e \u06a9\u0627 \u0648\u0631\u06a9 \u0641\u0644\u0648 \u0627\u06cc\u06a9 AI \u0628\u0644\u0688\u0631 \u067e\u0631 \u0628\u0646\u062f \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><div class=\"ast-oembed-container \" style=\"height: 100%;\"><iframe loading=\"lazy\" title=\"How to Connect @ShadcnSpace Cloud MCP Server to @lovable @Boltdotnew #v0\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/ymTlzbkvvPk?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/p>\n<p>\u0627\u0633 \u0628\u06c1\u0627\u0624 \u06a9\u0648 \u0628\u0646\u06cc\u0627\u062f \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u06d2 \u062c\u0627\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0627\u0634\u0627\u0631\u06d2 \u06cc\u06c1 \u06c1\u06cc\u06ba:<\/p>\n<blockquote>\n<p>\u0627\u0646\u0679\u0631\u067e\u0631\u0627\u0626\u0632 SaaS \u0622\u0646 \u0628\u0648\u0631\u0688\u0646\u06af \u0627\u0648\u0631 KYC \u0641\u0644\u0648 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4 shadcn spatial MCP \u0633\u0631\u0648\u0631 \u06a9\u06d2 \u0645\u0641\u062a \u0627\u062c\u0632\u0627\u0621 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba: shadcn \u0627\u0644\u0631\u0679\u0633\u060c shadcn \u0631\u06cc\u0688\u06cc\u0648 \u06af\u0631\u0648\u067e\u0633\u060c shadcn steppers\u060c \u0627\u0648\u0631 shadcn \u0641\u0627\u0626\u0644 \u0627\u067e \u0644\u0648\u0688\u0632\u06d4 \u0635\u0631\u0641 \u0645\u0641\u062a \u0627\u062c\u0632\u0627\u0621 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u067e\u0631\u0648 \u0627\u062c\u0632\u0627\u0621 \u0646\u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0641\u06c1\u0631\u0633\u062a \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u06c1\u0631 \u062d\u0635\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0648\u0646 \u0633\u06d2 \u0645\u0641\u062a \u0627\u062c\u0632\u0627\u0621 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u0631\u062d\u0644\u06c1 1: \u0627\u06a9\u0627\u0624\u0646\u0679 \u06a9\u06cc \u0642\u0633\u0645 (\u0627\u0633\u0679\u06cc\u067e\u0631) &#8211; \u0627\u0633\u0679\u0627\u0631\u0679 \u0627\u067e\u060c \u06a9\u0627\u0631\u0648\u0628\u0627\u0631\u06cc \u0627\u062f\u0627\u0631\u0648\u06ba \u06cc\u0627 \u062d\u06a9\u0648\u0645\u062a\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u06cc\u0688\u06cc\u0648 \u06af\u0631\u0648\u067e<\/p>\n<p>\u0645\u0631\u062d\u0644\u06c1 2: \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba (\u0633\u0679\u06cc\u067e\u0631) &#8211; \u0628\u0632\u0646\u0633 \u0631\u062c\u0633\u0679\u0631\u06cc\u0634\u0646 \u0633\u0631\u0679\u06cc\u0641\u06a9\u06cc\u0679 \u0641\u0627\u0626\u0644 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u0631\u062d\u0644\u06c1 3: \u062a\u0635\u062f\u06cc\u0642 (\u0633\u0679\u06cc\u067e\u0631) &#8211; \u062a\u0635\u062f\u06cc\u0642 \u06a9\u06cc \u062d\u06cc\u062b\u06cc\u062a \u06a9\u06cc \u0646\u0634\u0627\u0646\u062f\u06c1\u06cc \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0627\u0637\u0644\u0627\u0639<\/p>\n<\/blockquote>\n<p>\u06cc\u06c1 \u062a\u06cc\u0632\u06cc \u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u0627 \u067e\u06c1\u0644\u0627 \u0645\u0633\u0648\u062f\u06c1 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u06d2 \u06af\u0627\u06d4 \u0688\u0631\u0627\u0641\u0679 \u06a9\u0648 \u0635\u0627\u0641 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0646\u062a\u06cc\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0648\u06c1 \u0631\u06cc\u0627\u0633\u062a\u06cc\u06ba \u06c1\u06cc\u06ba \u062c\u0646 \u06a9\u0627 \u0627\u0635\u0644 \u0631\u06cc\u0627\u0633\u062a\u06cc \u0627\u0646\u062a\u0638\u0627\u0645\u060c \u0627\u0635\u0644 \u062a\u0635\u062f\u06cc\u0642\u060c \u0627\u0648\u0631 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u0645\u0633\u0648\u062f\u06d2 \u0646\u0638\u0631 \u0627\u0646\u062f\u0627\u0632 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-step-1-account-type-with-a-radio-group\">\u0645\u0631\u062d\u0644\u06c1 1: \u0631\u06cc\u0688\u06cc\u0648 \u06af\u0631\u0648\u067e \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06a9\u0627\u0624\u0646\u0679 \u06a9\u06cc \u0642\u0633\u0645<\/h2>\n<p>\u0627\u06a9\u0627\u0624\u0646\u0679 \u06a9\u06cc \u0642\u0633\u0645 \u0628\u06c1\u0627\u0624 \u0645\u06cc\u06ba \u067e\u06c1\u0644\u0627 \u0641\u06cc\u0635\u0644\u06c1 \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u06a9\u06d2 \u0641\u06cc\u0635\u0644\u0648\u06ba \u067e\u0631 \u0627\u062b\u0631 \u0627\u0646\u062f\u0627\u0632 \u06c1\u0648\u0646\u06d2 \u06a9\u0627 \u0632\u06cc\u0627\u062f\u06c1 \u0627\u0645\u06a9\u0627\u0646 \u06c1\u06d2\u06d4 \u0642\u0628\u0644 \u0627\u0632 \u0648\u0642\u062a \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0631\u0646\u0627 \u0635\u0627\u0631\u0641 \u06a9\u06cc \u062c\u0627\u0646\u0628 \u0633\u06d2 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u0627\u0646\u062a\u062e\u0627\u0628 \u0633\u06d2 \u0645\u062a\u0639\u0644\u0642 \u0628\u0642\u06cc\u06c1 \u0628\u06c1\u0627\u0624 \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">const tiers: { id: Tier; name: string; description: string; tag: string }[] = [\n  { id: 'startup', name: 'Startup', description: 'For teams building and scaling fast', tag: 'Up to 25 seats' },\n  { id: 'enterprise', name: 'Enterprise', description: 'For established teams with advanced needs', tag: 'Unlimited seats' },\n  { id: 'government', name: 'Government', description: 'For public sector and regulated teams', tag: 'FedRAMP-ready' },\n]\n<\/code><\/pre>\n<pre><code class=\"language-javascript\"><radiogroup value=\"{tier}\" onvaluechange=\"{(value)\"> setTier(value as Tier)} className=\"grid gap-3\">\n  <fieldset classname=\"contents\">\n    <legend classname=\"sr-only\">Account type<\/legend>\n    {tiers.map((item) => (\n      <label key=\"{item.id}\" htmlfor=\"{item.id}\" classname=\"{cn(\" cursor-pointer=\"\" items-start=\"\" gap-4=\"\" rounded-xl=\"\" border=\"\" p-4=\"\" transition-colors=\"\" hover:border-primary=\"\" tier=\"==\" item.id=\"\" bg-primary=\"\">\n        <radiogroupitem value=\"{item.id}\" id=\"{item.id}\" classname=\"mt-0.5\"\/>\n        <span classname=\"flex flex-1 flex-col gap-1\">\n          <span classname=\"flex flex-wrap items-center gap-2 text-sm font-semibold\">\n            {item.name}\n            {item.id === 'enterprise' && <badge variant=\"secondary\">Recommended<\/badge>}\n          <\/span>\n          <span classname=\"text-sm text-muted-foreground\">{item.description}<\/span>\n          <span classname=\"mt-1 font-mono text-[11px] uppercase tracking-wide text-muted-foreground\">{item.tag}<\/span>\n        <\/span>\n      <\/label>\n    ))}\n  <\/fieldset>\n<\/radiogroup>\n<\/code><\/pre>\n<p>\u06cc\u06c1\u0627\u06ba \u062f\u0648 \u0628\u0627\u062a\u06cc\u06ba \u0642\u0627\u0628\u0644 \u062a\u0648\u062c\u06c1 \u06c1\u06cc\u06ba\u06d4 \u067e\u0631\u062a \u06a9\u0627 \u0688\u06cc\u0679\u0627 \u062c\u0632\u0648 \u06a9\u06d2 \u0628\u0627\u06c1\u0631 \u0627\u06cc\u06a9 \u0628\u0627\u0642\u0627\u0639\u062f\u06c1 \u0635\u0641 \u0645\u06cc\u06ba \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0686\u0648\u062a\u06be\u06cc \u067e\u0631\u062a \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u0627 \u0627\u06cc\u06a9 \u0644\u0627\u0626\u0646 \u06a9\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc \u06c1\u06d2\u060c \u0645\u0627\u0631\u06a9 \u0627\u067e \u06a9\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc \u0646\u06c1\u06cc\u06ba\u06d4 \u0627\u0648\u0631 <code>fieldset<\/code> \u0628\u0635\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u067e\u0648\u0634\u06cc\u062f\u06c1 (<code>sr-only<\/code>) \u0644\u06cc\u062c\u0646\u0688 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0631\u06cc\u0688\u0631 \u06a9\u06d2 \u062a\u06cc\u0646 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u06a9\u0648 \u0627\u06cc\u06a9 \u0645\u062a\u0639\u0644\u0642\u06c1 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06cc\u06ba \u06af\u0631\u0648\u067e \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0648\u067e\u0631 \u0648\u0627\u0644\u06d2 \u06a9\u0627\u0631\u0688 \u06a9\u0627 \u0639\u0646\u0648\u0627\u0646 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u0628\u0635\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 &quot;\u0627\u06a9\u0627\u0624\u0646\u0679 \u06a9\u06cc \u0642\u0633\u0645 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba&#8221; \u06a9\u0648 \u0628\u06cc\u0627\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0635\u0627\u0631\u0641\u06cc\u0646 \u0627\u0633\u06d2 \u0646\u06c1\u06cc\u06ba \u062f\u06cc\u06a9\u06be \u067e\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0645\u0631\u062d\u0644\u06d2 \u067e\u0631 <strong>shadcn \u0631\u06cc\u0688\u06cc\u0648 \u06af\u0631\u0648\u067e<\/strong> \u06cc\u06c1 \u06a9\u0648\u0626\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u06cc\u0627 \u0686\u06cc\u06a9 \u0628\u0627\u06a9\u0633 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0627\u06a9\u0627\u0624\u0646\u0679 \u06a9\u06cc \u0642\u0633\u0645 \u0627\u06cc\u06a9 \u0648\u0627\u062d\u062f\u060c \u0628\u0627\u06c1\u0645\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062e\u0635\u0648\u0635\u06cc \u0627\u0646\u062a\u062e\u0627\u0628 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0631\u06cc\u0688\u06cc\u0648 \u06af\u0631\u0648\u067e \u0627\u0646 \u062a\u06cc\u0646\u0648\u06ba \u0645\u06cc\u06ba \u0633\u06d2 \u0648\u0627\u062d\u062f \u06af\u0631\u0648\u067e \u06c1\u06d2 \u062c\u0648 \u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u0627\u0648\u0631 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0648 \u0627\u06cc\u06a9 \u0646\u0638\u0631 \u0645\u06cc\u06ba \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-live-preview\"><strong>\u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1:<\/strong><\/h3>\n<hr\/>\n<h2 id=\"heading-step-2-document-upload-with-drag-and-drop\">\u0645\u0631\u062d\u0644\u06c1 2: \u0688\u0631\u06cc\u06af \u0627\u06cc\u0646\u0688 \u0688\u0631\u0627\u067e \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0627\u067e \u0644\u0648\u0688 \u0627\u06cc\u0631\u06cc\u0627 \u06a9\u0648 \u0648\u0627\u0636\u062d \u0637\u0648\u0631 \u067e\u0631 \u062a\u06cc\u0646 \u062d\u0627\u0644\u062a\u0648\u06ba \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2: \u0627\u0628\u06be\u06cc \u062a\u06a9 \u06a9\u0648\u0626\u06cc \u0622\u0626\u0679\u0645 \u0645\u0646\u062a\u062e\u0628 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u060c \u0641\u0627\u0626\u0644\u06cc\u06ba \u0645\u0646\u062a\u062e\u0628 \u0627\u0648\u0631 \u062a\u06cc\u0627\u0631\u060c \u0627\u0648\u0631 \u0641\u0627\u0626\u0644\u06cc\u06ba \u06a9\u0633\u06cc \u062e\u0627\u0635 \u0648\u062c\u06c1 \u0633\u06d2 \u0645\u0633\u062a\u0631\u062f \u06a9\u0631 \u062f\u06cc \u06af\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">function FileUpload({ file, onFile, onRemove, error }: {\n  file: File | null\n  onFile: (file: File) => void\n  onRemove: () => void\n  error: string\n}) {\n  const inputRef = useRef<htmlinputelement>(null)\n  const [dragging, setDragging] = useState(false)\n\n  const accept = (candidate: File) => {\n    if (candidate.type !== 'application\/pdf' && candidate.type !== 'text\/csv' && !candidate.name.toLowerCase().endsWith('.csv')) {\n      return 'Upload a PDF or CSV file only.'\n    }\n    if (candidate.size > 10 * 1024 * 1024) {\n      return 'Files must be smaller than 10 MB.'\n    }\n    onFile(candidate)\n    return ''\n  }\n\n  return (\n    \n  )\n}\n<\/htmlinputelement><\/code><\/pre>\n<p>\u06a9\u06c1 <code>accept<\/code> \u0641\u0646\u06a9\u0634\u0646 \u067e\u0648\u0631\u06cc \u062a\u0648\u062b\u06cc\u0642 \u06a9\u06cc \u067e\u0631\u062a \u06c1\u06d2 \u0627\u0648\u0631 \u062f\u0648 \u0645\u062e\u062a\u0644\u0641 \u062c\u06af\u06c1\u0648\u06ba \u067e\u0631 \u0686\u0644\u062a\u0627 \u06c1\u06d2: \u067e\u0648\u0634\u06cc\u062f\u06c1 \u0641\u0627\u0626\u0644 \u0627\u0646 \u067e\u0679 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u0628\u062f\u06cc\u0644\u06cc \u06c1\u06cc\u0646\u0688\u0644\u0631 \u0627\u0648\u0631 \u0688\u0631\u06cc\u06af \u0627\u06cc\u0631\u06cc\u0627 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0688\u0631\u0627\u067e \u06c1\u06cc\u0646\u0688\u0644\u0631\u06d4<\/p>\n<p>\u062f\u0648\u0646\u0648\u06ba \u0631\u0627\u0633\u062a\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc \u0641\u0646\u06a9\u0634\u0646 \u06a9\u0648 \u06a9\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06c1\u0630\u0627 \u0688\u0631\u06cc\u06af \u0641\u0627\u0626\u0644 \u06a9\u0648 \u0648\u06c1\u06cc \u062a\u0648\u062b\u06cc\u0642 \u062d\u0627\u0635\u0644 \u06c1\u0648\u062a\u06cc \u06c1\u06d2 \u062c\u0633 \u0641\u0627\u0626\u0644 \u06a9\u0648 \u0622\u067e \u0628\u0631\u0627\u0624\u0632 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u06a9\u06d2 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0635\u0631\u0641 \u06c1\u06d2 <strong>PDF \u06cc\u0627 CSV \u0641\u0627\u0626\u0644<\/strong> \u0627\u0633 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u06c1\u06d2 \u0642\u0637\u0639 \u0646\u0638\u0631 \u0627\u0633 \u06a9\u06d2 \u06a9\u06c1 \u0622\u067e \u0641\u0627\u0626\u0644 \u06a9\u06cc\u0633\u06d2 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1 \u062c\u06af\u06c1 <strong>shadcn \u0641\u0627\u0626\u0644 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u0645\u06cc\u062f\u0627\u0646 \u0645\u06cc\u06ba \u0622\u0628\u0627\u062f \u06c1\u0648 \u062c\u0627\u0624 <code><input type=\"file\"\/><\/code>: \u0688\u0631\u06cc\u06af \u0631\u06cc\u062c\u0646\u060c \u0633\u0644\u06cc\u06a9\u0634\u0646 \u0633\u0679\u06cc\u0679\u060c \u0627\u0648\u0631 \u0631\u06cc\u062c\u06cc\u06a9\u0634\u0646 \u0633\u0679\u06cc\u0679 \u062a\u06cc\u0646 \u0627\u0644\u06af \u0627\u0644\u06af \u0679\u06a9\u0691\u0648\u06ba \u06a9\u0648 \u06c1\u0627\u062a\u06be \u0633\u06d2 \u062c\u0648\u0691\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u06cc\u06a9 \u062c\u0632\u0648 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0633\u0646\u0628\u06be\u0627\u0644\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-live-preview\"><strong>\u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1:<\/strong><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/08\/1786660278_331_Shadcn-UI-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-React-\u0645\u06cc\u06ba-\u062a\u0648\u0633\u06cc\u0639-\u067e\u0630\u06cc\u0631.png\" alt=\"\u0645\u0631\u062d\u0644\u06c1 2: \u0688\u0631\u06cc\u06af \u0627\u06cc\u0646\u0688 \u0688\u0631\u0627\u067e \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u06cc\u06ba\u06d4\" style=\"display:block;margin:0 auto\" width=\"1919\" height=\"945\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-step-3-verification-status-with-an-alert\">\u0645\u0631\u062d\u0644\u06c1 3: \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062a\u0635\u062f\u06cc\u0642 \u06a9\u06cc \u062d\u06cc\u062b\u06cc\u062a<\/h2>\n<p>\u062a\u0635\u062f\u06cc\u0642 \u0641\u0648\u0631\u06cc \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u062a\u06cc\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u0648\u0636\u0627\u062d\u062a \u06a9\u06d2 \u0627\u0633\u067e\u0646\u0631 \u062f\u06a9\u06be\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u0648 \u06cc\u06c1 \u0648\u0627\u0636\u062d \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 \u06a9\u06c1 \u06a9\u06cc\u0627 \u06c1\u0648 \u0631\u06c1\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0622\u06af\u06d2 \u06a9\u06cc\u0627 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">{verified ? (\n  <alert classname=\"border-primary\/30 bg-primary\/5\">\n    <checkcircle2 classname=\"size-4 text-primary\" aria-hidden=\"true\"\/>\n    <alerttitle>Verification complete<\/alerttitle>\n    <alertdescription>\n      Your {selectedTier.name.toLowerCase()} workspace is ready to configure.\n    <\/alertdescription>\n  <\/alert>\n) : (\n  <>\n    <alert>\n      <alertcircle classname=\"size-4\" aria-hidden=\"true\"\/>\n      <alerttitle>Verification in progress<\/alerttitle>\n      <alertdescription>\n        This usually takes a few moments. You can keep this tab open while we finish.\n      <\/alertdescription>\n    <\/alert>\n    <div classname=\"flex flex-col gap-3\">\n      <p>\n        <span classname=\"font-medium\">Checking business registry<\/span>\n        <span classname=\"font-mono text-xs text-muted-foreground\">{checking ? '68%' : '100%'}<\/span>\n      <\/p>\n      <progress value=\"{checking\" :=\"\"\/>\n      <p>\n        <building2 classname=\"size-3.5\" aria-hidden=\"true\"\/> Matching company details and tax identifiers\n      <\/p>\n    <\/div>\n  >\n)}\n<\/code><\/pre>\n<p>\u062c\u0648\u0691\u0627 \u0628\u0646\u0627\u0646\u0627 <strong>shadcn \u0648\u0627\u0631\u0646\u0646\u06af<\/strong> \u0627\u06cc\u06a9 \u067e\u0631\u0648\u06af\u0631\u06cc\u0633 \u0628\u0627\u0631 \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u062f\u0648 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0646\u062a\u0628\u0627\u06c1\u0627\u062a \u0645\u0648\u062c\u0648\u062f\u06c1 \u062d\u06cc\u062b\u06cc\u062a \u06a9\u0648 \u0632\u0628\u0627\u0646\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0628\u06cc\u0627\u0646 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u0628\u06a9\u06c1 \u067e\u06cc\u0634\u0631\u0641\u062a \u06a9\u06cc \u0633\u0644\u0627\u062e\u0648\u06ba \u0633\u06d2 \u0627\u0633 \u0628\u0627\u062a \u06a9\u0627 \u0627\u0646\u062f\u0627\u0632\u06c1 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0633\u06cc \u0645\u062e\u0635\u0648\u0635 \u0648\u0642\u062a \u06a9\u0627 \u0627\u0631\u062a\u06a9\u0627\u0628 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u06a9\u062a\u0646\u0627 \u0628\u0686\u0627 \u06c1\u06d2\u06d4 \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u067e\u0648\u0631\u06cc \u06a9\u06c1\u0627\u0646\u06cc \u0646\u06c1\u06cc\u06ba \u0628\u062a\u0627\u062a\u0627\u060c \u062a\u0646\u0628\u06cc\u06c1\u0627\u062a \u06c1\u06cc \u062c\u0627\u0645\u062f \u0645\u062d\u0633\u0648\u0633 \u06c1\u0648\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0627\u06a9\u06cc\u0644\u06d2 \u067e\u0631\u0648\u06af\u0631\u06cc\u0633 \u0628\u0627\u0631 \u0627\u0633 \u0628\u0627\u062a \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06d2 \u06a9\u06c1 \u0622\u067e \u0627\u0635\u0644 \u0645\u06cc\u06ba \u06a9\u06cc\u0627 \u062f\u06cc\u06a9\u06be \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1 \u06cc\u06c1\u0627\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u062c\u0628 \u0688\u06cc\u0645\u0648 \u0635\u0631\u0641 \u06a9\u0627\u0645\u06cc\u0627\u0628\u06cc \u06a9\u0627 \u0631\u0627\u0633\u062a\u06c1 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u0627\u0633\u06d2 \u0686\u06be\u0648\u0691\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u06d4 \u063a\u06cc\u0631 \u0645\u0645\u0627\u062b\u0644 \u062d\u06cc\u062b\u06cc\u062a \u062c\u06c1\u0627\u06ba \u06a9\u0633\u06cc \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u067e\u0631 \u0645\u0648\u062c\u0648\u062f \u0679\u06cc\u06a9\u0633 ID \u0622\u067e \u06a9\u06cc \u06a9\u0645\u067e\u0646\u06cc \u06a9\u06cc \u0631\u062c\u0633\u0679\u0631\u06cc\u0634\u0646 \u0633\u06d2 \u0645\u0645\u0627\u062b\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u0648\u0627\u0636\u062d \u0627\u06af\u0644\u06d2 \u0627\u0642\u062f\u0627\u0645\u0627\u062a (\u0633\u067e\u0648\u0631\u0679 \u0633\u06d2 \u0631\u0627\u0628\u0637\u06c1 \u06a9\u0631\u0646\u0627 \u06cc\u0627 \u062f\u0631\u0633\u062a \u0634\u062f\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u067e \u0644\u0648\u0688 \u06a9\u0631\u0646\u0627) \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0633 \u06a9\u06cc \u0627\u067e\u0646\u06cc \u0648\u0627\u0631\u0646\u0646\u06af \u06a9\u0627 \u0645\u0633\u062a\u062d\u0642 \u06c1\u06d2\u06d4 \u0627\u06af\u0631\u0686\u06c1 \u0627\u0648\u067e\u0631 \u0646\u06c1\u06cc\u06ba \u062f\u06a9\u06be\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0628\u06c1\u0627\u0624 \u06a9\u0627 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u0648\u0631\u0698\u0646 \u0648\u06c1 \u062d\u0627\u0644\u062a \u06c1\u06d2 \u062c\u0633 \u067e\u0631 \u0633\u0628 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0627\u062b\u0631 \u067e\u0691\u062a\u0627 \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0628\u06c1\u0627\u0624 \u0641\u06cc \u0627\u0644\u062d\u0627\u0644 \u0679\u06be\u06cc\u06a9 \u06c1\u06d2 \u06cc\u0627 \u0679\u06be\u06cc\u06a9 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-live-preview\"><strong>\u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1:<\/strong><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/08\/1786660278_213_Shadcn-UI-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-React-\u0645\u06cc\u06ba-\u062a\u0648\u0633\u06cc\u0639-\u067e\u0630\u06cc\u0631.png\" alt=\"\u0645\u0631\u062d\u0644\u06c1 3: \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062a\u0635\u062f\u06cc\u0642 \u06a9\u06cc \u062d\u06cc\u062b\u06cc\u062a\" style=\"display:block;margin:0 auto\" width=\"1919\" height=\"946\" loading=\"lazy\" title=\"\"><\/p>\n<hr\/>\n<h2 id=\"heading-adding-a-stepper-to-the-flow\">\u0628\u06c1\u0627\u0624 \u0645\u06cc\u06ba \u0633\u0679\u06cc\u067e\u0631 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0633\u0679\u06cc\u067e\u0631 \u0645\u062c\u0645\u0648\u0639\u06cc \u0628\u06c1\u0627\u0624 \u06a9\u0627 \u0628\u0635\u0631\u06cc \u0627\u06cc\u0646\u06a9\u0631 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0648\u06c1 \u062d\u0635\u06c1 \u06c1\u06d2 \u062c\u0648 \u062a\u0635\u062f\u06cc\u0642 \u0627\u0648\u0631 \u0627\u06a9\u0627\u0624\u0646\u0679 \u06a9\u06cc \u0642\u0633\u0645 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u06a9\u0645\u0644 \u06c1\u0648\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0635\u0627\u0631\u0641 \u06a9\u0648 \u0628\u0642\u06cc\u06c1 \u0631\u0642\u0645 \u06a9\u06cc \u0627\u0637\u0644\u0627\u0639 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">function Stepper({ current }: { current: Step }) {\n  return (\n    <nav aria-label=\"Onboarding progress\" classname=\"grid grid-cols-[minmax(0,1fr)_minmax(2rem,5rem)_minmax(0,1fr)_minmax(2rem,5rem)_minmax(0,1fr)] items-start gap-0\">\n      {steps.map((step, index) => (\n        <div key=\"{step.number}\" classname=\"contents\">\n          <div classname=\"flex min-w-0 flex-col items-center text-center\">\n            <p> step.number\n                  ? 'border-primary bg-primary text-primary-foreground'\n                  : current === step.number\n                  ? 'border-primary bg-primary\/10 text-primary'\n                  : 'border-border bg-background text-muted-foreground'\n              )}\n              aria-current={current === step.number ? 'step' : undefined}\n            >\n              {current > step.number ? <check classname=\"size-4\" aria-hidden=\"true\"\/> : step.number}\n            <\/p>\n            <div classname=\"mt-2 min-w-0\">\n              <p classname=\"{cn('truncate\" text-sm=\"\" font-semibold=\"\" current=\"\">= step.number ? 'text-foreground' : 'text-muted-foreground')}>\n                {step.label}\n              <\/p>\n              <p classname=\"mt-1 hidden text-xs leading-5 text-muted-foreground sm:block\">{step.caption}<\/p>\n            <\/div>\n          <\/div>\n          {index < steps.length - 1 &#038;&#038; (\n            <p> step.number ? 'bg-primary' : 'bg-border')} \/>\n          )}\n        <\/p>\n      ))}\n    \n  )\n}\n\n<p>The <code>current > step.number<\/code> check keeps the entire stepper in sync with a single comparison. It determines the circle\u2019s fill color, decides when the step number should be replaced by a checkmark, and controls whether the connecting line to the next step is filled.<\/p>\n<p>This is important because the stepper only needs one piece of state, <code>step<\/code>, from the parent component. It doesn\u2019t need to know why the user is on step 2, it only needs to know which step is currently active and update its visual state accordingly.<\/p>\n<p>The \"continue\" logic that actually advances <code>step<\/code> lives outside the stepper itself:<\/p>\n<pre><code class=\"language-javascript\">const continueStep = () => {\n  if (step === 1) setStep(2)\n  else if (step === 2 && file) {\n    setStep(3)\n    setChecking(true)\n    window.setTimeout(() => {\n      setChecking(false)\n      setVerified(true)\n    }, 1400)\n  }\n}\n<\/code><\/pre>\n<p>\u0627\u0633\u06d2 \u0635\u0641\u062d\u06c1 \u06a9\u06d2 \u062c\u0632\u0648 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u06cc\u06ba\u060c \u0635\u0641\u062d\u06c1 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0646\u06c1\u06cc\u06ba\u06d4 <strong>shadsen steppe<\/strong> \u06cc\u06c1 \u0648\u06c1\u06cc \u06c1\u06d2 \u062c\u0648 \u0633\u0679\u06cc\u067e\u0631 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0635\u0631\u0641 \u062a\u0631\u0642\u06cc \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0646 \u06a9\u06d2 \u0627\u0631\u062f \u06af\u0631\u062f \u0628\u06c1\u0627\u0624 \u0627\u0633 \u0628\u0627\u062a \u06a9\u0627 \u062a\u0639\u06cc\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0622\u06cc\u0627 \u0635\u0627\u0631\u0641 \u0622\u06af\u06d2 \u0628\u0691\u06be \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0622\u06cc\u0627 \u0627\u0633\u06d2 \u0645\u0631\u062d\u0644\u06c1 2 \u0645\u06cc\u06ba \u0641\u0627\u0626\u0644 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u060c \u06cc\u0627 \u0627\u0633\u06d2 \u0645\u0631\u062d\u0644\u06c1 1 \u0645\u06cc\u06ba \u06a9\u0633\u06cc \u0686\u06cc\u0632 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-small-details-that-make-it-feel-finished\">\u0686\u06be\u0648\u0679\u06cc \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u062c\u0648 \u0645\u06a9\u0645\u0644 \u0627\u062d\u0633\u0627\u0633 \u062f\u06cc\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/h2>\n<p>\u0627\u0633 \u062a\u0639\u0645\u06cc\u0631 \u0645\u06cc\u06ba \u06a9\u0686\u06be \u0686\u06cc\u0632\u06cc\u06ba \u0686\u06be\u0648\u0691\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u0648\u06c1 \u0648\u0627\u0642\u0639\u06cc \u0628\u062f\u0644\u062a\u06cc \u06c1\u06cc\u06ba \u06a9\u06c1 \u0628\u06c1\u0627\u0624 \u06a9\u06cc\u0633\u0627 \u0645\u062d\u0633\u0648\u0633 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<ul>\n<li>\n<p><strong>\u0688\u0627\u0631\u06a9 \u0645\u0648\u0688 \u0679\u0648\u06af\u0644<\/strong> \u06c1\u06cc\u0688\u0631 \u0645\u06cc\u06ba <code>darkMode<\/code> \u06a9\u0644\u0627\u0633 \u0622\u0646 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u062d\u0627\u0644\u062a <code>document.documentElement<\/code>. \u06cc\u06c1 \u0686\u06be\u0648\u0679\u0627 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06c1 \u0628\u06c1\u0627\u0624 \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0633\u0633\u0679\u0645 \u062a\u06be\u06cc\u0645 \u06a9\u06cc \u062a\u0631\u062c\u06cc\u062d\u0627\u062a \u0633\u06d2 \u0645\u062a\u0635\u0627\u062f\u0645 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0633\u06cc\u06a9\u06cc\u0648\u0631\u0679\u06cc \u0646\u0648\u0679<\/strong> \u0633\u0627\u0626\u0688\u0628\u0627\u0631 \u0645\u06cc\u06ba \u06a9\u06c1\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u06a9\u06c1 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632 \u06a9\u0648 \u0627\u0646\u06a9\u0631\u067e\u0679 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u0627\u0648\u0631 \u062a\u0635\u062f\u06cc\u0642 \u06a9\u06d2 \u0628\u0639\u062f \u062d\u0630\u0641 \u06a9\u0631 \u062f\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4 \u06cc\u06c1 \u0627\u06cc\u06a9 \u06a9\u0627\u067e\u06cc \u06c1\u06d2\u060c \u06a9\u0648\u0688 \u0646\u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u0627\u0646\u0679\u0631\u067e\u0631\u0627\u0626\u0632 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u06d2 \u0633\u0628 \u0633\u06d2 \u067e\u0631\u0633\u06a9\u0648\u0646 \u0627\u0648\u0631 \u067e\u0631\u06cc\u0634\u0627\u0646 \u06a9\u0646 \u0633\u0648\u0627\u0644 \u06a9\u0627 \u062c\u0648\u0627\u0628 \u062f\u06cc\u062a\u0627 \u06c1\u06d2: \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u06d2 \u0627\u067e \u0644\u0648\u0688 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0627\u0646 \u06a9\u0627 \u06a9\u06cc\u0627 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u061f<\/p>\n<\/li>\n<li>\n<p><strong>\"\u0645\u0646\u062a\u062e\u0628\" \u062a\u0635\u062f\u06cc\u0642\u06cc \u0644\u0627\u0626\u0646<\/strong> \u0631\u06cc\u0688\u06cc\u0648 \u06af\u0631\u0648\u067e \u06a9\u06d2 \u062a\u062d\u062a \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062f\u06c1 \u067e\u0631\u062a \u06a9\u0648 \u0633\u0627\u062f\u06c1 \u0645\u062a\u0646 \u0645\u06cc\u06ba \u062f\u0648\u0628\u0627\u0631\u06c1 \u0633\u06cc\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0686\u06be\u0648\u0679\u06cc \u0633\u06cc \u062a\u0641\u0635\u06cc\u0644 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0633 \u0633\u06d2 \u0627\u0633 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u06a9\u0648\u0626\u06cc \u0634\u06a9 \u062f\u0648\u0631 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0622\u06af\u06d2 \u0628\u0691\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0635\u0644 \u0645\u06cc\u06ba \u06a9\u06cc\u0627 \u0686\u0646\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0645\u06a9\u0645\u0644 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0634\u06cc\u0644 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0627\u0648\u0631 \u0688\u06cc\u0634 \u0628\u0648\u0631\u0688\u0632 \u06a9\u06d2 \u0627\u0631\u062f \u06af\u0631\u062f \u0627\u0633 \u0637\u0631\u062d \u06a9\u06d2 \u0628\u06c1\u0627\u0624 \u06a9\u0648 \u0644\u067e\u06cc\u0679\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <strong>Shadcn \u0688\u06cc\u0634 \u0628\u0648\u0631\u0688<\/strong> \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u0627 \u0627\u06cc\u06a9 \u06c1\u06cc \u0633\u06cc\u0679 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0634\u0631\u0648\u0639 \u0633\u06d2 \u0634\u06cc\u0644 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u0633\u06d2 \u0628\u0691\u06be\u0627\u0646\u0627 \u0627\u06cc\u06a9 \u0645\u0639\u0642\u0648\u0644 \u0628\u0646\u06cc\u0627\u062f \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-live-preview\">\u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1:<\/h3>\n<p>https:\/\/onboarding-kyc-flow.vercel.app\/<\/p>\n<p>\u06cc\u06c1 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0627\u06af\u0631 \u0622\u067e \u0686\u0627\u06c1\u06cc\u06ba \u062a\u0648 \u0622\u067e \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u0632\u067e \u0688\u0627\u0624\u0646 \u0644\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u0627\u0633\u06d2 \u0627\u0633\u0679\u0627\u0631 \u06a9\u06cc \u062f\u0631\u062c\u06c1 \u0628\u0646\u062f\u06cc \u062f\u06cc\u0646\u06d2 \u067e\u0631 \u063a\u0648\u0631 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-accessibility-notes\">\u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc \u0646\u0648\u0679\u0633<\/h2>\n<ul>\n<li>\n<p>\u0633\u0679\u06cc\u067e\u0631 <code>nav<\/code> \u0639\u0646\u0635\u0631 \u0645\u06cc\u06ba <code>aria-label<\/code>\u0645\u0648\u062c\u0648\u062f\u06c1 \u0645\u0631\u062d\u0644\u06c1 \u06c1\u06d2\u06d4 <code>aria-current=\"step\"<\/code>\u0645\u0639\u0627\u0648\u0646 \u0679\u06cc\u06a9\u0646\u0627\u0644\u0648\u062c\u06cc \u0635\u0631\u0641 \u0628\u0635\u0631\u06cc \u0645\u0642\u0627\u0645 \u067e\u0631 \u0627\u0646\u062d\u0635\u0627\u0631 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u0633 \u0628\u0627\u062a \u06a9\u06cc \u0634\u0646\u0627\u062e\u062a \u06a9\u0631 \u0633\u06a9\u062a\u06cc \u06c1\u06d2 \u06a9\u06c1 \u06a9\u06cc\u0627 \u06c1\u0648 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0631\u06cc\u0688\u06cc\u0648 \u06af\u0631\u0648\u067e <code>fieldset<\/code> \u0635\u0631\u0641 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0631\u06cc\u0688\u0631\u0632 <code>legend<\/code>\u0627\u06a9\u0627\u0624\u0646\u0679 \u06a9\u06cc \u062a\u06cc\u0646 \u0627\u0642\u0633\u0627\u0645 \u06a9\u0648 \u0627\u06cc\u06a9 \u0641\u06cc\u0635\u0644\u06d2 \u0645\u06cc\u06ba \u06af\u0631\u0648\u067e \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u062a\u0645\u0627\u0645 \u0634\u0628\u06cc\u06c1\u06cc\u06ba (<code>Check<\/code>, <code>AlertCircle<\/code>, <code>UploadCloud<\/code>\u0648\u063a\u06cc\u0631\u06c1) \u0644\u06d2 \u062c\u0627\u0646\u0627 <code>aria-hidden=\"true\"<\/code>\u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0645\u062a\u0646 \u06a9\u06d2 \u0622\u06af\u06d2 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u0633\u062c\u0627\u0648\u0679 \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2 \u062c\u0648 \u0627\u0633\u06cc \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u06a9\u06cc \u0646\u0645\u0627\u0626\u0646\u062f\u06af\u06cc \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0631\u06cc\u0688\u0631\u0632 \u06a9\u0648 \u0688\u067e\u0644\u06cc\u06a9\u06cc\u0679 \u0622\u0626\u06cc\u06a9\u0646 \u0644\u06cc\u0628\u0644\u0632 \u06a9\u0627 \u0627\u0639\u0644\u0627\u0646 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0631\u0648\u06a9 \u062f\u06d2 \u06af\u0627\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0641\u0627\u0626\u0644 \u06c1\u0679\u0627\u0626\u06cc\u06ba \u0628\u0679\u0646 \u0645\u06cc\u06ba \u0648\u0627\u0636\u062d \u0645\u0648\u0627\u062f \u06c1\u06d2\u06d4 <code>aria-label<\/code>\u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u062f\u06a9\u06be\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u0645\u0648\u0627\u062f \u0645\u062d\u0636 \u0627\u06cc\u06a9 \u0622\u0626\u06cc\u06a9\u0646 \u06c1\u06d2 \u062c\u0633 \u0645\u06cc\u06ba \u06a9\u0648\u0626\u06cc \u0645\u062a\u0646 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-key-concepts-recap\">\u06a9\u0644\u06cc\u062f\u06cc \u062a\u0635\u0648\u0631\u0627\u062a \u06a9\u0627 \u062e\u0644\u0627\u0635\u06c1<\/h2>\n<ul>\n<li>\n<p>\u0627\u06a9\u0627\u0624\u0646\u0679 \u06a9\u06cc \u0642\u0633\u0645 \u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0622\u062a\u06cc \u06c1\u06d2 \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u06cc\u06c1 \u0641\u06cc\u0635\u0644\u06c1 \u06c1\u06d2 \u062c\u0648 \u0628\u0642\u06cc\u06c1 \u0628\u06c1\u0627\u0624 \u06a9\u0648 \u0645\u062a\u0627\u062b\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0631\u06cc\u0688\u06cc\u0648 \u06af\u0631\u0648\u067e \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06cc \u0628\u062c\u0627\u0626\u06d2 \u0635\u0641\u062d\u06c1 \u06a9\u06cc \u0633\u0637\u062d \u067e\u0631 \u0631\u06a9\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0641\u0627\u0626\u0644 \u06a9\u06cc \u062a\u0648\u062b\u06cc\u0642 \u0627\u0633 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0641\u0639\u0627\u0644\u06cc\u062a \u067e\u0631 \u0686\u0644\u062a\u06cc \u06c1\u06d2 \u062c\u0648 \u0688\u0631\u06cc\u06af \u0627\u06cc\u0646\u0688 \u0688\u0631\u0627\u067e \u0627\u0648\u0631 \u06a9\u0644\u06a9 \u0679\u0648 \u0628\u0631\u0627\u0624\u0632 \u067e\u0627\u062a\u06be \u062f\u0648\u0646\u0648\u06ba \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u062f\u0648\u0646\u0648\u06ba \u0631\u0627\u0633\u062a\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc PDF\/CSV \u062a\u0648\u062b\u06cc\u0642 \u06a9\u0627 \u0627\u0637\u0644\u0627\u0642 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u062a\u0648\u062b\u06cc\u0642 \u06a9\u06cc \u062d\u06cc\u062b\u06cc\u062a \u0627\u0644\u0641\u0627\u0638 (\u0627\u0646\u062a\u0628\u0627\u06c1\u0627\u062a) \u0627\u0648\u0631 \u062a\u062e\u0645\u06cc\u0646\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a (\u067e\u0631\u0627\u06af\u0631\u06cc\u0633 \u0628\u0627\u0631\u0632) \u062f\u0648\u0646\u0648\u06ba \u0645\u06cc\u06ba \u0628\u062a\u0627\u0626\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0633\u06cc \u0627\u06cc\u06a9 \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0627 \u06a9\u0686\u06be \u062d\u0635\u06c1 \u063a\u0627\u0626\u0628 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0627\u06cc\u06a9 \u0633\u0679\u06cc\u067e\u0631 \u0627\u06cc\u06a9 \u062e\u0627\u0644\u0635 \u0688\u0633\u067e\u0644\u06d2 \u062c\u0632\u0648 \u06c1\u06d2 \u062c\u0648 \u0627\u06cc\u06a9 \u0622\u0644\u06c1 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06c1 \u0686\u0644\u0627\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 <code>step<\/code> \u0648\u0627\u0644\u062f\u06cc\u0646 \u06a9\u06cc \u0627\u0642\u062f\u0627\u0631\u06d4 \u0627\u0633 \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u0645\u0646\u0637\u0642 \u06c1\u06d2 \u06a9\u06c1 \u0622\u06cc\u0627 \u0635\u0627\u0631\u0641 \u0627\u067e\u0646\u06cc \u0632\u0646\u062f\u06af\u06cc \u06a9\u0648 \u0627\u0646\u062f\u0631 \u06a9\u06cc \u0628\u062c\u0627\u0626\u06d2 \u0628\u0627\u06c1\u0631 \u0633\u06d2 \u062a\u0631\u0642\u06cc \u062f\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0686\u06be\u0648\u0679\u06cc \u063a\u06cc\u0631 \u062a\u06a9\u0646\u06cc\u06a9\u06cc \u062a\u0641\u0635\u06cc\u0644\u0627\u062a (\u062c\u06cc\u0633\u06d2 \u062d\u0641\u0627\u0638\u062a\u06cc \u0646\u0648\u0679\u060c \u062a\u0635\u062f\u06cc\u0642\u06cc \u0644\u06a9\u06cc\u0631\u06cc\u06ba\u060c \u06cc\u0627 \u062a\u06be\u06cc\u0645 \u0679\u0648\u06af\u0644\u0632) \u06a9\u0627 \u0627\u062a\u0646\u0627 \u06c1\u06cc \u0627\u062b\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0641\u0644\u0648 \u06a9\u06cc\u0633\u06d2 \u0645\u06a9\u0645\u0644 \u0645\u062d\u0633\u0648\u0633 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u06cc\u0633\u0627 \u06a9\u06c1 \u0686\u0627\u0631 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0627\u062c\u0632\u0627\u0621\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-conclusion\">\u0646\u062a\u06cc\u062c\u06c1<\/h2>\n<p>\u0627\u0633 \u0628\u06c1\u0627\u0624 \u06a9\u06d2 \u0686\u0627\u0631 \u0627\u062c\u0632\u0627\u0621 \u0645\u06cc\u06ba \u0633\u06d2 \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0627\u0646\u0641\u0631\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 \u067e\u06cc\u0686\u06cc\u062f\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 KYC \u0628\u06c1\u0627\u0624 \u06a9\u0627 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u0627 \u0627\u0633 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0641\u06cc\u0635\u0644\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0648\u0646 \u0633\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u067e\u06c1\u0644\u06d2 \u0622\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0635\u0644 \u0645\u06cc\u06ba \u062a\u0648\u062b\u06cc\u0642 \u06a9\u06c1\u0627\u06ba \u0686\u0644\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u0635\u0627\u0631\u0641 \u0633\u06d2 \u06a9\u062a\u0646\u06cc \u0627\u06cc\u0645\u0627\u0646\u062f\u0627\u0631\u06cc \u0633\u06d2 \u0628\u0627\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0628 \u06a9\u06c1 \u0622\u067e \u06a9\u06d2 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u0686\u06cc\u0632\u0648\u06ba \u06a9\u06cc \u062c\u0627\u0646\u0686 \u067e\u0691\u062a\u0627\u0644 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0686\u0627\u06c1\u06d2 \u0622\u067e \u06a9\u0627 \u067e\u06c1\u0644\u0627 \u0645\u0633\u0648\u062f\u06c1 \u06c1\u0631 \u0644\u0627\u0626\u0646 \u06a9\u0648 \u06c1\u0627\u062a\u06be \u0633\u06d2 \u0679\u0627\u0626\u067e \u06a9\u0631\u0646\u06d2 \u06cc\u0627 MCP \u0633\u0631\u0648\u0631 \u0627\u0648\u0631 v0 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u0633\u06a9\u0627\u0641\u0648\u0644\u0688 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0622\u062a\u0627 \u06c1\u06d2\u060c \u06cc\u06c1 \u0631\u06cc\u0644\u06cc\u0632 \u0633\u06d2 \u0679\u06be\u06cc\u06a9 \u067e\u06c1\u0644\u06d2 \u0648\u0642\u062a \u0644\u06af\u0627\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-resources\">\u0648\u0633\u0627\u0626\u0644<\/h2>\n<\/p><\/div>\n<hr\/>\n<hr\/>\n<p data-test-label=\"social-row-cta\" class=\"social-row\">\n<p>    \u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u0627\u0628 \u062a\u06a9 \u067e\u0691\u06be\u0627 \u06c1\u06d2 \u062a\u0648 \u0645\u0635\u0646\u0641 \u0645\u06cc\u06ba \u062f\u0644\u0686\u0633\u067e\u06cc \u06a9\u0627 \u0634\u06a9\u0631\u06cc\u06c1\u06d4 <button id=\"tweet-btn\" class=\"cta-button\" data-test-label=\"tweet-button\">\u0634\u06a9\u0631\u06cc\u06c1<\/button>\n<\/p>\n<div class=\"learn-cta-row\" data-test-label=\"learn-cta-row\">\n<p>        \u0645\u0641\u062a \u0645\u06cc\u06ba \u06a9\u0648\u0688 \u0633\u06cc\u06a9\u06be\u06cc\u06ba\u06d4 freeCodeCamp \u06a9\u06d2 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u0646\u0635\u0627\u0628 \u0646\u06d2 40,000 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0644\u0648\u06af\u0648\u06ba \u06a9\u0648 \u0628\u0637\u0648\u0631 \u0688\u06cc\u0648\u0644\u067e\u0631 \u0645\u0644\u0627\u0632\u0645\u062a\u06cc\u06ba \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u062f\u062f \u06a9\u06cc \u06c1\u06d2\u06d4 \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u0627\n    <\/p>\n<\/div>\n<\/nav>\n<p><\/code><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062a\u0639\u0645\u06cc\u0644 \u06a9\u06cc \u0636\u0631\u0648\u0631\u06cc\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc B2B SaaS \u067e\u0631\u0648\u0688\u06a9\u0679 (\u0645\u062b\u0644\u0627\u064b \u0628\u06cc\u0646\u06a9\u0646\u06af\u060c \u0642\u0631\u0636 \u062f\u06cc\u0646\u0627\u060c \u067e\u06d2 \u0631\u0648\u0644\u060c \u06cc\u0627 \u06a9\u0631\u06cc\u067e\u0679\u0648 \u06a9\u0631\u0646\u0633\u06cc) \u0627\u0628\u062a\u062f\u0627\u0626\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u06cc\u06a9 \u06c1\u06cc \u062f\u06cc\u0648\u0627\u0631 \u0633\u06d2 \u0679\u06a9\u0631\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06a9\u0633\u06cc \u06a9\u0627\u0631\u0648\u0628\u0627\u0631 \u06a9\u0648 \u0627\u067e\u0646\u0627 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0622\u067e \u06a9\u0648 \u0627\u0633 \u0628\u0627\u062a \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u06a9\u0631\u0646\u06cc \u06c1\u0648\u06af\u06cc \u06a9\u06c1 \u0648\u06c1 \u06a9\u0627\u0631\u0648\u0628\u0627\u0631 \u06a9\u0648\u0646 \u06c1\u06d2\u06d4 \u0627\u0633 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":27655,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-27654","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/27654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/comments?post=27654"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/27654\/revisions"}],"predecessor-version":[{"id":27656,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/27654\/revisions\/27656"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media\/27655"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media?parent=27654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/categories?post=27654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/tags?post=27654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}