{"id":26421,"date":"2026-07-08T14:33:23","date_gmt":"2026-07-08T14:33:23","guid":{"rendered":"https:\/\/umang.pk\/2026\/07\/08\/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-%d9%be%d8%b1%d9%88%da%88%da%a9%d8%b4%d9%86-%da%a9%db%92-%d9%84%db%8c%db%92-%d8%aa\/"},"modified":"2026-07-08T14:33:24","modified_gmt":"2026-07-08T14:33:24","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-%d9%be%d8%b1%d9%88%da%88%da%a9%d8%b4%d9%86-%da%a9%db%92-%d9%84%db%8c%db%92-%d8%aa","status":"publish","type":"post","link":"https:\/\/umang.pk\/en_us\/2026\/07\/08\/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-%d9%be%d8%b1%d9%88%da%88%da%a9%d8%b4%d9%86-%da%a9%db%92-%d9%84%db%8c%db%92-%d8%aa\/","title":{"rendered":"shadcn\/ui \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u0626\u06d2 \u062c\u0627\u0626\u06cc\u06ba\u06d4"},"content":{"rendered":"\n<div>. \u0627\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0645\u0633\u062a\u0642\u0644 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0633\u0627\u062e\u062a\u060c \u0627\u06cc\u06a9 \u0645\u0633\u062a\u062d\u06a9\u0645 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645\u060c \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0633\u0648\u0686\u06d2 \u0633\u0645\u062c\u06be\u06d2 \u0679\u06cc\u0644 \u0648\u0650\u0646\u0688 \u067e\u06cc\u0679\u0631\u0646 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba\u060c \u06c1\u0645 shadcn\/ui \u0627\u0648\u0631 Shadcn Space \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0628\u0646\u06cc\u0627\u062f\u06cc UI \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0686\u0627\u0631 \u0642\u0633\u0645 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u067e\u06cc\u062f\u0627\u0648\u0627\u0631\u06cc \u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4 \u06c1\u0631 \u06a9\u0627\u0631\u0688 \u0627\u06cc\u06a9 \u0645\u062e\u0635\u0648\u0635 \u062d\u0642\u06cc\u0642\u06cc \u062f\u0646\u06cc\u0627 \u06a9\u06d2 UI \u067e\u06cc\u0679\u0631\u0646 \u06a9\u0648 \u0646\u0634\u0627\u0646\u06c1 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u0633 \u06a9\u0627 \u0688\u06cc\u0648\u0644\u067e\u0631\u0632 \u0645\u0633\u062a\u0642\u0644 \u0628\u0646\u06cc\u0627\u062f\u0648\u06ba \u067e\u0631 \u0633\u0627\u0645\u0646\u0627 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u06c1\u0648\u06af\u0627:<\/p>\n<ol>\n<li>\n<p>\u06af\u0631\u0648\u067e \u06c1\u0648\u0648\u0631 \u0627\u0645\u06cc\u062c \u0627\u06cc\u0641\u06cc\u06a9\u0679\u060c \u0627\u0648\u0648\u0631\u0644\u06d2 \u0627\u06cc\u0631\u0648 \u0622\u0626\u06cc\u06a9\u0646\u060c \u0627\u0648\u0631 \u067e\u0631\u0627\u067e\u0631\u0679\u06cc \u06a9\u06cc \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u0644\u06d2 \u0622\u0624\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0627\u0631\u0688<\/p>\n<\/li>\n<li>\n<p>\u062f\u0631\u062c \u06a9\u0631\u062f\u06c1 \u0645\u06cc\u0679\u0631\u06a9 \u067e\u0631\u0648\u067e\u0633\u060c \u0645\u0634\u0631\u0648\u0637 \u0628\u06cc\u062c \u06a9\u0627 \u0631\u0646\u06af\u060c \u0627\u0648\u0631 \u0622\u0631\u0627\u0626\u0634\u06cc \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u06cc \u062a\u0635\u0648\u06cc\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062a\u062c\u0632\u06cc\u06c1 \u06a9\u0627\u0631\u0688<\/p>\n<\/li>\n<li>\n<p>\u062c\u0648\u0627\u0628\u06cc 4 \u06a9\u0627\u0644\u0645 \u0627\u06cc \u06a9\u0627\u0645\u0631\u0633 \u0634\u0645\u0627\u0631\u06cc\u0627\u062a \u06af\u0631\u0688 \u0627\u0648\u0631 \u0622\u0626\u06cc\u06a9\u0646 \u0628\u06cc\u062c\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0634\u0645\u0627\u0631\u06cc\u0627\u062a \u06a9\u0627\u0631\u0688<\/p>\n<\/li>\n<li>\n<p>\u0633\u0627\u0626\u0632 \u06a9\u06d2 \u0627\u0646\u062a\u062e\u0627\u0628\u060c \u062e\u0648\u0627\u06c1\u0634 \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u0679\u0648\u06af\u0644\u060c \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u0628\u0679\u0646\u060c \u0627\u0648\u0631 \u062e\u0631\u06cc\u062f \u0628\u0679\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0631\u06cc\u067e\u0644 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc \u06a9\u0627\u0645\u0631\u0633 \u067e\u0631\u0648\u0688\u06a9\u0679 \u0648\u06cc\u0631\u06cc \u0627\u06cc\u0634\u0646 \u06a9\u0627\u0631\u0688\u06d4<\/p>\n<\/li>\n<\/ol>\n<h2 id=\"heading-table-of-contents\"><strong>\u0627\u0646\u0688\u06cc\u06a9\u0633<\/strong><\/h2>\n<h2 id=\"heading-prerequisites\"><strong>\u0634\u0631\u0637\u06cc\u06ba<\/strong><\/h2>\n<p>\u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u062f\u0631\u062c \u0630\u06cc\u0644 \u06c1\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p>Node.js 18 \u06cc\u0627 \u0627\u0633 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0627\u0646\u0633\u0679\u0627\u0644 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>Next.js \u06cc\u0627 React \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u0648 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0646\u0627<\/p>\n<\/li>\n<li>\n<p>shadcn\/ui \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0634\u0631\u0648\u0639 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 (<code>npx shadcn@latest init<\/code>)<\/p>\n<\/li>\n<li>\n<p>Tailwind CSS \u0627\u0628 \u06a9\u0646\u0641\u06cc\u06af\u0631 \u06c1\u0648 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>React \u0627\u0648\u0631 TypeScript \u06a9\u0627 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0639\u0644\u0645<\/p>\n<\/li>\n<\/ul>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0646\u06d2 \u0627\u0628\u06be\u06cc \u062a\u06a9 shadcn\/ui \u0634\u0631\u0648\u0639 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u06c1\u06d2 \u062a\u0648 \u0686\u0644\u0627\u0626\u06cc\u06ba: <code>npx shadcn@latest init<\/code> \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06cc \u062c\u0691 \u0633\u06d2 \u062c\u0627\u0631\u06cc \u0631\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0634\u0627\u0631\u06d2 \u067e\u0631 \u0639\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-why-shadcnui\"><strong>shadcn\/ui \u06a9\u06cc\u0648\u06ba\u061f<\/strong><\/h2>\n<p><strong>shadcn\/ui<\/strong> Radix UI\u060c \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc\u060c \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 React \u0627\u062c\u0632\u0627\u0621 \u06a9\u0627 \u0645\u062c\u0645\u0648\u0639\u06c1 \u062c\u0648 Base UI \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2 \u0627\u0648\u0631 Tailwind CSS \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u06a9\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 \u0631\u0648\u0627\u06cc\u062a\u06cc \u062c\u0632\u0648 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u0633\u06d2 \u0645\u062e\u062a\u0644\u0641 \u06c1\u06d2\u06d4 \u067e\u06cc\u06a9\u062c\u0632 \u06a9\u0648 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0633\u06cc \u0627\u06cc\u0644 \u0622\u0626\u06cc \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u06a9\u0645\u067e\u0648\u0646\u0646\u0679 \u0633\u0648\u0631\u0633 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u06a9\u0627\u067e\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u06a9\u0648\u0688 \u06a9\u06cc \u06c1\u0631 \u0644\u0627\u0626\u0646 \u06a9\u06d2 \u0645\u0627\u0644\u06a9 \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u0627\u0646\u06c1\u06cc\u06ba \u067e\u0691\u06be \u0627\u0648\u0631 \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0622\u067e \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0627\u067e \u0688\u06cc\u0679\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u0633\u06d2 \u0646\u06c1\u06cc\u06ba \u0679\u0648\u0679\u06cc\u06ba \u06af\u06d2 \u062c\u0646 \u067e\u0631 \u0622\u067e \u06a9\u0627 \u06a9\u0646\u0679\u0631\u0648\u0644 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<p>\u06a9\u0686\u06be \u0627\u06c1\u0645 \u0641\u0648\u0627\u0626\u062f:<\/p>\n<ul>\n<li>\n<p><strong>\u0688\u06cc\u0641\u0627\u0644\u0679 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc<\/strong>: Radix UI \u0627\u0648\u0631 \u0628\u06cc\u0633 UI \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648\u0632 \u067e\u0631 \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0679\u06cc\u0644 \u0648\u0646\u0688 \u067e\u0631 \u0645\u0628\u0646\u06cc<\/strong>: \u06a9\u0648\u0626\u06cc \u0628\u06cc\u0631\u0648\u0646\u06cc CSS \u0641\u0627\u0626\u0644\u06cc\u06ba \u0627\u0648\u0631 \u06a9\u0648\u0626\u06cc \u0645\u062e\u0635\u0648\u0635\u06cc\u062a \u06a9\u0627 \u062a\u0646\u0627\u0632\u0639\u06c1 \u0646\u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0632\u06cc\u0631\u0648 \u0644\u0627\u06a9 \u0627\u0646<\/strong>: \u062c\u0632\u0648 \u0622\u067e \u06a9\u0627 \u06c1\u06d2\u06d4 <code>components\/<\/code> \u0641\u0648\u0644\u0688\u0631\u060c \u0627\u0646\u062f\u0631 \u0646\u06c1\u06cc\u06ba <code>node_modules<\/code><\/p>\n<\/li>\n<li>\n<p><strong>\u06a9\u06c1\u06cc\u06ba \u0628\u06be\u06cc \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/strong>: Next.js\u060c Vite\u060c Astro\u060c Remix \u0627\u0648\u0631 \u062f\u06cc\u06af\u0631 React \u0641\u0631\u06cc\u0645 \u0648\u0631\u06a9<\/p>\n<\/li>\n<\/ul>\n<p>\u06a9\u06c1 <code>Card<\/code>\u060c <code>Badge<\/code>\u060c <code>Button<\/code>\u0627\u0648\u0631 <code>Separator<\/code> \u062a\u0645\u0627\u0645 \u0627\u062c\u0632\u0627\u0621 \u062c\u0648 \u06c1\u0645 \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2 \u0648\u06c1 shadcn\/ui \u06a9\u06cc \u0688\u06cc\u0641\u0627\u0644\u0679 \u0627\u0646\u0633\u0679\u0627\u0644\u06cc\u0634\u0646 \u0633\u06d2 \u0622\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-what-is-shadcn-space\"><strong>Shadcn Space \u06a9\u06cc\u0627 \u06c1\u06d2\u061f<\/strong><\/h2>\n<p><strong>Shadcn \u06a9\u06cc \u062c\u06af\u06c1<\/strong> \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u0627\u062c\u0632\u0627\u0621 \u0627\u0648\u0631 UI \u0628\u0644\u0627\u06a9\u0633 \u06a9\u06cc \u0627\u06cc\u06a9 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u0631\u062c\u0633\u0679\u0631\u06cc \u062c\u0648 shadcn\/ui \u06a9\u06d2 \u0627\u0648\u067e\u0631\u06cc \u062d\u0635\u06d2 \u0645\u06cc\u06ba \u0628\u0646\u0627\u0626\u06cc \u06af\u0626\u06cc \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0627\u0646\u062a\u06c1\u0627\u0626\u06cc \u067e\u0631\u06a9\u0634\u0634 \u062a\u0631\u062a\u06cc\u0628 \u062a\u06a9 \u067e\u06c1\u0646\u0686\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0639\u0627\u0645 \u0646\u0645\u0648\u0646\u0648\u06ba \u06a9\u06cc \u0627\u0636\u0627\u0641\u06cc \u062a\u063a\u06cc\u0631\u0627\u062a \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 shadcn\/ui \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0633\u06cc\u0679 \u06a9\u0648 \u0628\u0691\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0688\u06cc\u0641\u0627\u0644\u0679 shadcn\/ui \u0633\u06d2 \u06a9\u0644\u06cc\u062f\u06cc \u0627\u062e\u062a\u0644\u0627\u0641\u0627\u062a <code>Card<\/code> \u062c\u0632\u0648 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 Shadcn \u0627\u0633\u067e\u06cc\u0633 \u06a9\u0627\u0631\u0688\u0632 \u0627\u06cc\u06a9 \u0645\u062e\u0635\u0648\u0635 \u062a\u0631\u062a\u06cc\u0628 \u06a9\u06d2 \u067e\u06cc\u0679\u0631\u0646 \u06a9\u0648 \u0641\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u0646\u0627\u0626\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631\u060c \u0622\u067e \u06a9\u0648 \u0632\u06cc\u0627\u062f\u06c1 \u0688\u06be\u0627\u0646\u0686\u06c1 \u0645\u0644\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>Shadcn Space \u06a9\u0627 \u06c1\u0631 \u062c\u0632\u0648 Radix UI \u0627\u0648\u0631 Base UI \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648\u0632 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u062a\u0645 \u0628\u06be\u06cc <strong>\u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u0627\u067e\u06cc \u06a9\u0631\u06cc\u06ba\u06d4<\/strong>. \u06cc\u06c1 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0688\u06cc\u0641\u0627\u0644\u0679 UI \u0648\u0631\u0698\u0646 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u0627\u0633\u06d2 \u0627\u06cc\u06a9 \u06c1\u06cc CLI \u06a9\u0645\u0627\u0646\u0688 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 shadcn\/ui \u062c\u0632\u0648 \u06a9\u06cc \u0637\u0631\u062d \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0633\u0648\u0631\u0633 \u0641\u0627\u0626\u0644\u06cc\u06ba \u0622\u067e \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0645\u062d\u0641\u0648\u0638 \u06c1\u0648\u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u067e \u06a9\u0648 \u06a9\u0627\u0631\u0688 \u06a9\u0627 \u067e\u0648\u0631\u0627 \u0645\u062c\u0645\u0648\u0639\u06c1 \u06cc\u06c1\u0627\u06ba \u0645\u0644 \u0633\u06a9\u062a\u0627 \u06c1\u06d2: <strong>Shadcn \u06a9\u0627\u0631\u0688 \u062c\u0632\u0648 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc<\/strong>.<\/p>\n<h2 id=\"heading-what-youll-build\"><strong>\u06a9\u06cc\u0627 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0631\u0646\u0627 \u06c1\u06d2<\/strong><\/h2>\n<p>\u06cc\u06c1\u0627\u06ba \u0686\u0627\u0631 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u0627 \u0627\u06cc\u06a9 \u062c\u0627\u0626\u0632\u06c1 \u06c1\u06d2 \u062c\u0648 \u0622\u067e \u06c1\u0631 \u06a9\u0627\u0631\u0688 \u06a9\u06cc \u0645\u062e\u0635\u0648\u0635 \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<p><strong>\u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0627\u0631\u0688 (\u06a9\u0627\u0631\u0688-02)<\/strong><\/p>\n<ul>\n<li>\n<p>\u06c1\u0648\u0648\u0631 \u0628\u0631\u0627\u0626\u0679\u0646\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0691\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0627\u0648\u0631 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u062a\u06cc\u0631 \u06a9\u0627 \u0622\u0626\u06cc\u06a9\u0646 \u062c\u0648 \u0635\u0631\u0641 \u0627\u0648\u067e\u0631 \u0645\u0646\u0688\u0644\u0627\u062a\u06d2 \u0648\u0642\u062a \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u067e\u0631\u0627\u067e\u0631\u0679\u06cc \u06a9\u0627 \u0639\u0646\u0648\u0627\u0646 \u0627\u0648\u0631 \u0645\u0642\u0627\u0645<\/p>\n<\/li>\n<li>\n<p>\u0641\u06cc\u0631\u0648\u0632\u06cc \u0631\u0646\u06af \u0633\u06a9\u06cc\u0645 \u0645\u06cc\u06ba \u0642\u06cc\u0645\u062a \u06a9\u0627 \u0628\u06cc\u062c<\/p>\n<\/li>\n<li>\n<p>\u0628\u0633\u062a\u0631\u060c \u0628\u0627\u062a\u06be \u0679\u0628 \u0627\u0648\u0631 \u062e\u0644\u0627\u0626\u06cc \u0634\u0628\u06cc\u06c1\u06cc\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u06c1\u0648\u0644\u06cc\u0627\u062a \u06a9\u06cc \u0642\u0637\u0627\u0631<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u062a\u062c\u0632\u06cc\u06c1 \u06a9\u0627\u0631\u0688 (\u06a9\u0627\u0631\u0688-05)<\/strong><\/p>\n<ul>\n<li>\n<p>\u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0688\u06cc\u0679\u0627 \u0633\u06cc\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0679\u0627\u0626\u067e \u0627\u0633\u06a9\u0631\u067e\u0679 \u0679\u0627\u0626\u067e \u0627\u0633\u06a9\u0631\u067e\u0679 \u067e\u0631\u0648\u067e\u0633<\/p>\n<\/li>\n<li>\n<p>\u0645\u06cc\u0679\u0631\u06a9\u0633 \u06a9\u06d2 \u062f\u0648 \u06a9\u0627\u0644\u0645 \u0639\u0645\u0648\u062f\u06cc \u062a\u0642\u0633\u06cc\u0645 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0633\u06d2 \u0627\u0644\u06af \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0645\u062b\u0628\u062a \u06cc\u0627 \u0645\u0646\u0641\u06cc \u0631\u062c\u062d\u0627\u0646\u0627\u062a \u06a9\u06cc \u0628\u0646\u06cc\u0627\u062f \u067e\u0631 \u0645\u0634\u0631\u0648\u0637 \u0628\u06cc\u062c \u06a9\u0627 \u0631\u0646\u06af<\/p>\n<\/li>\n<li>\n<p>\u0622\u0631\u0627\u0626\u0634\u06cc \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0646\u06cc\u0686\u06d2 \u062f\u0627\u0626\u06cc\u06ba \u062c\u0627\u0646\u0628 \u067e\u0646 \u06a9\u06cc \u06af\u0626\u06cc \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0634\u0645\u0627\u0631\u06cc\u0627\u062a \u06a9\u0627\u0631\u0688 (\u06a9\u0627\u0631\u0688-06)<\/strong><\/p>\n<ul>\n<li>\n<p>4 \u06a9\u0627\u0644\u0645 \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u06af\u0631\u0688 \u0645\u0648\u0628\u0627\u0626\u0644 \u067e\u0631 \u0633\u062c\u0627 \u06c1\u0648\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06c1\u0631 \u0645\u06cc\u0679\u0631\u06a9 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0633\u0648\u0644\u0631 \u0622\u0626\u06cc\u06a9\u0646 \u0633\u06cc\u0679 \u06a9\u0648 \u0622\u0626\u06cc\u06a9\u0646\u06cc\u0641\u0627\u0626\u06cc \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0631\u062c\u062d\u0627\u0646 \u06a9\u06cc \u0633\u0645\u062a \u06a9\u06d2 \u0622\u0626\u06cc\u06a9\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u06cc\u062c<\/p>\n<\/li>\n<li>\n<p>\u0628\u0627\u0631\u0688\u0631 \u0688\u06cc\u0648\u0627\u0626\u06cc\u0688\u0631 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0622\u062e\u0631\u06cc \u06a9\u0627\u0644\u0645 \u0633\u06d2 \u06c1\u0679\u0627 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0627\u06cc \u06a9\u0627\u0645\u0631\u0633 \u067e\u0631\u0648\u0688\u06a9\u0679 \u0648\u06cc\u0631\u06cc\u0646\u0679 \u06a9\u0627\u0631\u0688 (\u06a9\u0627\u0631\u0688-17)<\/strong><\/p>\n<ul>\n<li>\n<p>3D \u0634\u06cc\u0688\u0648 \u0627\u0648\u0631 \u06c1\u0648\u0648\u0631 \u0632\u0648\u0645 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631<\/p>\n<\/li>\n<li>\n<p>\u0648\u0634 \u0644\u0633\u0679 \u06c1\u0627\u0631\u0679 \u0679\u0648\u06af\u0644 \u0688\u0627\u0631\u06a9 \u0645\u0648\u0688 \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0641\u0639\u0627\u0644 \u062d\u06cc\u062b\u06cc\u062a \u06a9\u0648 \u0646\u0645\u0627\u06cc\u0627\u06ba \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u0627\u0626\u0632 \u0633\u0644\u06cc\u06a9\u0679\u0631<\/p>\n<\/li>\n<li>\n<p>\u06a9\u0644\u06a9 \u06a9\u0631\u0646\u06d2 \u067e\u0631 \u0628\u06be\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u06cc\u06af \u06a9\u0627 \u0622\u0626\u06cc\u06a9\u0646 \u0679\u0648\u06af\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>CSS \u0631\u06cc\u067e\u0644 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be &quot;\u0627\u0628\u06be\u06cc \u062e\u0631\u06cc\u062f\u06cc\u06ba&#8221; \u0628\u0679\u0646<\/p>\n<\/li>\n<li>\n<p>\u0622\u0631\u0688\u06cc\u0646\u0644 \u0641\u0627\u0631\u0645\u06cc\u0679 \u0645\u06cc\u06ba \u0688\u0627\u0626\u0646\u0627\u0645\u06a9 \u0688\u06cc\u0644\u06cc\u0648\u0631\u06cc \u06a9\u06cc \u062a\u0627\u0631\u06cc\u062e<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-how-to-set-up-the-cli-registry\"><strong>CLI \u0631\u062c\u0633\u0679\u0631\u06cc \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/strong><\/h2>\n<p>\u0627\u0646\u0633\u0679\u0627\u0644\u06cc\u0634\u0646 \u06a9\u0645\u0627\u0646\u0688 \u0686\u0644\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 Shadcn \u0627\u0633\u067e\u06cc\u0633 \u0631\u062c\u0633\u0679\u0631\u06cc\u06d4 <code>components.json<\/code> \u0641\u0627\u0626\u0644<\/p>\n<p>\u06a9\u06be\u0644\u0627 <code>components.json<\/code> \u0627\u0633\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06cc \u062c\u0691 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 <code>registries<\/code> \u0645\u06cc\u062f\u0627\u0646:<\/p>\n<pre><code class=\"language-javascript\">{\n  \"registries\": {\n    \"@shadcn-space\": {\n      \"url\": \"https:\/\/shadcnspace.com\/r\/{name}.json\"\n    }\n  }\n}\n<\/code><\/pre>\n<p>\u06cc\u06c1 shadcn CLI \u06a9\u0648 \u0628\u062a\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u067e\u0631\u06cc\u0641\u06a9\u0633\u0688 \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u06a9\u06c1\u0627\u06ba \u062a\u0644\u0627\u0634 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4 <code>@shadcn-space\/<\/code>. \u0627\u0633 \u0642\u062f\u0645 \u06a9\u06d2 \u0628\u063a\u06cc\u0631\u060c \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u062a\u0645\u0627\u0645 \u0627\u0646\u0633\u0679\u0627\u0644\u06cc\u0634\u0646 \u06a9\u0645\u0627\u0646\u0688\u0632 \u0646\u0627\u06a9\u0627\u0645 \u06c1\u0648 \u062c\u0627\u0626\u06cc\u06ba \u06af\u06cc\u06d4<\/p>\n<p>\u0622\u067e \u06a9\u0627 \u067e\u0648\u0631\u0627 <code>components.json<\/code> \u0631\u062c\u0633\u0679\u0631\u06cc \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0627\u0633\u06d2 \u0627\u0633 \u0637\u0631\u062d \u0646\u0638\u0631 \u0622\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2:<\/p>\n<pre><code class=\"language-javascript\">{\n  \"$schema\": \"https:\/\/ui.shadcn.com\/schema.json\",\n  \"style\": \"default\",\n  \"rsc\": true,\n  \"tsx\": true,\n  \"tailwind\": {\n    \"config\": \"tailwind.config.ts\",\n    \"css\": \"app\/globals.css\",\n    \"baseColor\": \"neutral\",\n    \"cssVariables\": true\n  },\n  \"aliases\": {\n    \"components\": \"@\/components\",\n    \"utils\": \"@\/lib\/utils\"\n  },\n  \"registries\": {\n    \"@shadcn-space\": {\n      \"url\": \"https:\/\/shadcnspace.com\/r\/{name}.json\"\n    }\n  }\n}\n<\/code><\/pre>\n<p>\u062a\u06cc\u0633\u0631\u06cc \u067e\u0627\u0631\u0679\u06cc \u06a9\u06cc \u0631\u062c\u0633\u0679\u0631\u06cc\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be CLI \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u0627\u0633 \u06a9\u06cc \u0645\u06a9\u0645\u0644 \u0648\u0627\u06a9 \u062a\u06be\u0631\u0648 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0645\u0644\u0627\u062d\u0638\u06c1 \u06a9\u0631\u06cc\u06ba: <strong>\u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u0627 \u06af\u0627\u0626\u06cc\u0688<\/strong>. \u0627\u06af\u0631 \u0622\u067e \u0628\u0635\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0622\u067e \u0648\u06cc\u0688\u06cc\u0648 \u0648\u0627\u06a9 \u062a\u06be\u0631\u0648 \u0628\u06be\u06cc \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><div class=\"ast-oembed-container \" style=\"height: 100%;\"><iframe loading=\"lazy\" title=\"How to Use Shadcn Space with CLI\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/n6dvjVxy02U?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<h2 id=\"heading-how-to-build-the-preview-card-card-02\"><strong>\u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0627\u0631\u0688 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 (\u06a9\u0627\u0631\u0688-02)<\/strong><\/h2>\n<h3 id=\"heading-what-the-preview-card-does\">\u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0627\u0631\u0688 \u06a9\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a<\/h3>\n<p>\u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0627\u0631\u0688\u0632 \u0631\u0626\u06cc\u0644 \u0627\u0633\u0679\u06cc\u0679 \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a\u0648\u06ba\u060c \u06c1\u0648\u0679\u0644 \u06a9\u06d2 \u0635\u0641\u062d\u0627\u062a\u060c \u06cc\u0627 \u0630\u06cc\u0644 \u0645\u06cc\u06ba \u0645\u0639\u0627\u0648\u0646 \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0691\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0633\u06d2 \u0641\u0627\u0626\u062f\u06c1 \u0627\u0679\u06be\u0627\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0645\u0648\u0627\u062f \u06a9\u06d2 \u0644\u06cc\u06d2 \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u062c\u0628 \u0635\u0627\u0631\u0641 \u06a9\u0627\u0631\u0688 \u067e\u0631 \u0645\u0646\u0688\u0644\u0627\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u062a\u0635\u0648\u06cc\u0631 \u0633\u06cc\u0627\u06c1 \u0627\u0648\u0631 \u0628\u0691\u06cc \u06c1\u0648 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u06a9\u0648\u0646\u06d2 \u0645\u06cc\u06ba \u062a\u06cc\u0631 \u06a9\u0627 \u0646\u0634\u0627\u0646 \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u0627\u06d4 \u062a\u0635\u0648\u06cc\u0631 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u0622\u067e \u06a9\u0648 \u0639\u0646\u0648\u0627\u0646\u060c \u0645\u0642\u0627\u0645\u060c \u0642\u06cc\u0645\u062a \u06a9\u0627 \u0628\u06cc\u062c\u060c \u0627\u0648\u0631 \u0633\u06c1\u0648\u0644\u06cc\u0627\u062a \u06a9\u06cc \u0627\u06cc\u06a9 \u0642\u0637\u0627\u0631 \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u06cc\u06d4<\/p>\n<h3 id=\"heading-how-to-install-the-preview-card\">\u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0627\u0631\u0688 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1<\/h3>\n<p>\u0622\u067e \u06a9\u06d2 \u067e\u06cc\u06a9\u06cc\u062c \u0645\u06cc\u0646\u06cc\u062c\u0631 \u067e\u0631 \u0645\u0646\u062d\u0635\u0631 \u06c1\u06d2\u060c \u062f\u0631\u062c \u0630\u06cc\u0644 \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u06a9\u0645\u0627\u0646\u0688 \u0686\u0644\u0627\u0626\u06cc\u06ba:<\/p>\n<p><strong>npm:<\/strong><\/p>\n<pre><code class=\"language-javascript\">npx shadcn@latest add @shadcn-space\/card-02\n<\/code><\/pre>\n<p><strong>pnpm:<\/strong><\/p>\n<pre><code class=\"language-javascript\">pnpm dlx shadcn@latest add @shadcn-space\/card-02\n<\/code><\/pre>\n<p><strong>\u062a\u0627\u0628\u06a9\u0627\u0631\u06cc:<\/strong><\/p>\n<pre><code class=\"language-javascript\">yarn dlx shadcn@latest add @shadcn-space\/card-02\n<\/code><\/pre>\n<p><strong>\u0631\u0648\u0679\u06cc:<\/strong><\/p>\n<pre><code class=\"language-javascript\">bunx --bun shadcn@latest add @shadcn-space\/card-02\n<\/code><\/pre>\n<p>CLI \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u062c\u06af\u06c1 \u067e\u0631 \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u0622\u067e \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u06a9\u0627\u067e\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-javascript\">components\/\n  shadcn-space\/\n    card\/\n      Card-02.tsx\n<\/code><\/pre>\n<h3 id=\"heading-the-component-code\">\u0627\u062c\u0632\u0627\u0621 \u06a9\u0648\u0688<\/h3>\n<pre><code class=\"language-javascript\">import { Badge } from \"@\/components\/ui\/badge\";\nimport { Card } from \"@\/components\/ui\/card\";\nimport { ArrowRight, Bath, BedDouble, Expand } from \"lucide-react\";\n\nconst PreviewCard = () => (\n  <card classname=\"relative gap-0 py-0 rounded-2xl group hover:shadow-3xl duration-300\">\n    <div classname=\"overflow-hidden rounded-t-2xl\">\n      \n        <div classname=\"w-full h-72\">\n          \n        <\/div>\n      \n\n      \n    <\/div>\n\n    \n  <\/card>\n);\n\nexport default PreviewCard;\n<\/code><\/pre>\n<p>\u0627\u0628 \u062f\u06cc\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u06cc\u06c1 \u06a9\u0648\u0688 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h4 id=\"heading-1-group-hover-behavior\">1. \u06af\u0631\u0648\u067e \u06c1\u0648\u0631 \u0633\u0644\u0648\u06a9<\/h4>\n<p>\u06a9\u06c1 <code>group<\/code> \u0628\u0627\u06c1\u0631 \u06a9\u0644\u0627\u0633 <code>Card<\/code> \u0639\u0646\u0627\u0635\u0631 \u0627\u0633 \u062c\u0632\u0648 \u06a9\u0627 \u062f\u0644 \u06c1\u06cc\u06ba\u06d4 \u062a\u0645\u0627\u0645 \u0628\u0686\u06d2 \u0639\u0646\u0627\u0635\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be <code>group-hover:<\/code> \u062c\u0628 \u0622\u067e \u06a9\u0627\u0631\u0688\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u0627\u062a\u06be \u0627\u0646\u0641\u0631\u0627\u062f\u06cc \u0639\u0646\u0627\u0635\u0631 \u06a9\u06cc \u0637\u0631\u0641 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u06a9\u0644\u0627\u0633 \u062c\u0648\u0627\u0628 \u062f\u06cc\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0637\u0631\u062d \u062a\u0635\u0648\u06cc\u0631 \u06af\u06c1\u0631\u06cc \u06c1\u0648\u062a\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2 (<code>group-hover:brightness-50<\/code>)\u060c \u062a\u0648\u0633\u06cc\u0639 (<code>group-hover:scale-125<\/code>)\u060c \u0627\u06cc\u06a9 \u062a\u06cc\u0631 \u06a9\u0627 \u0622\u0626\u06cc\u06a9\u0646 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 (<code>group-hover:block<\/code>)\u06d4<\/p>\n<h4 id=\"heading-2-overflow-clipping-on-image-zoom\">2. \u062a\u0635\u0627\u0648\u06cc\u0631 \u06a9\u0648 \u0632\u0648\u0645 \u0627\u0646\/\u0622\u0624\u0679 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0627\u0648\u0648\u0631 \u0641\u0644\u0648 \u06a9\u0644\u067e\u0646\u06af<\/h4>\n<p>\u0628\u063a\u06cc\u0631 <code>overflow-hidden<\/code> \u062a\u0635\u0648\u06cc\u0631 \u06a9\u06d2 \u0631\u06cc\u067e\u0631 \u0645\u06cc\u06ba <code>scale-125<\/code> \u0645\u0646\u0688\u0644\u0627\u062a\u06d2 \u0648\u0642\u062a \u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u06af\u0648\u0644 \u06a9\u0648\u0646\u0648\u06ba \u0633\u06d2 \u062e\u0631\u0627\u0628\u06cc \u062e\u0648\u0646 \u0628\u06c1\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u0631\u06cc\u067e\u0631 \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0648 \u062a\u0631\u0627\u0634\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u06a9\u0627\u0631\u0688 \u06a9\u06cc \u062d\u062f\u0648\u062f \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u062a\u0648\u062c\u06c1 \u0641\u0631\u0645\u0627\u0626\u06cc\u06ba <code>rounded-t-2xl<\/code> \u06cc\u06c1 \u0631\u06cc\u067e\u0631 \u0627\u0648\u0631 \u062a\u0635\u0648\u06cc\u0631 \u062f\u0648\u0646\u0648\u06ba \u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u0679\u0631\u0627\u0646\u0632\u06cc\u0634\u0646 \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0645\u0633\u0644\u0633\u0644 \u06a9\u0648\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0631\u06cc\u0688\u06cc \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u0627 \u062c\u0627 \u0633\u06a9\u06d2\u06d4<\/p>\n<h4 id=\"heading-3-logical-border-properties-in-the-amenity-row\">3. \u0633\u06c1\u0648\u0644\u062a \u0648\u0627\u0644\u06cc \u0642\u0637\u0627\u0631\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0646\u0637\u0642\u06cc \u0633\u0631\u062d\u062f\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a<\/h4>\n<p>\u0633\u06c1\u0648\u0644\u06cc\u0627\u062a \u06a9\u06cc \u0642\u0637\u0627\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2: <code>border-e<\/code> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 <code>border-r<\/code>. \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u06a9\u06cc \u0645\u0646\u0637\u0642\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u0627 \u06cc\u06c1\u06cc \u0645\u0637\u0644\u0628 \u06c1\u06d2\u06d4 &quot;\u0627\u0646 \u0644\u0627\u0626\u0646 \u06a9\u06d2 \u0622\u062e\u0631 \u0645\u06cc\u06ba \u0628\u0627\u0631\u0688\u0631\u06d4&#8221; \u0628\u0627\u0626\u06cc\u06ba \u0633\u06d2 \u062f\u0627\u0626\u06cc\u06ba \u0644\u06d2 \u0622\u0624\u0679 \u0645\u06cc\u06ba\u060c \u06cc\u06c1 \u062f\u0627\u0626\u06cc\u06ba \u0637\u0631\u0641 \u06c1\u0648\u06af\u0627\u06d4 \u062f\u0627\u0626\u06cc\u06ba \u0633\u06d2 \u0628\u0627\u0626\u06cc\u06ba \u0644\u06d2 \u0622\u0624\u0679 \u0645\u06cc\u06ba\u060c \u06cc\u06c1 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u067e\u0644\u0679 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u0646\u0637\u0642\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u062c\u0632\u0648 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0686\u06be\u06cc \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u067e\u0631\u06cc\u06a9\u0679\u0633 \u06c1\u06d2 \u062c\u0633 \u06a9\u0648 \u0645\u062a\u0639\u062f\u062f \u0644\u0648\u06a9\u06cc\u0644\u0632 \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \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><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u067e\u0631\u0648\u0688\u06a9\u0634\u0646-\u06a9\u06d2-\u0644\u06cc\u06d2-\u062a\u06cc\u0627\u0631-\u06a9\u0627\u0631\u0688.gif\" alt=\"21233f5e-2d39-4430-8013-a780bd24419c\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"720\" loading=\"lazy\" title=\"\"><\/p>\n<hr\/>\n<h2 id=\"heading-how-to-build-the-analytics-card-card-05\"><strong>\u062a\u062c\u0632\u06cc\u06c1 \u06a9\u0627\u0631\u0688 \u06a9\u06cc\u0633\u06d2 \u0644\u06a9\u06be\u06cc\u06ba (\u06a9\u0627\u0631\u0688-05)<\/strong><\/h2>\n<h3 id=\"heading-what-the-analytics-card-does\">\u062a\u062c\u0632\u06cc\u06c1 \u06a9\u0627\u0631\u0688 \u06a9\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a<\/h3>\n<p>\u062a\u062c\u0632\u06cc\u06c1 \u06a9\u0627\u0631\u0688 \u0686\u06be\u0648\u0679\u06d2 \u0688\u06cc\u0634 \u0628\u0648\u0631\u0688 \u0648\u06cc\u062c\u0679 \u06c1\u06cc\u06ba\u06d4 \u0642\u062f\u0631 \u0627\u0648\u0631 \u0641\u06cc\u0635\u062f \u06a9\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u06d2 \u0628\u06cc\u062c\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062f\u0648 \u0645\u06cc\u0679\u0631\u06a9\u0633 \u0633\u0627\u062a\u06be \u0633\u0627\u062a\u06be \u062f\u06a9\u06be\u0627\u0626\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0622\u0631\u0627\u0626\u0634\u06cc \u0686\u0627\u0631\u0679 \u06a9\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0646\u06cc\u0686\u06d2 \u062f\u0627\u0626\u06cc\u06ba \u062c\u0627\u0646\u0628 \u0648\u0627\u0642\u0639 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u062c\u0632\u0627\u0621 \u0679\u0627\u0626\u067e \u0627\u0633\u06a9\u0631\u067e\u0679 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0646 \u067e\u0679 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062c\u0633 \u0633\u06d2 API \u0633\u06d2 \u0627\u0635\u0644 \u0688\u06cc\u0679\u0627 \u06a9\u0627 \u062a\u0628\u0627\u062f\u0644\u06c1 \u06a9\u0631\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u0648\u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-how-to-install-the-analytics-card\">\u062a\u062c\u0632\u06cc\u0627\u062a\u06cc \u06a9\u0627\u0631\u0688 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1<\/h3>\n<pre><code class=\"language-javascript\">npx shadcn@latest add @shadcn-space\/card-05\n<\/code><\/pre>\n<p>CLI \u062c\u0632\u0648 \u06a9\u0648 \u0646\u0642\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-javascript\">components\/\n  shadcn-space\/\n    card\/\n      card-05.tsx\n<\/code><\/pre>\n<h3 id=\"heading-the-component-code\">\u0627\u062c\u0632\u0627\u0621 \u06a9\u0648\u0688<\/h3>\n<pre><code class=\"language-javascript\">\ub2e4\uc74c\uc5d0\uc11c { \ubc30\uc9c0 } \uac00\uc838\uc624\uae30 \"@\/\uad6c\uc131\uc694\uc18c\/ui\/\ubc30\uc9c0\"; \ub2e4\uc74c\uc5d0\uc11c { \uce74\ub4dc, \uce74\ub4dc \ucf58\ud150\uce20 } \uac00\uc838\uc624\uae30 \"@\/\ucef4\ud3ec\ub10c\ud2b8\/ui\/\uce74\ub4dc\"; \uc5d0\uc11c { \uad6c\ubd84 \uae30\ud638 } \uac00\uc838\uc624\uae30 \"@\/\uad6c\uc131 \uc694\uc18c\/ui\/\uad6c\ubd84 \uae30\ud638\"; \ub2e4\uc74c\uc5d0\uc11c {CN } \uac00\uc838\uc624\uae30 \"@\/lib\/\uc720\ud2f8\"; DashboardMetric \uc720\ud615 = { \ub77c\ubca8: \ubb38\uc790\uc5f4; \uac12: \ubb38\uc790\uc5f4; \ubc31\ubd84\uc728: \ubb38\uc790\uc5f4; isPositive?: \ubd80\uc6b8; }; MainDashboardData = { \uc81c\ubaa9: \ubb38\uc790\uc5f4; \uc124\uba85: \ubb38\uc790\uc5f4; \uce21\uc815\ud56d\ubaa9: DashboardMetric[]; }; type WidgetProps = { mainDashboard?: MainDashboardData; }; const mainDashboardData: MainDashboardData = { \uc81c\ubaa9: \"\ubd84\uc11d \ub300\uc2dc\ubcf4\ub4dc\"\uc124\uba85: \"\ubaa8\ub4e0 \ud1b5\uacc4\ub97c \ud655\uc778\ud558\uc138\uc694\"\uce21\uc815\ud56d\ubaa9: [\n    {\n      label: \"Earnings\",\n      value: \"$27,850\",\n      percentage: \"+18%\",\n      isPositive: true,\n    },\n    {\n      label: \"Expense\",\n      value: \"$18,453\",\n      percentage: \"-5%\",\n      isPositive: false,\n    },\n  ]}; const AnalyticsCard = ({ mainDashboard = mainDashboardData }: WidgetProps) => { return (\n    <div classname=\"flex items-center justify-center w-full\">\n      <div classname=\"max-w-7xl mx-auto px-4 lg:px-8 xl:px-16 py-10 w-full\">\n        <card classname=\"p-0 ring-0 border rounded-2xl relative h-full max-w-xl w-full mx-auto\">\n          <cardcontent classname=\"p-0\">\n            <div classname=\"ps-6 py-4 flex flex-col gap-9 justify-between\">\n              <div>\n                <p classname=\"text-lg font-medium text-card-foreground\">\n                  \n                  {mainDashboard.title}\n                <\/p>\n                <p classname=\"text-xs font-normal text-muted-foreground\">\n                  \n                  {mainDashboard.description}\n                <\/p>\n              <\/div>\n              <div classname=\"flex items-center gap-6\">\n                \n                {mainDashboard.metrics.map((metric, index) => (\n                  <div key=\"{index}\" classname=\"flex items-center gap-6\">\n                    <div>\n                      <p classname=\"text-xs font-normal text-muted-foreground\">\n                        \n                        {metric.label}\n                      <\/p>\n                      <div classname=\"flex items-center gap-1\">\n                        <p classname=\"text-2xl font-medium text-card-foreground\">\n                          \n                          {\uba54\ud2b8\ub9ad.\uac12}\n                        <\/p>\n                        <badge classname=\"{cn(\" text-muted-foreground=\"\" metric.ispositive=\"\" :=\"\">\n                          \n                          {metric.percentage}\n                        <\/badge>\n                      <\/div>\n                    <\/div>\n                    \n                    {\uc0c9\uc778 < mainDashboard.metrics.length - 1 &#038;&#038; (\n                      <separator orientation=\"vertical\" classname=\"h-12\"\/>\n                    )}\n                  <\/div>\n                ))}\n              <\/div>\n            <\/div>\n\n            <img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u067e\u0631\u0648\u0688\u06a9\u0634\u0646-\u06a9\u06d2-\u0644\u06cc\u06d2-\u062a\u06cc\u0627\u0631-\u06a9\u0627\u0631\u0688.webp\" alt=\"\u0634\u0645\u0627\u0631\u06cc\u0627\u062a \u0686\u0627\u0631\u0679\" width=\"{211}\" height=\"{168}\" classname=\"absolute bottom-0 right-0 hidden sm:block\" title=\"\">\n          <\/cardcontent>\n        <\/card>\n      <\/div>\n    <\/div>\n  );\n};\n\nexport default AnalyticsCard;\n<\/code><\/pre>\n<p>\u062a\u062c\u0632\u06cc\u06c1 \u06a9\u0627\u0631\u0688 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<h4 id=\"heading-1-optional-props-with-a-default-dataset\">1. \u0688\u06cc\u0641\u0627\u0644\u0679 \u0688\u06cc\u0679\u0627\u0633\u06cc\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u067e\u0631\u067e\u0633<\/h4>\n<p>\u062c\u0632\u0648 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0648 \u0642\u0628\u0648\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>mainDashboard<\/code> \u0633\u06c1\u0627\u0631\u06d2 \u0627\u06af\u0631 \u06a9\u0686\u06be \u0628\u06be\u06cc \u0646\u06c1\u06cc\u06ba \u06af\u0632\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u06cc\u06c1 \u0648\u0627\u067e\u0633 \u0622\u062a\u0627 \u06c1\u06d2: <code>mainDashboardData<\/code>\u0627\u06cc\u06a9 \u06c1\u06cc \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0645\u0633\u062a\u0642\u0644 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u06cc \u06af\u0626\u06cc \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">const AnalyticsCard = ({ mainDashboard = mainDashboardData }: WidgetProps) => {\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u067e\u06cc\u0679\u0631\u0646 \u0622\u067e \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u0688\u06cc\u0645\u0648 \u06cc\u0627 \u0627\u0633\u0679\u0648\u0631\u06cc \u0628\u06a9 \u0645\u06cc\u06ba \u0628\u0627\u06a9\u0633 \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0628\u06a9\u06c1 \u067e\u06cc\u062f\u0627\u0648\u0627\u0631 \u0645\u06cc\u06ba \u062d\u0642\u06cc\u0642\u06cc API \u0688\u06cc\u0679\u0627 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06c1 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0686\u0644\u0627\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0688\u06cc\u0679\u0627 \u0633\u06d2 \u0645\u0646\u0633\u0644\u06a9 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0628\u0633 \u062f\u0631\u062c \u0630\u06cc\u0644 \u0633\u06d2 \u0645\u0645\u0627\u062b\u0644 \u0627\u06cc\u06a9 \u067e\u0631\u0648\u067e \u067e\u0627\u0633 \u06a9\u0631\u06cc\u06ba: <code>MainDashboardData<\/code> \u0634\u06a9\u0644<\/p>\n<h4 id=\"heading-2-conditional-badge-colors-with-cn\">2. \u0645\u0634\u0631\u0648\u0637 \u0628\u06cc\u062c \u06a9\u0627 \u0631\u0646\u06af <code>cn()<\/code><\/h4>\n<p>\u06a9\u06c1 <code>cn()<\/code> \u0627\u0641\u0627\u062f\u06cc\u062a (\u0645\u06cc\u06ba <code>@\/lib\/utils<\/code>) Tailwind \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645\u0648\u06ba \u06a9\u0648 \u0636\u0645 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0645\u0634\u0631\u0648\u0637 \u0645\u0646\u0637\u0642 \u06a9\u0648 \u0635\u0627\u0641 \u0637\u0648\u0631 \u067e\u0631 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0645\u062a\u0636\u0627\u062f \u0679\u06cc\u0644 \u0648\u0646\u0688 \u06a9\u0644\u0627\u0633\u0632 \u06a9\u06d2 \u0688\u067e\u0644\u06cc\u06a9\u06cc\u0679\u0633 \u06a9\u0648 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0628\u06be\u06cc \u06c1\u0679\u0627 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0648 \u06a9\u0686\u06be \u0628\u0627\u0642\u0627\u0639\u062f\u06c1 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u0644\u0679\u0631\u06cc\u0644\u0632 \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">className={cn(\n  \"font-normal text-muted-foreground\",\n  metric.isPositive ? \"bg-teal-400\/10\" : \"bg-red-500\/10\"\n)}\n<\/code><\/pre>\n<h4 id=\"heading-3-separators-only-between-metrics-not-after-the-last-one\">3. \u0635\u0631\u0641 \u0645\u06cc\u0679\u0631\u06a9\u0633 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u0627\u0644\u06af \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0622\u062e\u0631\u06cc \u0645\u06cc\u0679\u0631\u06a9 \u06a9\u06d2 \u0628\u0639\u062f \u06a9\u0648\u0626\u06cc \u0627\u0644\u06af \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4<\/h4>\n<p>\u06a9\u06c1 <code>Separator<\/code> \u0627\u062c\u0632\u0627\u0621 \u0635\u0631\u0641 \u0645\u06cc\u0679\u0631\u06a9\u0633 \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u067e\u06cc\u0634 \u06a9\u06cc\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0622\u062e\u0631\u06cc \u0645\u06cc\u0679\u0631\u06a9 \u06a9\u06d2 \u0628\u0639\u062f \u0646\u06c1\u06cc\u06ba\u06d4 \u0627\u0646\u0688\u06cc\u06a9\u0633 \u06a9\u06cc \u062c\u0627\u0646\u0686 \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u062a\u06cc \u06c1\u06d2:<\/p>\n<pre><code class=\"language-javascript\">{index < mainDashboard.metrics.length - 1 &#038;&#038; (\n  <separator orientation=\"vertical\" classname=\"h-12\"\/>\n)}\n<\/code><\/pre>\n<h4 id=\"heading-4-absolute-positioned-decorative-image\">4. \u0628\u0627\u0644\u06a9\u0644 \u067e\u0648\u0632\u06cc\u0634\u0646 \u0645\u06cc\u06ba \u0622\u0631\u0627\u0626\u0634\u06cc \u062a\u0635\u0648\u06cc\u0631<\/h4>\n<p>\u0686\u0627\u0631\u0679 \u06a9\u06cc \u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 <code>absolute bottom-0 right-0<\/code> \u0627\u0633\u06d2 \u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u062f\u0627\u0626\u06cc\u06ba \u06a9\u0648\u0646\u06d2 \u0645\u06cc\u06ba \u067e\u0646 \u06a9\u0631\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0686\u06be\u0648\u0679\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646\u0648\u06ba \u067e\u0631 \u0686\u06be\u067e\u0627 \u06c1\u0648\u0627 \u06c1\u06d2\u06d4 <code>hidden sm:block<\/code> \u0645\u0648\u0628\u0627\u0626\u0644 \u067e\u0631 \u062a\u0631\u062a\u06cc\u0628 \u06a9\u06d2 \u0645\u0633\u0627\u0626\u0644 \u0633\u06d2 \u0628\u0686\u06cc\u06ba. \u0648\u0627\u0644\u062f\u06cc\u0646 <code>Card<\/code> \u06c1\u06d2 <code>relative<\/code> \u0627\u0633\u06d2 \u067e\u0648\u0632\u06cc\u0634\u0646 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0627\u0633 \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u0648 \u0633\u06a9\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><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u067e\u0631\u0648\u0688\u06a9\u0634\u0646-\u06a9\u06d2-\u0644\u06cc\u06d2-\u062a\u06cc\u0627\u0631-\u06a9\u0627\u0631\u0688.png\" alt=\"de09194f-ff75-49c1-95e5-21d758e499e8\" style=\"display:block;margin:0 auto\" width=\"1266\" height=\"356\" loading=\"lazy\" title=\"\"><\/p>\n<hr\/>\n<h2 id=\"heading-how-to-build-the-statistics-card-card-06\"><strong>\u0634\u0645\u0627\u0631\u06cc\u0627\u062a \u06a9\u0627\u0631\u0688 \u06a9\u06cc\u0633\u06d2 \u0644\u06a9\u06be\u06cc\u06ba (\u06a9\u0627\u0631\u0688-06)<\/strong><\/h2>\n<h3 id=\"heading-what-the-statistics-card-does\">\u0634\u0645\u0627\u0631\u06cc\u0627\u062a\u06cc \u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u0627\u0641\u0639\u0627\u0644<\/h3>\n<p>\u0627\u0639\u062f\u0627\u062f \u0648 \u0634\u0645\u0627\u0631 \u06a9\u0627 \u06a9\u0627\u0631\u0688 \u0686\u0627\u0631 \u0627\u06cc \u06a9\u0627\u0645\u0631\u0633 \u0645\u06cc\u0679\u0631\u06a9\u0633 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2: \u0627\u0641\u0642\u06cc \u06af\u0631\u0688 \u0645\u06cc\u06ba \u0622\u0631\u0688\u0631\u0632\u060c \u0633\u06cc\u0644\u0632\u060c \u0645\u0646\u0627\u0641\u0639 \u0627\u0648\u0631 \u0627\u062e\u0631\u0627\u062c\u0627\u062a\u06d4 \u06c1\u0631 \u06a9\u0627\u0644\u0645 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0622\u0626\u06cc\u06a9\u0646\u060c \u0627\u06cc\u06a9 \u0628\u0691\u06cc \u0642\u062f\u0631\u060c \u0627\u06cc\u06a9 \u067e\u06cc\u0631\u06cc\u0688 \u0644\u06cc\u0628\u0644\u060c \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0628\u06cc\u062c \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0641\u06cc\u0635\u062f\u06cc \u0631\u062c\u062d\u0627\u0646 \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0644\u06d2 \u0622\u0624\u0679 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u06c1\u06d2\u060c \u062f\u0631\u0645\u06cc\u0627\u0646\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646\u0648\u06ba \u067e\u0631 \u0686\u0627\u0631 \u0633\u06d2 \u062f\u0648 \u06a9\u0627\u0644\u0645\u0648\u06ba \u0633\u06d2 \u0679\u0648\u0679 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0645\u0648\u0628\u0627\u0626\u0644 \u067e\u0631 \u0627\u0633\u0679\u06cc\u06a9 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06cc\u06c1 \u06a9\u0627\u0631\u0688 <code>@iconify\/react<\/code> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0622\u0626\u06cc\u06a9\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2: <code>lucide-react<\/code>\u0633\u0679\u0631\u0646\u06af \u067e\u0631 \u0645\u0628\u0646\u06cc \u0622\u0626\u06cc\u06a9\u0646 \u06a9\u06d2 \u0646\u0627\u0645\u0648\u06ba \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06c1\u0632\u0627\u0631\u0648\u06ba \u0622\u0626\u06cc\u06a9\u0646 \u0633\u06cc\u0679 \u062a\u06a9 \u0631\u0633\u0627\u0626\u06cc \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-how-to-install-the-statistics-card\">\u0627\u0639\u062f\u0627\u062f\u0648\u0634\u0645\u0627\u0631 \u06a9\u0627\u0631\u0688 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1<\/h3>\n<p>\u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u067e\u06c1\u0644\u06d2 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 <code>@iconify\/react<\/code> \u0627\u06af\u0631 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u06cc\u06c1 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2:<\/p>\n<pre><code class=\"language-javascript\">npm install @iconify\/react\n<\/code><\/pre>\n<p>\u067e\u06be\u0631 \u06a9\u0627\u0631\u0688 \u06a9\u0627 \u062c\u0632\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">npx shadcn@latest add @shadcn-space\/card-06\n<\/code><\/pre>\n<p>CLI \u062c\u0632\u0648 \u06a9\u0648 \u0646\u0642\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-javascript\">components\/\n  shadcn-space\/\n    card\/\n      card-06.tsx\n<\/code><\/pre>\n<h3 id=\"heading-the-component-code\">\u0627\u062c\u0632\u0627\u0621 \u06a9\u0648\u0688<\/h3>\n<pre><code class=\"language-javascript\">\"use client\";\nimport { Icon } from \"@iconify\/react\";\nimport { Card, CardContent } from \"@\/components\/ui\/card\";\nimport { Badge } from \"@\/components\/ui\/badge\";\n\nconst StatisticsCard = () => {\n  const EcommerceActions = [\n    {\n      title: \"Orders\",\n      subtitle: \"5868\",\n      cardIcon: \"solar:bag-4-line-duotone\",\n      badgeColor: \"bg-teal-400\/10\",\n      statusValue: \"+18%\",\n      statusIcon: \"solar:course-up-line-duotone\",\n    },\n    {\n      title: \"Sales\",\n      subtitle: \"$96,850\",\n      cardIcon: \"solar:box-line-duotone\",\n      badgeColor: \"bg-orange-400\/10\",\n      statusValue: \"-5%\",\n      statusIcon: \"solar:course-down-line-duotone\",\n    },\n    {\n      title: \"Profit\",\n      subtitle: \"$82,906\",\n      cardIcon: \"solar:chart-square-line-duotone\",\n      badgeColor: \"bg-teal-400\/10\",\n      statusValue: \"+18%\",\n      statusIcon: \"solar:course-up-line-duotone\",\n    },\n    {\n      title: \"Expense\",\n      subtitle: \"$14,653\",\n      cardIcon: \"solar:star-line-duotone\",\n      badgeColor: \"bg-teal-400\/10\",\n      statusValue: \"+18%\",\n      statusIcon: \"solar:course-up-line-duotone\",\n    },\n  ];\n\n  return (\n    <div classname=\"max-w-7xl mx-auto px-4 w-full\">\n      <card classname=\"p-0\">\n        <cardcontent classname=\"flex items-center w-full lg:flex-nowrap flex-wrap px-0\">\n          {EcommerceActions.map((item, index) => (\n            <div classname=\"lg:w-3\/12 md:w-6\/12 w-full border-e border-border last:border-e-0\" key=\"{index}\">\n              <div classname=\"p-6\">\n                <div classname=\"flex flex-col gap-1\">\n                  \n                  <div classname=\"flex flex-col gap-1\">\n                    <h5 classname=\"text-2xl font-semibold\">{item.subtitle}<\/h5>\n                    <div classname=\"flex items-center gap-2\">\n                      <p classname=\"text-xs text-muted-foreground\">Last 7 days<\/p>\n                      <badge classname=\"{`${item.badgeColor}\" text-muted-foreground=\"\">\n                        <p>\n                          {item.statusValue}\n                          <icon icon=\"{item.statusIcon}\" width=\"{14}\" height=\"{14}\"\/>\n                        <\/p>\n                      <\/badge>\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          ))}\n        <\/cardcontent>\n      <\/card>\n    <\/div>\n  );\n};\n\nexport default StatisticsCard;\n<\/code><\/pre>\n<p>\u0627\u0633\u0679\u06cc\u0679 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<h4 id=\"heading-1-data-driven-layout-with-an-array\">1. \u0635\u0641\u0648\u06ba \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0688\u06cc\u0679\u0627 \u067e\u0631 \u0645\u0628\u0646\u06cc \u062a\u0631\u062a\u06cc\u0628<\/h4>\n<p>\u0686\u0627\u0631\u0648\u06ba \u0627\u0634\u0627\u0631\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>EcommerceActions<\/code> \u0635\u0641 \u0645\u06cc\u0679\u0631\u06a9\u0633 \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06cc\u0627 \u06c1\u0679\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u0635\u0641 \u06a9\u06cc \u062a\u0627\u0632\u06c1 \u06a9\u0627\u0631\u06cc \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 JSX \u0648\u06c1\u06cc \u0631\u06c1\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u062c\u0632\u0648 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0648\u0632\u0648\u06ba \u0646\u0642\u0637\u06c1 \u0646\u0638\u0631 \u06c1\u06d2 \u062c\u0633 \u06a9\u06cc \u0633\u0627\u062e\u062a \u062f\u06c1\u0631\u0627\u0626\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4 \u06cc\u0639\u0646\u06cc \u06cc\u06c1 \u0688\u06cc\u0679\u0627 \u0627\u0648\u0631 \u0645\u0627\u0631\u06a9 \u0627\u067e \u06a9\u0648 \u0627\u0644\u06af \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h4 id=\"heading-2-responsive-column-widths\">2. \u0642\u0628\u0648\u0644 \u06a9\u0627\u0644\u0645 \u06a9\u06cc \u0686\u0648\u0691\u0627\u0626\u06cc<\/h4>\n<p>\u06c1\u0631 \u06a9\u0627\u0644\u0645 \u062a\u0645\u0627\u0645 \u0628\u0631\u06cc\u06a9 \u067e\u0648\u0627\u0626\u0646\u0679\u0633 \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0646 \u0686\u0648\u0691\u0627\u0626\u06cc \u06a9\u0644\u0627\u0633\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<ul>\n<li>\n<p><code>w-full<\/code>    \u0645\u0648\u0628\u0627\u0626\u0644 (\u0648\u0627\u062d\u062f \u0642\u0637\u0627\u0631\u060c \u0639\u0645\u0648\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0633\u062c\u0627 \u06c1\u0648\u0627)<\/p>\n<\/li>\n<li>\n<p><code>md:w-6\/12<\/code>    \u062f\u0631\u0645\u06cc\u0627\u0646\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646 (2 \u0642\u0637\u0627\u0631\u06cc\u06ba)<\/p>\n<\/li>\n<li>\n<p><code>lg:w-3\/12<\/code>    \u0628\u0691\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646 (4 \u0628\u0631\u0627\u0628\u0631 \u0642\u0637\u0627\u0631\u06cc\u06ba)<\/p>\n<\/li>\n<\/ul>\n<p>\u06a9\u06c1 <code>flex-wrap<\/code> \u06a9\u0648 <code>CardContent<\/code> \u06a9\u0627\u0644\u0645 \u0686\u06be\u0648\u0679\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646\u0648\u06ba \u067e\u0631 \u0642\u062f\u0631\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0644\u067e\u06cc\u0679 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>lg:flex-nowrap<\/code> \u0628\u0691\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646\u0648\u06ba \u067e\u0631 \u0627\u0633\u06d2 \u0627\u06cc\u06a9 \u0644\u0627\u0626\u0646 \u0645\u06cc\u06ba \u0638\u0627\u06c1\u0631 \u06c1\u0648\u0646\u06d2 \u067e\u0631 \u0645\u062c\u0628\u0648\u0631 \u06a9\u06cc\u0627 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<h4 id=\"heading-3-removing-the-last-border-with-last\">3. \u0622\u062e\u0631\u06cc \u0628\u0627\u0631\u0688\u0631 \u06c1\u0679\u0627 \u062f\u06cc\u06ba\u06d4 <code>last:<\/code><\/h4>\n<p>\u06a9\u06c1 <code>last:border-e-0<\/code> \u06a9\u0644\u0627\u0633 \u0622\u062e\u0631\u06cc \u06a9\u0627\u0644\u0645 \u0633\u06d2 \u062f\u0627\u0626\u06cc\u06ba \u0628\u0627\u0631\u0688\u0631 \u06a9\u0648 \u06c1\u0679\u0627 \u062f\u06cc\u062a\u06cc \u06c1\u06d2\u06d4 \u0628\u0635\u0648\u0631\u062a \u062f\u06cc\u06af\u0631\u060c \u0622\u067e \u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u062f\u0627\u0626\u06cc\u06ba \u06a9\u0646\u0627\u0631\u06d2 \u06a9\u06d2 \u0627\u0631\u062f \u06af\u0631\u062f \u0627\u06cc\u06a9 \u063a\u0644\u0637 \u0628\u0627\u0631\u0688\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062e\u062a\u0645 \u06c1\u0648 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06a9\u06c1 <code>last:<\/code> \u062a\u0628\u062f\u06cc\u0644\u06cc \u0627\u06cc\u06a9 \u0679\u06cc\u0644 \u0648\u0646\u0688 \u0633\u06cc\u0648\u0688\u0648 \u06a9\u0644\u0627\u0633 \u06c1\u06d2 \u062c\u0648 \u06af\u0631\u0648\u067e \u06a9\u06d2 \u0622\u062e\u0631\u06cc \u0686\u0627\u0626\u0644\u0688 \u0639\u0646\u0635\u0631 \u06a9\u0648 \u0646\u0634\u0627\u0646\u06c1 \u0628\u0646\u0627\u062a\u06cc \u06c1\u06d2\u060c \u062c\u0648 \u0627\u0646\u0688\u06cc\u06a9\u0633 \u06a9\u0648 \u062f\u0633\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0679\u0631\u06cc\u06a9 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0635\u0627\u0641 \u06c1\u06d2\u06d4<\/p>\n<h4 id=\"heading-4-why-use-client-is-needed-here\">4. \u06a9\u06cc\u0648\u06ba <code>\"use client\"<\/code> \u06cc\u06c1\u0627\u06ba \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2<\/h4>\n<p>\u06a9\u06c1 <code>@iconify\/react<\/code> \u067e\u06cc\u06a9\u06cc\u062c \u06a9\u0648 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06d2 \u0645\u0627\u062d\u0648\u0644 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u062c\u0632\u0648 \u062c\u0648 App Router \u06a9\u06d2 \u0633\u0627\u062a\u06be Next.js \u0645\u06cc\u06ba \u0635\u0631\u0641 \u06a9\u0644\u0627\u0626\u0646\u0679 \u067e\u06cc\u06a9\u062c \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>\"use client\"<\/code> \u0641\u0627\u0626\u0644 \u06a9\u06d2 \u0627\u0648\u067e\u0631\u06cc \u062d\u0635\u06d2 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u062f\u0627\u06cc\u062a \u06c1\u06d2\u06d4 \u062f\u0648\u0633\u0631\u06cc \u0635\u0648\u0631\u062a \u0645\u06cc\u06ba\u060c \u0633\u0631\u0648\u0631 \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0627\u06cc\u06a9 \u063a\u0644\u0637\u06cc \u067e\u06be\u06cc\u0646\u06a9 \u062f\u06d2 \u06af\u0627.<\/p>\n<h3 id=\"heading-live-preview\">\u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1:<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1783521202_649_shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u067e\u0631\u0648\u0688\u06a9\u0634\u0646-\u06a9\u06d2-\u0644\u06cc\u06d2-\u062a\u06cc\u0627\u0631-\u06a9\u0627\u0631\u0688.png\" alt=\"dd7600b4-753c-4e67-abff-2d8955a22653\" style=\"display:block;margin:0 auto\" width=\"1272\" height=\"257\" loading=\"lazy\" title=\"\"><\/p>\n<hr\/>\n<h2 id=\"heading-how-to-build-the-ecommerce-product-variant-card-card-17\"><strong>\u0627\u06cc \u06a9\u0627\u0645\u0631\u0633 \u067e\u0631\u0648\u0688\u06a9\u0679 \u0648\u06cc\u0631\u06cc \u0627\u06cc\u0634\u0646 \u06a9\u0627\u0631\u0688 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u0626\u06cc\u06ba (\u06a9\u0627\u0631\u0688-17)<\/strong><\/h2>\n<h3 id=\"heading-what-the-ecommerce-product-variant-card-does\">\u0627\u06cc \u06a9\u0627\u0645\u0631\u0633 \u067e\u0631\u0648\u0688\u06a9\u0679 \u0648\u06cc\u0631\u06cc\u0646\u0679 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a<\/h3>\n<p>\u06cc\u06c1 \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u0633\u0628 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0627\u0646\u0679\u0631\u0627\u06cc\u06a9\u0679\u0648 \u06a9\u0627\u0631\u0688 \u06c1\u06d2\u06d4 \u0645\u0627\u0624\u0633 \u0627\u0648\u0648\u0631 \u0632\u0648\u0645\u060c \u0648\u0634 \u0644\u0633\u0679 \u0679\u0648\u06af\u0644\u060c \u0633\u0627\u0626\u0632 \u0628\u0679\u0646\u060c \u0628\u06cc\u06af \u0679\u0648\u06af\u0644 \u0627\u0648\u0631 \u0631\u06cc\u067e\u0644 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062e\u0631\u06cc\u062f\u0627\u0631\u06cc \u06a9\u06d2 \u0628\u0679\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062c\u0648\u062a\u0648\u06ba \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u0627\u0631\u0688\u06d4 \u062a\u0645\u0627\u0645 \u062a\u0639\u0627\u0645\u0644\u0627\u062a React \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0633\u0646\u0628\u06be\u0627\u0644\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>useState<\/code>\u0644\u06c1\u0630\u0627 \u0622\u067e \u06a9\u0648 \u0628\u06cc\u0631\u0648\u0646\u06cc \u0631\u06cc\u0627\u0633\u062a \u06a9\u06d2 \u0627\u0646\u062a\u0638\u0627\u0645 \u06a9\u06cc \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-how-to-install-the-product-variant-card\">\u067e\u0631\u0648\u0688\u06a9\u0679 \u0648\u06cc\u0631\u06cc\u0646\u0679 \u06a9\u0627\u0631\u0688 \u06a9\u06cc\u0633\u06d2 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<pre><code class=\"language-javascript\">npx shadcn@latest add @shadcn-space\/card-17\n<\/code><\/pre>\n<p>CLI \u062c\u0632\u0648 \u06a9\u0648 \u0646\u0642\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<pre><code class=\"language-javascript\">components\/\n  shadcn-space\/\n    card\/\n      card-17.tsx\n<\/code><\/pre>\n<h3 id=\"heading-the-component-code\">\u0627\u062c\u0632\u0627\u0621 \u06a9\u0648\u0688<\/h3>\n<pre><code class=\"language-javascript\">\"use client\";\n\nimport { useState } from \"react\";\nimport { Card, CardContent, CardFooter } from \"@\/components\/ui\/card\";\nimport { Button } from \"@\/components\/ui\/button\";\nimport { Heart, ShoppingBag } from \"lucide-react\";\nimport { cn } from \"@\/lib\/utils\";\n\nconst sizes = [\"7\", \"8\", \"9\", \"10\"];\n\nconst getDeliveryDate = () => {\n  const date = new Date();\n  date.setDate(date.getDate() + 3);\n  const day = date.getDate();\n  const month = [\n    \"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\",\n    \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\",\n  ][date.getMonth()];\n  const suffix = [\"th\", \"st\", \"nd\", \"rd\"][\n    day % 10 > 3 ? 0 : (day % 100 - day % 10 !== 10 ? day % 10 : 0)\n  ];\n  return `${day}${suffix} ${month}`;\n};\n\nexport default function EcommerceProductCard() {\n  const [activeSize, setActiveSize] = useState(1);\n  const [isWishlisted, setIsWishlisted] = useState(false);\n  const [inBag, setInBag] = useState(false);\n\n  return (\n    <div classname=\"flex items-center justify-center p-8 w-full bg-background\">\n      <card classname=\"w-80 rounded-2xl overflow-hidden p-0 gap-0 group\/card\">\n\n        {\/* Image zone *\/}\n        <div classname=\"relative overflow-hidden h-80\">\n          <img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1783521202_993_shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u067e\u0631\u0648\u0688\u06a9\u0634\u0646-\u06a9\u06d2-\u0644\u06cc\u06d2-\u062a\u06cc\u0627\u0631-\u06a9\u0627\u0631\u0688.png\" classname=\"object-contain drop-shadow-2xl px-8 py-6 transition-transform duration-500 ease-out group-hover\/card:scale-105\" alt=\"\u0646\u0627\u0626\u06a9\u06cc \u0627\u06cc\u0626\u0631 \u0645\u06cc\u06a9\u0633 \u067e\u0644\u0633\" title=\"\">\n\n          {\/* Discount badge *\/}\n          <span classname=\"absolute top-3 left-3 text-xs tracking-widest font-bold uppercase bg-foreground text-background px-2.5 py-1 rounded-sm select-none\">\n            -21%\n          <\/span>\n\n          {\/* Wishlist button *\/}\n          <button onclick=\"{()\"> setIsWishlisted(!isWishlisted)}\n            title=\"\u062e\u0648\u0627\u06c1\u0634 \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a\"\n            className={cn(\n              \"absolute top-3 right-3 h-8 w-8 rounded-full border shadow-sm flex items-center justify-center transition-all duration-200 hover:scale-110 active:scale-95\",\n              isWishlisted\n                ? \"bg-rose-50 border-rose-200 dark:bg-rose-950 dark:border-rose-800\"\n                : \"bg-background\"\n            )}\n          >\n            <heart classname=\"{cn(\" h-3.5=\"\" transition-colors=\"\" iswishlisted=\"\" text-rose-500=\"\" :=\"\"\/>\n          <\/button>\n        <\/div>\n\n        {\/* Info zone *\/}\n        <cardcontent classname=\"px-4 pt-4 pb-4 space-y-1.5\">\n          <div classname=\"min-w-0\">\n            <h3 classname=\"text-base font-bold text-foreground truncate\">Nike<\/h3>\n            <p classname=\"text-sm text-muted-foreground truncate\">\n              Air Max Pulse Running Shoes\n            <\/p>\n          <\/div>\n\n          <p>\n            <span classname=\"text-green-600 dark:text-green-500 font-semibold text-sm\">\n              Down 21%\n            <\/span>\n            <span classname=\"text-muted-foreground line-through text-sm\">$150<\/span>\n            <span classname=\"text-foreground font-bold text-base\">$119<\/span>\n          <\/p>\n\n          <p>\n            Delivery by{\" \"}\n            <span suppresshydrationwarning=\"\" classname=\"text-foreground font-bold\">\n              {getDeliveryDate()}\n            <\/span>\n          <\/p>\n\n          {\/* Size selector *\/}\n          <p>\n            {sizes.map((s, i) => (\n              <button key=\"{s}\" onclick=\"{()\"> setActiveSize(i)}\n                className={cn(\n                  \"flex-1 h-7 rounded-lg text-sm font-medium border transition-all duration-150\",\n                  activeSize === i\n                    ? \"bg-foreground text-background border-foreground\"\n                    : \"text-muted-foreground hover:border-foreground\/50 hover:text-foreground\"\n                )}\n              >\n                US {s}\n              <\/button>\n            ))}\n          <\/p>\n        <\/cardcontent>\n\n        {\/* Action zone *\/}\n        <cardfooter classname=\"px-4 pb-6 gap-2 bg-transparent border-t-0\">\n          <button onclick=\"{()\"> setInBag(!inBag)}\n            title={inBag ? \"Remove from bag\" : \"Add to bag\"}\n            className={cn(\n              \"h-12 w-12 shrink-0 rounded-xl border flex items-center justify-center transition-all duration-200 hover:scale-105 active:scale-95\",\n              inBag\n                ? \"bg-foreground text-background border-foreground\"\n                : \"bg-background text-muted-foreground hover:border-foreground\/50 hover:text-foreground\"\n            )}\n          >\n            <shoppingbag classname=\"w-5 h-5\"\/>\n          <\/button>\n\n          <button classname=\"relative overflow-hidden group\/btn flex-1 h-12 rounded-xl font-semibold text-base cursor-pointer border border-primary transition-all flex items-center justify-center gap-2\">\n            <span classname=\"absolute left-1\/2 -translate-x-1\/2 top-full -translate-y-1\/2 w-8 h-8 bg-white dark:bg-gray-950 rounded-full scale-0 transition-transform duration-700 ease-in-out group-hover\/btn:scale-[20]\"\/>\n            <span classname=\"relative z-10 transition-colors duration-500 group-hover\/btn:text-gray-950 dark:group-hover\/btn:text-white\">\n              Buy Now\n            <\/span>\n          <\/button>\n        <\/cardfooter>\n\n      <\/card>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n<p>\u0627\u06cc \u06a9\u0627\u0645\u0631\u0633 \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u06d2 \u0645\u062e\u062a\u0644\u0641 \u06a9\u0627\u0631\u0688\u0632 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<h4 id=\"heading-1-named-group-hover-scopes\">1. \u0646\u0627\u0645\u0632\u062f \u06af\u0631\u0648\u067e \u06c1\u0648\u0631 \u0631\u06cc\u0646\u062c<\/h4>\n<p>\u06cc\u06c1 \u06a9\u0627\u0631\u0688 \u062f\u0648 \u0622\u0632\u0627\u062f \u06c1\u0648\u0648\u0631 \u06af\u0631\u0648\u067e \u0631\u06cc\u0646\u062c\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>group\/card<\/code> \u0628\u06cc\u0631\u0648\u0646\u06cc \u06a9\u0627\u0631\u0688 \u067e\u0631 <code>group\/btn<\/code> \u0627\u0628\u06be\u06cc \u062e\u0631\u06cc\u062f\u06cc\u06ba \u0628\u0679\u0646 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4 Tailwind \u06a9\u06d2 \u0646\u0627\u0645\u0632\u062f \u06af\u0631\u0648\u067e\u0648\u06ba \u06a9\u06cc \u062e\u0635\u0648\u0635\u06cc\u062a <code>\/name<\/code> \u0627\u0646 \u06a9\u0648 \u0627\u0644\u06af \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0644\u0627\u062d\u0642\u06d2:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Card-level hover: zooms the product image\n<card classname=\"... group\/card\">\n  <img classname=\"... group-hover\/card:scale-105\"\/>\n\n\/\/ Button-level hover: triggers the ripple animation\n  <button classname=\"... group\/btn\">\n    <span classname=\"... group-hover\/btn:scale-[20]\"\/>\n<\/button><\/card><\/code><\/pre>\n<p>\u0627\u06af\u0631 \u06a9\u0648\u0626\u06cc \u0646\u0627\u0645\u0632\u062f \u06af\u0631\u0648\u067e \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u062a\u0648\u060c \u0628\u0679\u0646 \u06a9\u0648 \u06c1\u0648\u0648\u0631 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u06a9\u0627\u0631\u0688 \u06a9\u0627 \u06c1\u0648\u0648\u0631 \u0627\u0633\u0679\u0627\u0626\u0644 \u0628\u06be\u06cc \u0645\u062a\u062d\u0631\u06a9 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4 \u06a9\u06c1 <code>\/card<\/code> \u0627\u0648\u0631 <code>\/btn<\/code> \u0644\u0627\u062d\u0642\u06c1 \u0627\u0633 \u0633\u06d2 \u0631\u0648\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h4 id=\"heading-2-css-ripple-animation-on-the-buy-now-button\">2. CSS Ripple Animation for Buy Now \u0628\u0679\u0646<\/h4>\n<p>\u0644\u06c1\u0631 \u06a9\u0627 \u0627\u062b\u0631 \u062e\u0627\u0644\u0635 \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u0627\u0633\u06a9\u06cc\u0644 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0633\u0641\u06cc\u062f \u062f\u0627\u0626\u0631\u06c1 (<code>w-8 h-8 rounded-full<\/code>) \u0622\u063a\u0627\u0632 \u06a9\u0627 \u0648\u0642\u062a <code>scale-0<\/code> \u0627\u0648\u0631 \u067e\u06be\u0631 \u06cc\u06c1 \u0627\u0633 \u067e\u0631 \u0633\u0648\u0626\u0686 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>scale-[20]<\/code> \u062c\u0628 \u0622\u067e \u06a9\u0633\u06cc \u0628\u0679\u0646 \u06a9\u06cc \u0637\u0631\u0641 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06a9\u06c1 <code>overflow-hidden<\/code> \u06a9\u0648 <code>Button<\/code> \u0628\u0679\u0646 \u06a9\u06d2 \u0628\u0627\u0631\u0688\u0631 \u067e\u0631 \u06a9\u0644\u067e\u0633\u06d4 \u06a9\u06c1 <code>z-10<\/code> \u0645\u062a\u0646 \u06a9\u0648 \u0644\u06cc\u0628\u0644 \u06a9\u06d2 \u067e\u06be\u06cc\u0644\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062f\u0627\u0626\u0631\u06d2 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0645\u0631\u0626\u06cc \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h4 id=\"heading-3-ordinal-suffix-logic-for-the-delivery-date\">3. \u062a\u0631\u0633\u06cc\u0644 \u06a9\u06cc \u062a\u0627\u0631\u06cc\u062e \u06a9\u06d2 \u0644\u06cc\u06d2 \u0639\u0627\u0645 \u0644\u0627\u062d\u0642\u06c1 \u0645\u0646\u0637\u0642<\/h4>\n<p>\u06a9\u06c1 <code>getDeliveryDate()<\/code> \u0641\u0646\u06a9\u0634\u0646 \u0627\u0628 \u0633\u06d2 3 \u062f\u0646 \u06a9\u06cc \u062a\u0627\u0631\u06cc\u062e \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u062f\u0631\u0633\u062a \u0622\u0631\u0688\u06cc\u0646\u0644 \u0644\u0627\u062d\u0642\u06c1 (st, nd, rd, th) \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-javascript\">const suffix = [\"th\", \"st\", \"nd\", \"rd\"][\n  day % 10 > 3 ? 0 : (day % 100 - day % 10 !== 10 ? day % 10 : 0)\n];\n<\/code><\/pre>\n<p>\u0645\u0646\u0637\u0642 \u06c1\u0645\u06cc\u0634\u06c1 11\u0648\u06cc\u06ba\u060c 12\u0648\u06cc\u06ba \u0627\u0648\u0631 13\u0648\u06cc\u06ba \u0627\u0646\u062a\u06c1\u0627\u0626\u06cc \u0635\u0648\u0631\u062a\u0648\u06ba \u06a9\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2: &quot;\u0627\u06cc\u06a9&#8221; \u0622\u062e\u0631\u06cc \u06c1\u0646\u062f\u0633\u06d2 \u0633\u06d2 \u0642\u0637\u0639 \u0646\u0638\u0631\u06d4 \u06cc\u06c1 \u0622\u0631\u0688\u06cc\u0646\u0644 \u0641\u0627\u0631\u0645\u06cc\u0679\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0639\u0627\u0645 \u0645\u0633\u0626\u0644\u06c1 \u06c1\u06d2\u06d4<\/p>\n<h4 id=\"heading-4-suppresshydrationwarning-on-the-delivery-date-span\">4. <code>suppressHydrationWarning<\/code> \u0688\u06cc\u0644\u06cc\u0648\u0631\u06cc \u06a9\u06cc \u062a\u0627\u0631\u06cc\u062e \u06a9\u06cc \u062d\u062f<\/h4>\n<p>\u0688\u06cc\u0644\u06cc\u0648\u0631\u06cc \u06a9\u06cc \u062a\u0627\u0631\u06cc\u062e \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u06d2 \u0648\u0642\u062a \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2: <code>new Date()<\/code>. \u0633\u0631\u0648\u0631 \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u067e\u0631 \u0627\u0633 \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u06a9\u0644\u0627\u0626\u0646\u0679 \u06c1\u0627\u0626\u06cc\u0688\u0631\u06cc\u0634\u0646 \u067e\u0631 \u0627\u0633 \u06a9\u0627 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062d\u0633\u0627\u0628 \u0644\u06af\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u06af\u0631 \u0679\u0627\u0626\u0645 \u0632\u0648\u0646 \u0645\u06cc\u06ba \u0641\u0631\u0642 \u06c1\u06d2 \u062a\u0648\u060c React \u0627\u06cc\u06a9 \u0627\u0634\u0627\u0631\u06d2 \u06a9\u06cc \u0632\u0628\u0627\u0646 \u0633\u06d2 \u0645\u0645\u0627\u062b\u0644 \u0627\u0646\u062a\u0628\u0627\u06c1 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u06d2 \u06af\u0627\u06d4 <code>suppressHydrationWarning<\/code> \u0628\u0627\u0642\u06cc \u062f\u0631\u062e\u062a \u06a9\u0648 \u0645\u062a\u0627\u062b\u0631 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u0645\u062e\u0635\u0648\u0635 \u0646\u0648\u0688 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633 \u0627\u0646\u062a\u0628\u0627\u06c1 \u06a9\u0648 \u062e\u0627\u0645\u0648\u0634 \u06a9\u0631 \u062f\u06cc\u062a\u0627 \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><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1783521203_727_shadcnui-\u06a9\u0627-\u0627\u0633\u062a\u0639\u0645\u0627\u0644-\u06a9\u0631\u062a\u06d2-\u06c1\u0648\u0626\u06d2-\u067e\u0631\u0648\u0688\u06a9\u0634\u0646-\u06a9\u06d2-\u0644\u06cc\u06d2-\u062a\u06cc\u0627\u0631-\u06a9\u0627\u0631\u0688.gif\" alt=\"f81584b2-a2ba-4233-a628-5daca018a1d9\" style=\"display:block;margin:0 auto\" width=\"960\" height=\"720\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-quick-reference-table\"><strong>\u0641\u0648\u0631\u06cc \u062d\u0648\u0627\u0644\u06c1 \u06a9\u06cc \u0645\u06cc\u0632<\/strong><\/h2>\n<table>\n<thead>\n<tr>\n<th>\u06a9\u0627\u0631\u0688<\/th>\n<th>\u0634\u0646\u0627\u062e\u062a \u06a9\u0646\u0646\u062f\u06c1<\/th>\n<th>\u06a9\u06cc\u0633\u0632 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><strong>\u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0627\u0631\u0688<\/strong><\/td>\n<td><code>card-02<\/code><\/td>\n<td>\u0631\u0626\u06cc\u0644 \u0627\u0633\u0679\u06cc\u0679 \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a\u06cc\u06ba\u060c \u06c1\u0648\u0679\u0644 \u06a9\u0627\u0631\u0688\u0632\u060c \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u06d2 \u0645\u0646\u0627\u0638\u0631<\/td>\n<\/tr>\n<tr>\n<td><strong>\u062a\u062c\u0632\u06cc\u06c1 \u06a9\u0627\u0631\u0688<\/strong><\/td>\n<td><code>card-05<\/code><\/td>\n<td>\u0645\u06cc\u0679\u0631\u06a9 \u0688\u06cc\u0679\u0627 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0688\u06cc\u0634 \u0628\u0648\u0631\u0688 \u0648\u06cc\u062c\u0679<\/td>\n<\/tr>\n<tr>\n<td><strong>\u0634\u0645\u0627\u0631\u06cc\u0627\u062a \u06a9\u0627\u0631\u0688<\/strong><\/td>\n<td><code>card-06<\/code><\/td>\n<td>\u0627\u06cc \u06a9\u0627\u0645\u0631\u0633 \u06a9\u06d2 \u0627\u0639\u062f\u0627\u062f \u0648 \u0634\u0645\u0627\u0631 \u06a9\u0627 \u06af\u0631\u0688<\/td>\n<\/tr>\n<tr>\n<td><strong>\u0645\u0635\u0646\u0648\u0639\u0627\u062a \u06a9\u06d2 \u0645\u062e\u062a\u0644\u0641 \u06a9\u0627\u0631\u0688<\/strong><\/td>\n<td><code>card-17<\/code><\/td>\n<td>\u0633\u0627\u0626\u0632 \u06a9\u06d2 \u0627\u0646\u062a\u062e\u0627\u0628 \u0627\u0648\u0631 \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u0627 \u0635\u0641\u062d\u06c1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u0627\u0646 \u0645\u06cc\u06ba \u0633\u06d2 \u0627\u06cc\u06a9 \u06a9\u0648 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c CLI \u06a9\u0645\u0627\u0646\u0688 \u0645\u06cc\u06ba \u0634\u0646\u0627\u062e\u062a \u06a9\u0646\u0646\u062f\u06c1 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">npx shadcn@latest add @shadcn-space\/<identifier>\n<\/identifier><\/code><\/pre>\n<h2 id=\"heading-key-concepts-recap\"><strong>\u06a9\u0644\u06cc\u062f\u06cc \u062a\u0635\u0648\u0631\u0627\u062a \u06a9\u0627 \u062e\u0644\u0627\u0635\u06c1<\/strong><\/h2>\n<p>\u0630\u06cc\u0644 \u0645\u06cc\u06ba \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u0686\u0627\u0631\u0648\u06ba \u06a9\u0627\u0631\u0688\u0632 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u06a9\u0644\u06cc\u062f\u06cc Tailwind\u060c React \u0627\u0648\u0631 TypeScript \u067e\u06cc\u0679\u0631\u0646 \u06a9\u0627 \u062e\u0644\u0627\u0635\u06c1 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-tailwind-group-hover\">\u0679\u06cc\u0644 \u0648\u0646\u0688 \u06af\u0631\u0648\u067e \u06c1\u0648\u0631<\/h3>\n<p>\u06a9\u06c1 <code>group<\/code> \u067e\u06cc\u0631\u0646\u0679 \u0627\u06cc\u0644\u06cc\u0645\u0646\u0679 \u06a9\u06cc \u06a9\u0644\u0627\u0633 \u062a\u0645\u0627\u0645 \u0686\u0627\u0626\u0644\u0688 \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u06cc\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u067e\u06cc\u0631\u0646\u0679 \u0627\u06cc\u0644\u06cc\u0645\u0646\u0679 \u06a9\u06cc \u06c1\u0648\u0648\u0631 \u062d\u0627\u0644\u062a \u06a9\u0627 \u062c\u0648\u0627\u0628 \u062f\u06cc\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06cc \u06c1\u06d2: <code>group-hover:<\/code> \u06a9\u0644\u0627\u0633<\/p>\n<p>\u0646\u06cc\u0633\u0679\u0688 \u06c1\u0648\u0648\u0631 \u0627\u0633\u06a9\u0648\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0627\u0633 \u0637\u0631\u062d \u06a9\u06d2 \u0646\u0627\u0645 \u0648\u0627\u0644\u06d2 \u06af\u0631\u0648\u067e \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba: <code>group\/card<\/code> \u0627\u0648\u0631 <code>group\/btn<\/code> \u06a9\u06d2 \u0633\u0627\u062a\u06be <code>group-hover\/card:<\/code> \u0627\u0648\u0631 <code>group-hover\/btn:<\/code>. \u06cc\u06c1 \u06c1\u0648\u0648\u0631 \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u0648 \u062c\u0632\u0648 \u06a9\u06cc \u062d\u062f\u0648\u062f \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u062e\u0648\u0646 \u0628\u06c1\u0646\u06d2 \u0633\u06d2 \u0631\u0648\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-the-cn-utility\">\u06a9\u06c1 <code>cn()<\/code> \u0639\u0648\u0627\u0645\u06cc \u062e\u062f\u0645\u062a<\/h3>\n<p><code>cn()<\/code>    \u0633\u06d2 <code>@\/lib\/utils<\/code> Tailwind \u06a9\u0644\u0627\u0633 \u0633\u0679\u0631\u0646\u06af\u0632 \u06a9\u0648 \u0636\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0645\u0634\u0631\u0648\u0637 \u06a9\u0644\u0627\u0633 \u0645\u0646\u0637\u0642 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 Tailwind \u06a9\u06cc \u0645\u062a\u0636\u0627\u062f \u06cc\u0648\u0679\u06cc\u0644\u06cc\u0679\u06cc\u0632 \u06a9\u06cc \u0646\u0642\u0644 \u06a9\u0648 \u062e\u062a\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u062c\u0628 \u0628\u06be\u06cc \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0645\u0634\u0631\u0648\u0637 \u06a9\u0644\u0627\u0633\u0632 \u06c1\u0648\u06ba \u062a\u0648 \u0627\u0646 \u06a9\u0648 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u0644\u0679\u0631\u06cc\u0644\u0632 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-last-tailwind-variant\"><code>last:<\/code>    \u0646\u06cc\u0686\u06d2 \u06a9\u06cc \u0637\u0631\u0641 \u06a9\u06cc \u0627\u062e\u062a\u0631\u062a\u06cc<\/h3>\n<p>\u06a9\u06c1 <code>last:<\/code> \u0633\u06cc\u0648\u0688\u0648 \u06a9\u0644\u0627\u0633 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u06af\u0631\u0648\u067e \u06a9\u06d2 \u0622\u062e\u0631\u06cc \u0628\u0686\u06d2 \u06a9\u0648 \u0646\u0634\u0627\u0646\u06c1 \u0628\u0646\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u0634\u0645\u0627\u0631\u06cc\u0627\u062a \u06a9\u0627\u0631\u0688 \u067e\u0631 <code>last:border-e-0<\/code> \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u0645\u06cc\u06ba \u0627\u0646\u0688\u06cc\u06a9\u0633 \u0679\u0631\u06cc\u06a9\u0646\u06af \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0622\u062e\u0631\u06cc \u06a9\u0627\u0644\u0645 \u0633\u06d2 \u067e\u0686\u06be\u0644\u06cc \u0628\u0627\u0631\u0688\u0631 \u06a9\u0648 \u06c1\u0679\u0627 \u062f\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-css-logical-properties\">\u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u06a9\u06cc \u0645\u0646\u0637\u0642\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a<\/h3>\n<p><code>border-e<\/code>    \u0645\u0637\u0644\u0628 \u06c1\u06d2 &quot;\u0627\u0646 \u0644\u0627\u0626\u0646 \u06a9\u06d2 \u0622\u062e\u0631 \u0645\u06cc\u06ba \u0628\u0627\u0631\u0688\u0631&#8221; \u062c\u0648 LTR \u0644\u06d2 \u0622\u0624\u0679 \u0645\u06cc\u06ba \u062f\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 RTL \u0644\u06d2 \u0622\u0624\u0679 \u0645\u06cc\u06ba \u0628\u0627\u0626\u06cc\u06ba \u06c1\u06d2\u06d4 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u0645\u0646\u0637\u0642\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2: <code>border-e<\/code>\u060c <code>ps-<\/code>\u0627\u0648\u0631 <code>pe-<\/code> \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 <code>border-r<\/code>\u060c <code>pl-<\/code>\u0627\u0648\u0631 <code>pr-<\/code> \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631 \u062c\u0632\u0648 \u06a9\u06d2 \u0645\u0642\u0627\u0645 \u06a9\u0648 \u0622\u06af\u0627\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-typescript-optional-props-with-defaults\">\u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0627\u0642\u062f\u0627\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be TypeScript \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a<\/h3>\n<p>\u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0627\u0642\u062f\u0627\u0631 \u06a9\u0648 \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0641\u0646\u06a9\u0634\u0646 \u06a9\u06d2 \u062f\u0633\u062a\u062e\u0637 \u06a9\u0648 \u062a\u0641\u0648\u06cc\u0636 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0633 \u0637\u0631\u062d: <code>({ mainDashboard = mainDashboardData }: WidgetProps)<\/code>\u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0635\u0627\u0641 \u0633\u062a\u06be\u0631\u0627 \u0646\u0645\u0648\u0646\u06c1 \u06c1\u06d2 \u062c\u0633 \u06a9\u0648 \u06a9\u0645\u067e\u0648\u0632 \u0627\u06cc\u0628\u0644 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0627\u0648\u062c\u0648\u062f \u0645\u0639\u0642\u0648\u0644 \u0641\u0627\u0644 \u0628\u06cc\u06a9 \u0688\u06cc\u0679\u0627 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u062d\u0642\u06cc\u0642\u06cc API \u0688\u06cc\u0679\u0627 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0688\u06cc\u0645\u0648\u060c \u0627\u0633\u0679\u0648\u0631\u06cc \u0628\u06a9\u0633\u060c \u0627\u0648\u0631 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0645\u0642\u0627\u0635\u062f \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-use-client-in-nextjs-app-router\"><code>\"use client\"<\/code>    Next.js \u0627\u06cc\u067e \u0631\u0627\u0624\u0679\u0631 \u0645\u06cc\u06ba<\/h3>\n<p>\u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0634\u062f\u06c1 \u062a\u0645\u0627\u0645 \u0627\u062c\u0632\u0627\u0621 <code>useState<\/code>\u0628\u0631\u0627\u0624\u0632\u0631 API \u06cc\u0627 \u0635\u0631\u0641 \u06a9\u0644\u0627\u0626\u0646\u0679 \u067e\u06cc\u06a9\u062c\u0632 \u062c\u06cc\u0633\u06d2: <code>@iconify\/react<\/code> \u0636\u0631\u0648\u0631\u062a <code>\"use client\"<\/code> \u0641\u0627\u0626\u0644 \u06a9\u06d2 \u0627\u0648\u067e\u0631\u06cc \u062d\u0635\u06d2 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u062f\u0627\u06cc\u062a \u06c1\u06d2\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u063a\u06cc\u0631\u060c Next.js \u0627\u06cc\u067e \u0631\u0627\u0624\u0679\u0631 \u0633\u0631\u0648\u0631 \u067e\u0631 \u062c\u0632\u0648 \u06a9\u0648 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u06a9\u0648\u0634\u0634 \u06a9\u0631\u06d2 \u06af\u0627 \u0627\u0648\u0631 \u063a\u0644\u0637\u06cc \u06a9\u0648 \u067e\u06be\u06cc\u0646\u06a9 \u062f\u06d2 \u06af\u0627\u06d4<\/p>\n<h3 id=\"heading-suppresshydrationwarning\"><code>suppressHydrationWarning<\/code><\/h3>\n<p>\u0627\u06af\u0631 \u0633\u0631\u0648\u0631 \u067e\u0631 \u067e\u06cc\u0634 \u06a9\u06cc \u06af\u0626\u06cc \u0642\u062f\u0631 (\u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0645\u0648\u062c\u0648\u062f\u06c1 \u062a\u0627\u0631\u06cc\u062e \u06cc\u0627 \u0648\u0642\u062a)\u060c \u0679\u0627\u0626\u0645 \u0632\u0648\u0646 \u06a9\u06d2 \u0641\u0631\u0642 \u06a9\u06cc \u0648\u062c\u06c1 \u0633\u06d2 \u06a9\u0644\u0627\u0626\u0646\u0679 \u067e\u0631 \u067e\u06cc\u0634 \u06a9\u06cc \u06af\u0626\u06cc \u0642\u062f\u0631 \u0633\u06d2 \u0645\u062e\u062a\u0644\u0641 \u06c1\u06d2 \u062a\u0648 \u0631\u062f \u0639\u0645\u0644 \u06c1\u0627\u0626\u06cc\u0688\u0631\u06cc\u0634\u0646 \u0633\u06d2 \u0645\u0637\u0627\u0628\u0642\u062a \u0646\u06c1 \u06c1\u0648\u0646\u06d2 \u06a9\u06cc \u0648\u0627\u0631\u0646\u0646\u06af \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u0627 <code>suppressHydrationWarning<\/code> \u0645\u062e\u0635\u0648\u0635 \u0639\u0646\u0627\u0635\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0646\u062a\u0628\u0627\u06c1\u0627\u062a \u06a9\u0648 \u062c\u0632\u0648 \u06a9\u06d2 \u0628\u0627\u0642\u06cc \u062f\u0631\u062e\u062a \u06a9\u0648 \u0645\u062a\u0627\u062b\u0631 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u0646\u0638\u0631 \u0627\u0646\u062f\u0627\u0632 \u06a9\u0631 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-css-ripple-animation-pattern\">\u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u0631\u06cc\u067e\u0644 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u067e\u06cc\u0679\u0631\u0646<\/h3>\n<p>\u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u0631\u06cc\u067e\u0644 \u0627\u062b\u0631\u0627\u062a \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u06d2 \u062c\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <code>scale-0<\/code> \u06a9\u0648 <code>scale-[N]<\/code> \u062a\u0628\u062f\u06cc\u0644\u06cc <code>rounded-full<\/code> \u0639\u0646\u0627\u0635\u0631 \u06a9\u0648 \u0627\u0646\u062f\u0631 \u0631\u06a9\u06be\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 <code>overflow-hidden<\/code> \u06a9\u0646\u0679\u06cc\u0646\u0631 \u06c1\u0648\u0648\u0631 \u067e\u0631\u060c \u062f\u0627\u0626\u0631\u06c1 \u067e\u06be\u06cc\u0644\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06a9\u0646\u0679\u06cc\u0646\u0631 \u06a9\u06cc \u062d\u062f\u0648\u062f \u0633\u06d2 \u06a9\u0679 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0644\u06cc\u0628\u0644 \u06a9\u0627 \u0645\u062a\u0646 \u0627\u0633 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u06c1\u06d2\u06d4 <code>relative z-10<\/code>.<\/p>\n<h2 id=\"heading-conclusion\"><strong>\u0646\u062a\u06cc\u062c\u06c1<\/strong><\/h2>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0646\u06d2 shadcn\/ui \u0627\u0648\u0631 \u0628\u0646\u06cc\u0627\u062f\u06cc UI \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u0686\u0627\u0631 \u0627\u062c\u0632\u0627\u0621 \u0628\u0646\u0627\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<ol>\n<li>\n<p><strong>\u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u06a9\u0627\u0631\u0688<\/strong>: \u06af\u0631\u0648\u067e \u06c1\u0648\u0648\u0631 \u0627\u0645\u06cc\u062c \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646\u060c \u0627\u0648\u0648\u0631 \u0641\u0644\u0648 \u06a9\u0644\u067e\u0646\u06af \u0627\u0648\u0631 \u0645\u0646\u0637\u0642\u06cc \u0633\u0631\u062d\u062f\u06cc \u0633\u06c1\u0648\u0644\u06cc\u0627\u062a \u06a9\u06cc \u0642\u0637\u0627\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u062a\u062c\u0632\u06cc\u06c1 \u06a9\u0627\u0631\u0688<\/strong>: \u0628\u0646\u06cc\u0627\u062f\u06cc \u0627\u0639\u062f\u0627\u062f \u0648 \u0634\u0645\u0627\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0646 \u067e\u0679 \u0633\u06c1\u0627\u0631\u0627\u060c \u0645\u0634\u0631\u0648\u0637 \u0628\u06cc\u062c \u06a9\u0627 \u0631\u0646\u06af <code>cn()<\/code>\u0622\u0631\u0627\u0626\u0634\u06cc \u062a\u0635\u0648\u06cc\u0631 \u0645\u0637\u0644\u0642 \u067e\u0648\u0632\u06cc\u0634\u0646 \u0645\u06cc\u06ba<\/p>\n<\/li>\n<li>\n<p><strong>\u0634\u0645\u0627\u0631\u06cc\u0627\u062a \u06a9\u0627\u0631\u0688<\/strong>: \u0688\u06cc\u0679\u0627 \u067e\u0631 \u0645\u0628\u0646\u06cc \u0631\u06cc\u067e\u06cc\u0679 \u0644\u06d2 \u0622\u0624\u0679\u060c \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0645\u062a\u063a\u06cc\u0631 \u06a9\u0627\u0644\u0645\u060c \u062e\u0648\u062f\u06a9\u0627\u0631 \u0622\u062e\u0631\u06cc \u0628\u0627\u0631\u0688\u0631 \u06a9\u0648 \u06c1\u0679\u0627\u0646\u0627 <code>last:<\/code><\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u06cc \u06a9\u0627\u0645\u0631\u0633 \u067e\u0631\u0648\u0688\u06a9\u0679 \u0648\u06cc\u0631\u06cc\u0646\u0679 \u06a9\u0627\u0631\u0688<\/strong>: \u0646\u0627\u0645 \u0634\u062f\u06c1 \u06c1\u0648\u0648\u0631 \u06af\u0631\u0648\u067e\u0633\u060c \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u0631\u06cc\u067e\u0644 \u0628\u0679\u0646\u060c \u0622\u0631\u0688\u06cc\u0646\u0644 \u0688\u06cc\u0679 \u0641\u0627\u0631\u0645\u06cc\u0679 \u0627\u0648\u0631 \u0646\u0645\u06cc \u06a9\u06cc \u0648\u0627\u0631\u0646\u0646\u06af \u062f\u0628\u0627\u0646\u0627<\/p>\n<\/li>\n<\/ol>\n<p>\u06c1\u0631 \u06a9\u0627\u0631\u0688 \u0627\u06cc\u06a9 CLI \u06a9\u0645\u0627\u0646\u0688 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0646\u0633\u0679\u0627\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06d2 \u0633\u0648\u0631\u0633 \u0679\u0631\u06cc \u0645\u06cc\u06ba \u0648\u0627\u0642\u0639 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u06a9\u0648\u0688 \u06a9\u06d2 \u0645\u0627\u0644\u06a9 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0622\u067e \u06a9\u06d2 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u0645\u06cc\u06ba \u0641\u0679 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0686\u06cc\u0632 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0646\u0627\u0645\u0632\u062f \u06af\u0631\u0648\u067e \u06c1\u0648\u0648\u0631 \u0627\u0633\u06a9\u0648\u067e\u0633 \u0633\u06d2 \u0644\u06d2 \u06a9\u0631 \u0645\u0646\u0637\u0642\u06cc CSS \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0642\u062f\u0631\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0679\u0627\u0626\u067e \u0634\u062f\u06c1 \u067e\u0631\u067e\u0633 \u062a\u06a9\u060c \u06cc\u06c1\u0627\u06ba \u0634\u0627\u0645\u0644 \u067e\u06cc\u0679\u0631\u0646 \u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0633\u06d2 \u06a9\u06c1\u06cc\u06ba \u0632\u06cc\u0627\u062f\u06c1 \u0644\u0627\u06af\u0648 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0622\u067e \u0627\u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 UI \u0627\u062c\u0632\u0627\u0621 \u0645\u06cc\u06ba \u0645\u0641\u06cc\u062f \u067e\u0627\u0626\u06cc\u06ba \u06af\u06d2 \u062c\u0646\u06c1\u06cc\u06ba \u0622\u067e shadcn\/ui \u0627\u0648\u0631 Tailwind CSS \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-resources\"><strong>\u0648\u0633\u0627\u0626\u0644<\/strong><\/h2>\n<\/p><\/div>\n<p data-test-label=\"social-row-cta\">\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><\/p>\n","protected":false},"excerpt":{"rendered":"<p>. \u0627\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0645\u0633\u062a\u0642\u0644 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0633\u0627\u062e\u062a\u060c \u0627\u06cc\u06a9 \u0645\u0633\u062a\u062d\u06a9\u0645 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645\u060c \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0633\u0648\u0686\u06d2 \u0633\u0645\u062c\u06be\u06d2 \u0679\u06cc\u0644 \u0648\u0650\u0646\u0688 \u067e\u06cc\u0679\u0631\u0646 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba\u060c \u06c1\u0645 shadcn\/ui \u0627\u0648\u0631 Shadcn Space \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0628\u0646\u06cc\u0627\u062f\u06cc UI \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0686\u0627\u0631 \u0642\u0633\u0645 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u067e\u06cc\u062f\u0627\u0648\u0627\u0631\u06cc \u06a9\u0627\u0631\u0688 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4 \u06c1\u0631 \u06a9\u0627\u0631\u0688 \u0627\u06cc\u06a9 \u0645\u062e\u0635\u0648\u0635 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":26422,"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-26421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/26421","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/comments?post=26421"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/26421\/revisions"}],"predecessor-version":[{"id":26423,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/26421\/revisions\/26423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/media\/26422"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/media?parent=26421"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/categories?post=26421"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/tags?post=26421"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}