{"id":26708,"date":"2026-07-14T12:20:26","date_gmt":"2026-07-14T12:20:26","guid":{"rendered":"https:\/\/umang.pk\/2026\/07\/14\/react-%d9%85%db%8c%da%ba-shadcn-%d8%b4%db%8c%d9%b9-%da%a9%d8%a7-%d8%ac%d8%b2%d9%88-%da%a9%db%8c%d8%b3%db%92-%d8%a8%d9%86%d8%a7%db%8c%d8%a7-%d8%ac%d8%a7%d8%a6%db%92-%da%a9%d8%a7%d8%b1%d9%b9-%d8%a7\/"},"modified":"2026-07-14T12:20:26","modified_gmt":"2026-07-14T12:20:26","slug":"react-%d9%85%db%8c%da%ba-shadcn-%d8%b4%db%8c%d9%b9-%da%a9%d8%a7-%d8%ac%d8%b2%d9%88-%da%a9%db%8c%d8%b3%db%92-%d8%a8%d9%86%d8%a7%db%8c%d8%a7-%d8%ac%d8%a7%d8%a6%db%92-%da%a9%d8%a7%d8%b1%d9%b9-%d8%a7","status":"publish","type":"post","link":"https:\/\/umang.pk\/ur\/2026\/07\/14\/react-%d9%85%db%8c%da%ba-shadcn-%d8%b4%db%8c%d9%b9-%da%a9%d8%a7-%d8%ac%d8%b2%d9%88-%da%a9%db%8c%d8%b3%db%92-%d8%a8%d9%86%d8%a7%db%8c%d8%a7-%d8%ac%d8%a7%d8%a6%db%92-%da%a9%d8%a7%d8%b1%d9%b9-%d8%a7\/","title":{"rendered":"React \u0645\u06cc\u06ba Shadcn \u0634\u06cc\u0679 \u06a9\u0627 \u062c\u0632\u0648 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2: \u06a9\u0627\u0631\u0679 \u0627\u0648\u0631 \u0641\u0644\u0679\u0631 \u067e\u06cc\u0646\u0644 \u06a9\u06cc \u0645\u062b\u0627\u0644\u06cc\u06ba\u06d4"},"content":{"rendered":"\n<div wp_automatic_readability=\"253.84171649666\">    \u0633\u0644\u0627\u0626\u06cc\u0688 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u06cc\u06ba<\/p>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba\u060c \u06c1\u0645 shadcn\/ui \u0627\u0648\u0631 \u0628\u0646\u06cc\u0627\u062f\u06cc UI \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648\u0632 \u06a9\u0648 Shadcn Space \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \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 \u0634\u06cc\u0679 \u06a9\u06d2 \u062f\u0648 \u0627\u062c\u0632\u0627\u0621 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<ol wp_automatic_readability=\"2\">\n<li wp_automatic_readability=\"1\">\n<p>\u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba <strong>\u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u0634\u06cc\u0679<\/strong> \u0645\u0642\u062f\u0627\u0631 \u06a9\u0627 \u06a9\u0646\u0679\u0631\u0648\u0644\u060c \u0622\u0626\u0679\u0645 \u06a9\u0648 \u06c1\u0679\u0627\u0646\u0627\u060c \u0627\u0648\u0631 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0633\u0628 \u0679\u0648\u0679\u0644\u0632 \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li wp_automatic_readability=\"3\">\n<p>\u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba <strong>\u0641\u0644\u0679\u0631 \u067e\u06cc\u0646\u0644 \u0634\u06cc\u0679<\/strong> \u0632\u0645\u0631\u06c1 \u0686\u06cc\u06a9 \u0628\u0627\u06a9\u0633\u0632\u060c \u0642\u06cc\u0645\u062a \u06a9\u06cc \u062d\u062f \u0633\u0644\u0627\u0626\u06cc\u0688\u0631\u060c \u0633\u062a\u0627\u0631\u06d2 \u06a9\u06cc \u062f\u0631\u062c\u06c1 \u0628\u0646\u062f\u06cc\u060c \u0627\u0648\u0631 \u0641\u0639\u0627\u0644 \u0641\u0644\u0679\u0631\u0632 \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ol>\n<p>\u0622\u062e\u0631 \u06a9\u0627\u0631\u060c \u0622\u067e \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0686\u0644\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u062f\u0648\u0646\u0648\u06ba \u0627\u062c\u0632\u0627\u0621 \u0627\u0648\u0631 \u0627\u0646 \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u0631\u06cc\u0627\u0633\u062a \u0627\u0648\u0631 \u062a\u0631\u062a\u06cc\u0628 \u06a9\u06d2 \u0641\u06cc\u0635\u0644\u0648\u06ba \u06a9\u06cc \u0627\u0686\u06be\u06cc \u0633\u0645\u062c\u06be \u06a9\u06d2 \u0633\u0627\u062a\u06be\u060c \u0622\u067e \u0634\u0631\u0648\u0639 \u0633\u06d2 \u06c1\u06cc \u0627\u067e\u0646\u06cc \u0634\u06cc\u0679 \u06a9\u06cc \u0645\u062e\u062a\u0644\u0641 \u0634\u06a9\u0644\u06cc\u06ba \u0628\u0646\u0627 \u0633\u06a9\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<h2 id=\"heading-table-of-contents\"><strong>\u0627\u0646\u0688\u06cc\u06a9\u0633<\/strong><\/h2>\n<h2 id=\"heading-prerequisites\">\u0634\u0631\u0637\u06cc\u06ba<\/h2>\n<p>\u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba:<\/p>\n<ul wp_automatic_readability=\"0\">\n<li wp_automatic_readability=\"-1\">\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 wp_automatic_readability=\"-1\">\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 wp_automatic_readability=\"-1\">\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-what-youll-build\">\u06a9\u06cc\u0627 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0631\u0646\u0627 \u06c1\u06d2<\/h2>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u0646\u0635\u0628 \u0627\u062c\u0632\u0627\u0621 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2: <strong>Shadcn \u06a9\u06cc \u062c\u06af\u06c1<\/strong> \u0631\u062c\u0633\u0679\u0631\u06cc \u06a9\u0627 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u0645\u062c\u0645\u0648\u0639\u06c1\u060c shadcn\/ui \u06a9\u06d2 \u0644\u06cc\u06d2 UI \u0628\u0644\u0627\u06a9\u0633\u060c \u0627\u0648\u0631 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u0627\u062c\u0632\u0627\u0621\u06d4<\/p>\n<p>\u0622\u067e \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u0633\u06cc\u0679 \u06cc\u06c1\u0627\u06ba \u0645\u0644 \u0633\u06a9\u062a\u0627 \u06c1\u06d2: <strong>Shadcn \u0634\u06cc\u0679 \u062c\u0632\u0648 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc<\/strong>. \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 \u0627\u0648\u0631 \u0627\u0633 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba: <strong>\u0641\u0648\u0631\u06cc \u06a9\u0627\u067e\u06cc \u06a9\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a<\/strong>\u0627\u06af\u0631 \u0622\u067e \u067e\u0631\u0648\u0679\u0648 \u0679\u0627\u0626\u067e\u0646\u06af \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0686\u0634\u0645\u06cc \u06a9\u0648 v0\u060c \u067e\u06cc\u0627\u0631\u06d2\u060c \u06cc\u0627 \u0628\u0648\u0644\u0679 \u062c\u06cc\u0633\u06d2 \u0679\u0648\u0644\u0632 \u0645\u06cc\u06ba \u0686\u0633\u067e\u0627\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \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<\/p>\n<p><strong>\u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u0634\u06cc\u0679 (Sheet-03)<\/strong><\/p>\n<ul wp_automatic_readability=\"2\">\n<li wp_automatic_readability=\"-1\">\n<p>\u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u0622\u0626\u06cc\u06a9\u0646 \u0679\u0631\u06af\u0631 \u0627\u0648\u0631 \u0622\u0626\u0679\u0645 \u06a9\u0627\u0624\u0646\u0679 \u0628\u06cc\u062c \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062f\u0627\u0626\u06cc\u06ba \u0637\u0631\u0641 \u0633\u0644\u0627\u0626\u06cc\u0688 \u0627\u0646 \u067e\u06cc\u0646\u0644<\/p>\n<\/li>\n<li wp_automatic_readability=\"1\">\n<p>\u06c1\u0631 \u0634\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0642\u062f\u0627\u0631 \u0645\u06cc\u06ba \u0627\u0636\u0627\u0641\u06c1\u060c \u06a9\u0645\u06cc \u06cc\u0627 \u06c1\u0679\u0627 \u062f\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li wp_automatic_readability=\"-1\">\n<p>\u062e\u0631\u06cc\u062f\u0627\u0631\u06cc \u06a9\u06cc \u0679\u0648\u06a9\u0631\u06cc \u06a9\u06d2 \u0627\u0633\u0679\u06cc\u0679\u0633 \u0633\u06d2 \u0634\u0645\u0627\u0631 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0630\u06cc\u0644\u06cc \u06a9\u0644 \u0627\u0648\u0631 \u0679\u0648\u0679\u0644<\/p>\n<\/li>\n<li wp_automatic_readability=\"-1\">\n<p>\u062f\u0631\u0645\u06cc\u0627\u0646 \u0645\u06cc\u06ba \u0622\u0626\u0679\u0645\u0632 \u06a9\u06cc \u0627\u0633\u06a9\u0631\u0648\u0644 \u0642\u0627\u0628\u0644 \u0641\u06c1\u0631\u0633\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0641\u06a9\u0633\u0688 \u06c1\u06cc\u0688\u0631 \u0627\u0648\u0631 \u0641\u0648\u0679\u0631\u06d4<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0641\u0644\u0679\u0631 \u067e\u06cc\u0646\u0644 \u0634\u06cc\u0679 (Sheet-04)<\/strong><\/p>\n<ul wp_automatic_readability=\"2\">\n<li wp_automatic_readability=\"-1\">\n<p>\u0628\u0627\u0626\u06cc\u06ba \u0633\u06d2 \u0633\u0644\u0627\u0626\u06cc\u0688 \u0627\u0646 \u067e\u06cc\u0646\u0644<\/p>\n<\/li>\n<li wp_automatic_readability=\"-1\">\n<p>\u0645\u0644\u0679\u06cc \u0633\u0644\u06cc\u06a9\u0679 \u0632\u0645\u0631\u06c1 \u0686\u06cc\u06a9 \u0628\u0627\u06a9\u0633<\/p>\n<\/li>\n<li wp_automatic_readability=\"-1\">\n<p>\u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u06a9\u0645 \u0627\u0632 \u06a9\u0645\/\u0632\u06cc\u0627\u062f\u06c1 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0688\u0633\u067e\u0644\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0642\u06cc\u0645\u062a \u06a9\u06cc \u062d\u062f \u06a9\u0627 \u0633\u0644\u0627\u0626\u06cc\u0688\u0631<\/p>\n<\/li>\n<li wp_automatic_readability=\"-1\">\n<p>\u0633\u0646\u06af\u0644 \u0633\u0644\u06cc\u06a9\u0679 \u0631\u06cc\u0679\u0646\u06af \u0641\u0644\u0679\u0631<\/p>\n<\/li>\n<li wp_automatic_readability=\"-1\">\n<p>\u0641\u0639\u0627\u0644 \u0641\u0644\u0679\u0631 \u06a9\u0627\u0624\u0646\u0679 \u0628\u06cc\u062c \u0627\u0648\u0631 &quot;\u0633\u0628 \u06a9\u0648 \u0635\u0627\u0641 \u06a9\u0631\u06cc\u06ba&#8221; \u0627\u06cc\u06a9\u0634\u0646 \u062c\u0648 \u067e\u06cc\u0646\u0644 \u0628\u0646\u062f \u0646\u06c1 \u06c1\u0648\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-how-to-set-up-the-cli-registry\">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<\/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 \u0646\u06cc\u0686\u06d2 \u062f\u06cc \u06af\u0626\u06cc \u0627\u0646\u0633\u0679\u0627\u0644\u06cc\u0634\u0646 \u06a9\u0645\u0627\u0646\u0688 \u0646\u0627\u06a9\u0627\u0645 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u06cc\u06d4<\/p>\n<p>\u0631\u062c\u0633\u0679\u0631\u06cc \u06a9\u06cc \u062a\u0631\u062a\u06cc\u0628\u0627\u062a \u06a9\u06cc \u0645\u06a9\u0645\u0644 \u0648\u0627\u06a9 \u062a\u06be\u0631\u0648 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u062f\u06cc\u06a9\u06be\u06cc\u06ba: <strong>\u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u0627 \u06af\u0627\u0626\u06cc\u0688<\/strong>. Shadcn \u0627\u0633\u067e\u06cc\u0633 \u0628\u06be\u06cc <strong>\u0627\u06cc\u0645 \u0633\u06cc \u067e\u06cc \u0633\u0631\u0648\u0631<\/strong>\u0644\u06c1\u0630\u0627 \u0627\u06af\u0631 \u0622\u067e \u0627\u067e\u0646\u06d2 \u0648\u0631\u06a9 \u0641\u0644\u0648 \u0645\u06cc\u06ba MCP \u0679\u0648\u0644\u0632 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u0627\u06cc\u0688\u06cc\u0679\u0631 \u0633\u06d2 \u06c1\u06cc \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u0628\u0631\u0627\u0624\u0632 \u0627\u0648\u0631 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0633\u0627\u062a\u06be \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\u060c \u062a\u0648 \u06cc\u06c1\u0627\u06ba \u062c\u0627\u0626\u06cc\u06ba:<\/p>\n<p><div class=\"ast-oembed-container \" style=\"height: 100%;\"><iframe loading=\"lazy\" title=\"How to Use Shadcn Space with MCP Server\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/mMlxAmJlbMI?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<h3 id=\"heading-what-the-cart-sheet-does\">\u06a9\u0627\u0631\u0679 \u0633\u06cc\u0679 \u06a9\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a<\/h3>\n<p>\u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u06a9\u0627 \u0622\u0626\u06cc\u06a9\u0646 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u0645\u06cc\u06ba \u0648\u0627\u0642\u0639 \u06c1\u06d2\u06d4 \u0627\u0633 \u067e\u0631 \u06a9\u0644\u06a9 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u062f\u0627\u0626\u06cc\u06ba \u06c1\u0627\u062a\u06be \u06a9\u0627 \u067e\u06cc\u0646\u0644 \u0633\u0644\u0627\u0626\u06cc\u0688 \u06c1\u0648 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0645\u0642\u062f\u0627\u0631 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u06cc\u0627 \u0634\u06d2 \u06a9\u0648 \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u06c1\u0679\u0627\u0646\u06d2 \u06a9\u06d2 \u06a9\u0646\u0679\u0631\u0648\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06c1\u0631 \u0622\u0626\u0679\u0645 \u06a9\u06cc \u062a\u0635\u0648\u06cc\u0631\u060c \u0646\u0627\u0645\u060c \u0645\u062e\u062a\u0644\u0641 \u0642\u0633\u0645 \u0627\u0648\u0631 \u0642\u06cc\u0645\u062a \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u06a9\u06d2 \u0645\u0646\u062a\u0642\u0644 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc \u0630\u06cc\u0644\u06cc \u0679\u0648\u0679\u0644 \u0627\u067e \u0688\u06cc\u0679 \u06c1\u0648 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0641\u0648\u0679\u0631 \u0646\u0686\u0644\u06d2 \u062d\u0635\u06d2 \u0645\u06cc\u06ba \u0679\u06be\u06cc\u06a9 \u0631\u06c1\u062a\u0627 \u06c1\u06d2 \u0627\u0633 \u0633\u06d2 \u0642\u0637\u0639 \u0646\u0638\u0631 \u06a9\u06c1 \u0641\u06c1\u0631\u0633\u062a \u0645\u06cc\u06ba \u06a9\u062a\u0646\u06d2 \u0622\u0626\u0679\u0645\u0632 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-how-to-install-the-cart-sheet\">\u06a9\u0627\u0631\u0679 \u0633\u06cc\u0679 \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 \u0686\u0644\u0627\u0626\u06cc\u06ba:<\/p>\n<p><strong>\u0627\u06cc\u0646 \u067e\u06cc \u0627\u06cc\u0645<\/strong>:<\/p>\n<pre><code class=\"language-javascript\">npx shadcn@latest add @shadcn-space\/sheet-03\n<\/code><\/pre>\n<p><strong>pnpm<\/strong>:<\/p>\n<pre><code class=\"language-javascript\">pnpm dlx shadcn@latest add @shadcn-space\/sheet-03\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\/sheet-03\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\/sheet-03\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    sheet\/\n      sheet-03.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 { useState } from \"react\";\nimport { ShoppingCartIcon, PlusIcon, MinusIcon, Trash2Icon } from \"lucide-react\";\nimport {\n  Sheet,\n  SheetTrigger,\n  SheetContent,\n  SheetHeader,\n  SheetTitle,\n  SheetDescription,\n  SheetFooter,\n  SheetClose,\n} from \"@\/components\/ui\/sheet\";\nimport { Button } from \"@\/components\/ui\/button\";\nimport { ButtonGroup, ButtonGroupText } from \"@\/components\/ui\/button-group\";\nimport { Badge } from \"@\/components\/ui\/badge\";\nimport { Separator } from \"@\/components\/ui\/separator\";\n\nconst initialItems = [\n  {\n    id: 1,\n    name: \"Apple Watch S9\",\n    variant: \"Midnight \/ 41mm\",\n    price: 684.0,\n    qty: 1,\n    image: \"https:\/\/images.shadcnspace.com\/assets\/ecommerce\/product-category\/product-category-03-1.webp\",\n  },\n  {\n    id: 2,\n    name: \"Beige Jacket\",\n    variant: \"Size M \/ Beige\",\n    price: 479.0,\n    qty: 1,\n    image: \"https:\/\/images.shadcnspace.com\/assets\/ecommerce\/product-category\/product-category-02-2.webp\",\n  },\n  {\n    id: 3,\n    name: \"Glow Serum\",\n    variant: \"30ml \/ Vitamin C\",\n    price: 46.0,\n    qty: 2,\n    image: \"https:\/\/images.shadcnspace.com\/assets\/ecommerce\/product-category\/product-category-03-3.webp\",\n  },\n];\n\nconst ShoppingCartDemo = () => {\n  const [items, setItems] = useState(initialItems);\n\n  const updateQty = (id, delta) => {\n    setItems((prev) =>\n      prev\n        .map((item) => (item.id === id ? { ...item, qty: item.qty + delta } : item))\n        .filter((item) => item.qty > 0)\n    );\n  };\n\n  const subtotal = items.reduce((sum, item) => sum + item.price * item.qty, 0);\n  const totalCount = items.reduce((sum, item) => sum + item.qty, 0);\n\n  return (\n    <sheet>\n      <sheettrigger render=\"{<Button\" variant=\"outline\" size=\"icon\" classname=\"relative cursor-pointer\"\/>}>\n        <shoppingcarticon size=\"{18}\"\/>\n        {totalCount > 0 && (\n          <badge classname=\"absolute -top-2 -right-2 size-5 justify-center rounded-full p-0 text-[10px]\">\n            {totalCount}\n          <\/badge>\n        )}\n      \n\n      <sheetcontent side=\"right\" classname=\"flex flex-col p-0 gap-0\">\n        <sheetheader classname=\"px-4 pt-5 pb-4 border-b\">\n          <sheettitle>Your Cart<\/sheettitle>\n          <sheetdescription>\n            {totalCount > 0\n              ? `${totalCount} item${totalCount > 1 ? \"s\" : \"\"} in your cart`\n              : \"Your cart is empty\"}\n          <\/sheetdescription>\n        <\/sheetheader>\n\n        <div classname=\"flex-1 overflow-y-auto px-4 py-3 flex flex-col gap-3\">\n          {items.map((item) => (\n            <div key=\"{item.id}\" classname=\"flex items-start gap-3\">\n              <div classname=\"size-16 rounded-lg bg-muted shrink-0 overflow-hidden\">\n                <img decoding=\"async\" src=\"{item.image}\" alt=\"{item.name}\" classname=\"size-full object-cover\" title=\"\">\n              <\/div>\n              <div classname=\"flex-1 min-w-0\">\n                <p classname=\"text-sm font-medium leading-snug truncate\">{item.name}<\/p>\n                <p classname=\"text-xs text-muted-foreground\">{item.variant}<\/p>\n                <p classname=\"text-sm font-semibold mt-1\">${item.price.toFixed(2)}<\/p>\n              <\/div>\n              <div classname=\"flex flex-col items-end gap-2 shrink-0\">\n                <button variant=\"ghost\" size=\"icon-sm\" classname=\"text-muted-foreground hover:text-destructive hover:bg-destructive\/10! cursor-pointer\" onclick=\"{()\"> updateQty(item.id, -item.qty)}\n                >\n                  <trash2icon size=\"{14}\"\/>\n                <\/button>\n                <buttongroup>\n                  <button variant=\"outline\" size=\"icon-sm\" classname=\"cursor-pointer\" onclick=\"{()\"> updateQty(item.id, -1)}>\n                    <minusicon\/>\n                  <\/button>\n                  <buttongrouptext classname=\"px-2 text-sm min-w-7 justify-center\">{item.qty}<\/buttongrouptext>\n                  <button variant=\"outline\" size=\"icon-sm\" classname=\"cursor-pointer\" onclick=\"{()\"> updateQty(item.id, 1)}>\n                    <plusicon\/>\n                  <\/button>\n                <\/buttongroup>\n              <\/div>\n            <\/div>\n          ))}\n        <\/div>\n\n        <sheetfooter classname=\"flex flex-col gap-3 px-4 pt-3 pb-5 border-t\" wp_automatic_readability=\"2\">\n          <div classname=\"flex flex-col gap-1.5 w-full\" wp_automatic_readability=\"9\">\n            <p>\n              <span>Subtotal<\/span>\n              <span>${subtotal.toFixed(2)}<\/span>\n            <\/p>\n            <p>\n              <span>Shipping<\/span>\n              <span classname=\"text-teal-400\">Free<\/span>\n            <\/p>\n            <separator classname=\"my-1\"\/>\n            <p>\n              <span>Total<\/span>\n              <span>${subtotal.toFixed(2)}<\/span>\n            <\/p>\n          <\/div>\n          <button classname=\"w-full cursor-pointer hover:bg-primary\/80\">Checkout<\/button>\n          <sheetclose render=\"{<Button\" variant=\"outline\" classname=\"w-full cursor-pointer\"\/>}>\n            Continue Shopping\n          \n        <\/sheetfooter>\n      <\/sheetcontent>\n    <\/sheet>\n  );\n};\n\nexport default ShoppingCartDemo;\n<\/code><\/pre>\n<p>\u0622\u0626\u06cc\u06d2 \u062f\u06cc\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u06cc\u06c1 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h4 id=\"heading-1-derived-totals-instead-of-tracked-state\">1. \u0679\u0631\u06cc\u06a9 \u0634\u062f\u06c1 \u0631\u06cc\u0627\u0633\u062a\u0648\u06ba \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u062e\u0630 \u06a9\u0631\u062f\u06c1 \u06a9\u0644<\/h4>\n<p><code>subtotal<\/code>    \u0627\u0648\u0631 <code>totalCount<\/code> \u0633\u06d2 \u0634\u0645\u0627\u0631 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 <code>items<\/code> \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0631\u06cc\u0646\u0688\u0631\u0646\u06af \u067e\u0631 \u062c\u0648 \u062e\u0648\u062f \u0645\u062d\u0641\u0648\u0638 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 <code>useState<\/code>. \u0627\u06af\u0631 \u0622\u067e \u0627\u0633\u06d2 \u0627\u0644\u06af \u0633\u06d2 \u0679\u0631\u06cc\u06a9 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u067e\u06c1\u0644\u06cc \u0628\u0627\u0631 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u06cc\u06c1 \u0645\u0637\u0627\u0628\u0642\u062a \u067e\u0630\u06cc\u0631\u06cc \u0633\u06d2 \u0628\u0627\u06c1\u0631 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4 <code>items<\/code> \u0627\u0648\u0631 \u0645\u06cc\u06ba \u0627\u0646 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06af\u0646\u062a\u06cc \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u0646\u0627 \u0628\u06be\u0648\u0644 \u06af\u06cc\u0627\u06d4<\/p>\n<h4 id=\"heading-2-removing-an-item-is-just-zeroing-its-quantity\">2. \u06a9\u0633\u06cc \u0634\u06d2 \u06a9\u0648 \u06c1\u0679\u0627\u0646\u06d2 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06c1 \u0627\u0633 \u0686\u06cc\u0632 \u06a9\u06cc \u0645\u0642\u062f\u0627\u0631 \u06a9\u0648 \u0635\u0641\u0631 \u06a9\u0631\u0646\u0627\u06d4<\/h4>\n<pre><code class=\"language-javascript\">const updateQty = (id, delta) => {\n  setItems((prev) =>\n    prev\n      .map((item) => (item.id === id ? { ...item, qty: item.qty + delta } : item))\n      .filter((item) => item.qty > 0)\n  );\n};\n<\/code><\/pre>\n<p>\u06a9\u0648\u0691\u06d2 \u062f\u0627\u0646 \u06a9\u0627 \u0622\u0626\u06cc\u06a9\u0646 \u06a9\u06c1\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 <code>updateQty(item.id, -item.qty)<\/code>\u0627\u0633 \u0686\u06cc\u0632 \u06a9\u06cc \u0645\u0642\u062f\u0627\u0631 \u06a9\u0648 0 \u062a\u06a9 \u06af\u0631\u0627 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 <code>.filter()<\/code> \u067e\u06be\u0631 \u06c1\u0645 \u0627\u0633\u06d2 \u0635\u0641 \u0633\u06d2 \u06c1\u0679\u0627 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u06a9\u0627 \u0645\u0637\u0644\u0628 \u06c1\u06d2 \u06a9\u06c1 \u0627\u06cc\u06a9 \u0639\u0644\u06cc\u062d\u062f\u06c1 &quot;\u0622\u0626\u0679\u0645 \u06a9\u0648 \u06c1\u0679\u0627 \u062f\u06cc\u06ba&#8221; \u0641\u0646\u06a9\u0634\u0646 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u062c\u0648 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0645\u0648\u062c\u0648\u062f \u0645\u0646\u0637\u0642 \u06a9\u0648 \u0646\u0642\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>updateQty<\/code>.<\/p>\n<h4 id=\"heading-3-render-prop-instead-of-aschild\">3\u06d4 <code>render<\/code> \u0633\u06c1\u0627\u0631\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 <code>asChild<\/code><\/h4>\n<p><code>SheetTrigger<\/code>    \u0627\u0648\u0631 <code>SheetClose<\/code> \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>render<\/code> \u0633\u06c1\u0627\u0631\u06d2 (<code>render={<button ...=\"\"\/>}<\/code>)\u0628\u0686\u0648\u06ba \u06a9\u0648 \u067e\u06cc\u06a9 \u06a9\u0631\u0646\u06d2 \u0633\u06d2\u06d4 <code>asChild<\/code> \u067e\u06cc\u0679\u0631\u0646 \u06cc\u06c1 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 UI \u06a9\u0646\u0648\u0646\u0634\u0646 \u06c1\u06d2 \u062c\u0633\u06d2 Shadcn Space \u062c\u0632\u0648 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0628\u0679\u0646 (\u0641\u0648\u06a9\u0633 \u0633\u0679\u06cc\u0679\u060c \u06a9\u06cc \u0628\u0648\u0631\u0688 \u06c1\u06cc\u0646\u0688\u0644\u0646\u06af) \u06a9\u0648 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0631\u06cc\u067e\u0631 \u0633\u06d2 \u0627\u0648\u0648\u0631 \u0631\u0627\u0626\u06cc\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0627\u0633 \u06a9\u06d2 \u0645\u06a9\u0645\u0644 \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc \u0631\u0648\u06cc\u06d2 \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h4 id=\"heading-4-fixed-header-and-footer-scrollable-middle\">4. \u06c1\u06cc\u0688\u0631 \u0627\u0648\u0631 \u0641\u0648\u0679\u0631 \u0641\u06a9\u0633\u0688\u060c \u0633\u06cc\u0646\u0679\u0631 \u0633\u06a9\u0631\u0648\u0644 \u0627\u06cc\u0628\u0644<\/h4>\n<pre><code class=\"language-javascript\"><sheetcontent classname=\"flex flex-col p-0 gap-0\">\n  <sheetheader classname=\"border-b\"\/>\n  <p>{\/* items *\/}<\/p>\n  <sheetfooter classname=\"border-t\"\/>\n<\/sheetcontent>\n<\/code><\/pre>\n<p><code>flex-1 overflow-y-auto<\/code>    \u0633\u06cc\u0646\u0679\u0631 \u0688\u06cc\u0648 \u0648\u06c1\u06cc \u06c1\u06d2 \u062c\u0648 \u06c1\u06cc\u0688\u0631 \u0627\u0648\u0631 \u0641\u0648\u0679\u0631 \u06a9\u0648 \u062f\u0631\u0633\u062a \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2 \u062c\u0628\u06a9\u06c1 \u0622\u0626\u0679\u0645\u0632 \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u0622\u0632\u0627\u062f\u0627\u0646\u06c1 \u0637\u0648\u0631 \u067e\u0631 \u0633\u06a9\u0631\u0648\u0644 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0627\u0633\u06d2 \u0686\u06be\u0648\u0691 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0644\u0645\u0628\u06cc \u0679\u0648\u06a9\u0631\u06cc \u0686\u06cc\u06a9 \u0622\u0624\u0679 \u0628\u0679\u0646 \u06a9\u0648 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0633\u06d2 \u062f\u06be\u06a9\u06cc\u0644 \u062f\u06d2 \u06af\u06cc\u06d4<\/p>\n<h3 id=\"heading-live-preview\"><strong>\u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1:<\/strong><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/React-\u0645\u06cc\u06ba-Shadcn-\u0634\u06cc\u0679-\u06a9\u0627-\u062c\u0632\u0648-\u06a9\u06cc\u0633\u06d2-\u0628\u0646\u0627\u06cc\u0627-\u062c\u0627\u0626\u06d2-\u06a9\u0627\u0631\u0679.gif\" alt=\"dec70851-3b64-43d4-9611-f75165f7c4ca\" style=\"display:block;margin:0 auto\" width=\"1152\" height=\"648\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-how-to-build-the-filter-panel-sheet-sheet-04\">\u0641\u0644\u0679\u0631 \u067e\u06cc\u0646\u0644 \u0634\u06cc\u0679 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u0626\u06cc\u06ba (\u0634\u06cc\u0679-04)<\/h2>\n<h3 id=\"heading-what-the-filter-sheet-does\">\u0641\u0644\u0679\u0631 \u0634\u06cc\u0679 \u06a9\u0627 \u0641\u0646\u06a9\u0634\u0646<\/h3>\n<p>\u0641\u0644\u0679\u0631 \u0628\u0679\u0646 \u0628\u0627\u0626\u06cc\u06ba \u0637\u0631\u0641 \u0633\u06d2 \u0627\u06cc\u06a9 \u067e\u06cc\u0646\u0644 \u06a9\u0648 \u0633\u0644\u0627\u0626\u06cc\u0688 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0633 \u0645\u06cc\u06ba \u0632\u0645\u0631\u06c1 \u0686\u06cc\u06a9 \u0628\u0627\u06a9\u0633\u0632\u060c \u0642\u06cc\u0645\u062a \u06a9\u06cc \u062d\u062f \u06a9\u0627 \u0633\u0644\u0627\u0626\u06cc\u0688\u0631\u060c \u0633\u062a\u0627\u0631\u06c1 \u062f\u0631\u062c\u06c1 \u0628\u0646\u062f\u06cc \u06a9\u0627 \u0641\u0644\u0679\u0631\u060c \u0627\u0648\u0631 \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0679\u0648\u06af\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0641\u0639\u0627\u0644 \u0641\u0644\u0679\u0631\u0632 \u06a9\u06cc \u062a\u0639\u062f\u0627\u062f \u062e\u0648\u062f \u0645\u062d\u0631\u06a9 \u0628\u0679\u0646 \u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0641\u0644\u0679\u0631 \u06a9\u0648 \u0635\u0627\u0641 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06cc\u0646\u0644 \u06a9\u0648 \u0628\u0646\u062f \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u062d\u0627\u0644\u062a \u062f\u0648\u0628\u0627\u0631\u06c1 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-how-to-install-the-filter-sheet\">\u0641\u0644\u0679\u0631 \u0634\u06cc\u0679 \u06a9\u0648 \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\/sheet-04\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    sheet\/\n      sheet-04.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 { SlidersHorizontalIcon, StarIcon } from \"lucide-react\";\nimport {\n  Sheet,\n  SheetTrigger,\n  SheetContent,\n  SheetHeader,\n  SheetTitle,\n  SheetDescription,\n  SheetFooter,\n  SheetClose,\n} from \"@\/components\/ui\/sheet\";\nimport { Button } from \"@\/components\/ui\/button\";\nimport { Checkbox } from \"@\/components\/ui\/checkbox\";\nimport { Slider } from \"@\/components\/ui\/slider\";\nimport { Label } from \"@\/components\/ui\/label\";\nimport { Badge } from \"@\/components\/ui\/badge\";\nimport { Separator } from \"@\/components\/ui\/separator\";\n\nconst CATEGORIES = [\"Watches\", \"Clothing\", \"Beauty\", \"Electronics\", \"Home & Living\"];\nconst RATINGS = [4, 3, 2, 1];\nconst AVAILABILITY = [\"In Stock\", \"On Sale\"];\n\nconst AdvancedFiltersDemo = () => {\n  const [selectedCategories, setSelectedCategories] = useState([]);\n  const [priceRange, setPriceRange] = useState([0, 1000]);\n  const [selectedRating, setSelectedRating] = useState(null);\n  const [selectedAvailability, setSelectedAvailability] = useState([]);\n\n  const toggleCategory = (cat) =>\n    setSelectedCategories((prev) => (prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]));\n\n  const toggleAvailability = (val) =>\n    setSelectedAvailability((prev) => (prev.includes(val) ? prev.filter((v) => v !== val) : [...prev, val]));\n\n  const clearAll = () => {\n    setSelectedCategories([]);\n    setPriceRange([0, 1000]);\n    setSelectedRating(null);\n    setSelectedAvailability([]);\n  };\n\n  const activeCount =\n    selectedCategories.length +\n    (priceRange[0] !== 0 || priceRange[1] !== 1000 ? 1 : 0) +\n    (selectedRating !== null ? 1 : 0) +\n    selectedAvailability.length;\n\n  return (\n    <sheet>\n      <sheettrigger render=\"{<Button\" variant=\"outline\" classname=\"relative cursor-pointer gap-2\"\/>}>\n        <slidershorizontalicon size=\"{16}\"\/>\n        Filters\n        {activeCount > 0 && (\n          <badge classname=\"size-5 justify-center rounded-full p-0 text-[10px]\">{activeCount}<\/badge>\n        )}\n      \n\n      <sheetcontent side=\"left\" classname=\"flex flex-col p-0 gap-0\">\n        <sheetheader classname=\"px-4 pt-5 pb-4 border-b\">\n          <sheettitle>Filters<\/sheettitle>\n          <sheetdescription>Narrow down products by your preferences.<\/sheetdescription>\n        <\/sheetheader>\n\n        <div classname=\"flex-1 overflow-y-auto px-4 py-4 flex flex-col gap-5\" wp_automatic_readability=\"13\">\n          <div classname=\"flex flex-col gap-3\" wp_automatic_readability=\"9\">\n            <p classname=\"text-sm font-medium\">Category<\/p>\n            {CATEGORIES.map((cat) => (\n              <p>\n                <checkbox id=\"{`cat-${cat}`}\" checked=\"{selectedCategories.includes(cat)}\" oncheckedchange=\"{()\"> toggleCategory(cat)} \/>\n                <label htmlfor=\"{`cat-${cat}`}\" classname=\"text-sm font-normal cursor-pointer\">{cat}<\/label>\n              <\/checkbox><\/p>\n            ))}\n          <\/div>\n\n          <separator\/>\n\n          <div classname=\"flex flex-col gap-4\">\n            <div classname=\"flex items-center justify-between\">\n              <p classname=\"text-sm font-medium\">Price Range<\/p>\n              <span classname=\"text-xs text-muted-foreground\">${priceRange[0]} -- ${priceRange[1]}<\/span>\n            <\/div>\n            <slider value=\"{priceRange}\" onvaluechange=\"{(val)\"> setPriceRange(Array.isArray(val) ? [...val] : [val])} min={0} max={1000} step={10} \/>\n          <\/slider><\/div>\n\n          <separator\/>\n\n          <div classname=\"flex flex-col gap-3\" wp_automatic_readability=\"13\">\n            <p classname=\"text-sm font-medium\">Rating<\/p>\n            {RATINGS.map((rating) => (\n              <p> setSelectedRating(selectedRating === rating ? null : rating)}>\n                <checkbox id=\"{`rating-${rating}`}\" checked=\"{selectedRating\" rating=\"\" oncheckedchange=\"{()\"> setSelectedRating(selectedRating === rating ? null : rating)} \/>\n                <label htmlfor=\"{`rating-${rating}`}\" classname=\"flex items-center gap-1 text-sm font-normal cursor-pointer\">\n                  {Array.from({ length: rating }).map((_, i) => <staricon key=\"{i}\" size=\"{13}\" classname=\"fill-amber-400 text-amber-400\"\/>)}\n                  {Array.from({ length: 5 - rating }).map((_, i) => <staricon key=\"{i}\" size=\"{13}\" classname=\"text-muted-foreground\/40\"\/>)}\n                  <span classname=\"ml-0.5 text-muted-foreground\">& up<\/span>\n                <\/label>\n              <\/checkbox><\/p>\n            ))}\n          <\/div>\n\n          <separator\/>\n\n          <div classname=\"flex flex-col gap-3\" wp_automatic_readability=\"9\">\n            <p classname=\"text-sm font-medium\">Availability<\/p>\n            {AVAILABILITY.map((val) => (\n              <p>\n                <checkbox id=\"{`avail-${val}`}\" checked=\"{selectedAvailability.includes(val)}\" oncheckedchange=\"{()\"> toggleAvailability(val)} \/>\n                <label htmlfor=\"{`avail-${val}`}\" classname=\"text-sm font-normal cursor-pointer\">{val}<\/label>\n              <\/checkbox><\/p>\n            ))}\n          <\/div>\n        <\/div>\n\n        <sheetfooter classname=\"flex flex-row gap-2 px-4 pt-3 pb-5 border-t\">\n          <button variant=\"outline\" classname=\"flex-1 cursor-pointer\" onclick=\"{clearAll}\">Clear All<\/button>\n          <sheetclose render=\"{<Button\" classname=\"flex-1 cursor-pointer hover:bg-primary\/80\"\/>}>Apply Filters\n        <\/sheetfooter>\n      <\/sheetcontent>\n    <\/sheet>\n  );\n};\n\nexport default AdvancedFiltersDemo;\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u062c\u0632\u0648 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<h4 id=\"heading-1-use-a-separate-state-for-each-filter-type\">1. \u06c1\u0631 \u0641\u0644\u0679\u0631 \u06a9\u06cc \u0642\u0633\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0644\u06af \u0627\u0644\u06af \u0633\u0679\u06cc\u0679\u0633 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h4>\n<p>\u0632\u0645\u0631\u06c1 \u062c\u0627\u062a \u0627\u0648\u0631 \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc \u0635\u0641\u0648\u06ba \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0635\u0627\u0631\u0641 \u0645\u062a\u0639\u062f\u062f \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u062f\u0631\u062c\u06c1 \u0628\u0646\u062f\u06cc \u0627\u06cc\u06a9 \u0648\u0627\u062d\u062f \u0642\u062f\u0631 \u06c1\u06d2 (\u06cc\u0627 <code>null<\/code>) \u0627\u0633 \u06a9\u06cc \u0648\u062c\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0622\u067e \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u0644\u06cc\u0648\u0644 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0642\u06cc\u0645\u062a \u062f\u0648 \u0642\u062f\u0631\u0648\u06ba \u06a9\u06cc \u0627\u06cc\u06a9 \u0635\u0641 \u06c1\u06d2 (<code>[min, max]<\/code>) \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u062f\u06c1 \u0631\u06cc\u0646\u062c \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u06cc\u06ba\u06d4 \u06cc\u06c1 \u06c1\u0631 \u0641\u0644\u0679\u0631 \u06a9\u06cc \u062d\u0627\u0644\u062a \u06a9\u0648 \u0633\u0627\u062f\u06c1 \u0627\u0648\u0631 UI \u06a9\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0645\u0637\u0627\u0628\u0642\u062a \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h4 id=\"heading-2-activecount-is-computed-not-tracked\">2. <code>activeCount<\/code> \u06cc\u06c1 \u0679\u0631\u06cc\u06a9 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u06cc\u06c1 \u062d\u0633\u0627\u0628 \u06c1\u06d2.<\/h4>\n<p>\u0627\u0648\u067e\u0631 \u0648\u0627\u0644\u06d2 \u06a9\u0627\u0631\u0679 \u0628\u06cc\u062c \u06a9\u06d2 \u0644\u06cc\u06d2 \u0648\u06c1\u06cc \u0627\u0633\u062a\u062f\u0644\u0627\u0644:<\/p>\n<pre><code class=\"language-javascript\">const activeCount =\n  selectedCategories.length +\n  (priceRange[0] !== 0 || priceRange[1] !== 1000 ? 1 : 0) +\n  (selectedRating !== null ? 1 : 0) +\n  selectedAvailability.length;\n<\/code><\/pre>\n<p>\u0627\u06af\u0631 \u0622\u067e \u0627\u0633 \u06af\u0646\u062a\u06cc \u06a9\u0648 \u062f\u0633\u062a\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0679\u0631\u06cc\u06a9 \u06a9\u0631 \u0631\u06c1\u06d2 \u062a\u06be\u06d2\u060c \u062a\u0648 \u0622\u067e \u0646\u0626\u06d2 \u0641\u0644\u0679\u0631\u0632 \u06a9\u0648 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2 \u0627\u0648\u0631 \u06af\u0646\u062a\u06cc \u06a9\u06cc \u0645\u0646\u0637\u0642 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u0646\u0627 \u0628\u06be\u0648\u0644 \u062c\u0627\u0626\u06cc\u06ba \u06af\u06d2\u060c \u0627\u0648\u0631 \u0622\u067e \u0627\u067e\u0646\u06d2 \u0635\u0627\u0631\u0641\u06cc\u0646 \u06a9\u0648 \u0627\u06cc\u06a9 \u0628\u06cc\u062c \u062f\u06a9\u06be\u0627 \u0631\u06c1\u06d2 \u06c1\u0648\u06ba \u06af\u06d2\u06d4<\/p>\n<h4 id=\"heading-3-apply-filters-closes-the-panel-clear-all-doesnt\">3. &quot;\u0641\u0644\u0679\u0631 \u0644\u06af\u0627\u0626\u06cc\u06ba&#8221; \u067e\u06cc\u0646\u0644 \u06a9\u0648 \u0628\u0646\u062f \u06a9\u0631 \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u060c &quot;\u0633\u0628 \u06a9\u0648 \u0635\u0627\u0641 \u06a9\u0631\u06cc\u06ba&#8221; \u067e\u06cc\u0646\u0644 \u06a9\u0648 \u0628\u0646\u062f \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/h4>\n<p><code>Clear All<\/code>    \u0641\u0648\u0646 \u06a9\u0627\u0644 <code>clearAll()<\/code> \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0645\u06cc\u062f\u0627\u0646\u06cc \u0639\u0644\u0627\u0642\u0648\u06ba \u0645\u06cc\u06ba <code>Button<\/code>. <code>Apply Filters<\/code> \u0645\u06cc\u06ba \u0644\u067e\u06cc\u0679 <code>SheetClose<\/code>\u0644\u06c1\u0630\u0627 \u06c1\u0645 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u0686\u06cc\u0632 \u06a9\u0648 \u0631\u06cc \u0633\u06cc\u0679 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u067e\u06cc\u0646\u0644 \u06a9\u0648 \u0628\u0646\u062f \u06a9\u0631 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0641\u0644\u0679\u0631\u0632 \u0635\u0627\u0641 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0635\u0627\u0631\u0641\u06cc\u0646 \u0639\u0627\u0645 \u0637\u0648\u0631 \u067e\u0631 \u0646\u0626\u06d2 \u0641\u0644\u0679\u0631\u0632 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u06cc\u0646\u0644 \u06a9\u0648 \u06a9\u06be\u0644\u0627 \u0631\u06a9\u06be\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e \u0627\u067e\u0646\u06d2 \u062a\u0645\u0627\u0645 \u06a9\u0627\u0645\u0648\u06ba \u06a9\u0648 \u0628\u0646\u062f \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0622\u067e \u06a9\u0648 \u0627\u0646\u06c1\u06cc\u06ba \u06c1\u0631 \u0628\u0627\u0631 \u062f\u0648\u0628\u0627\u0631\u06c1 \u06a9\u06be\u0648\u0644\u0646\u0627 \u067e\u0691\u06d2 \u06af\u0627\u06d4<\/p>\n<h4 id=\"heading-4-toggling-a-category-with-filter-and-spread\">4. \u0632\u0645\u0631\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 <code>.filter()<\/code> \u0627\u0648\u0631 \u067e\u06be\u06cc\u0644\u0627\u0624<\/h4>\n<pre><code class=\"language-javascript\">const toggleCategory = (cat) =>\n  setSelectedCategories((prev) => (prev.includes(cat) ? prev.filter((c) => c !== cat) : [...prev, cat]));\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0627\u06cc\u06a9 \u0644\u0627\u0626\u0646 \u0635\u0641 \u0633\u06d2 \u0632\u0645\u0631\u06d2 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u0627\u0648\u0631 \u06c1\u0679\u0627\u0646\u06d2 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u062a\u06cc \u06c1\u06d2 \u0627\u0633 \u067e\u0631 \u0645\u0646\u062d\u0635\u0631 \u06c1\u06d2 \u06a9\u06c1 \u0622\u06cc\u0627 \u0632\u0645\u0631\u06c1 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2 \u06cc\u0627 \u0646\u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0627\u06cc\u0633\u0627 \u0646\u0645\u0648\u0646\u06c1 \u06c1\u06d2 \u062c\u0633 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u06c1\u06d2 \u062c\u06c1\u0627\u06ba \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u06a9\u062b\u06cc\u0631 \u0627\u0646\u062a\u062e\u0627\u0628\u06cc \u0686\u06cc\u06a9 \u0628\u0627\u06a9\u0633\u0632 \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u06c1\u06d2 \u062c\u0633 \u0645\u06cc\u06ba \u062a\u0627\u0631\u0648\u06ba \u06a9\u06cc \u0627\u06cc\u06a9 \u0635\u0641 \u0633\u06d2 \u062a\u0639\u0627\u0648\u0646 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-live-preview\"><strong>\u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1:<\/strong><\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/07\/1784031626_20_React-\u0645\u06cc\u06ba-Shadcn-\u0634\u06cc\u0679-\u06a9\u0627-\u062c\u0632\u0648-\u06a9\u06cc\u0633\u06d2-\u0628\u0646\u0627\u06cc\u0627-\u062c\u0627\u0626\u06d2-\u06a9\u0627\u0631\u0679.gif\" alt=\"e3850372-c172-4d49-b973-09192e80bc61\" style=\"display:block;margin:0 auto\" width=\"1152\" height=\"648\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-quick-reference-table\">\u0641\u0648\u0631\u06cc \u062d\u0648\u0627\u0644\u06c1 \u06a9\u06cc \u0645\u06cc\u0632<\/h2>\n<table style=\"min-width:378px\">\n<colgroup>\n<col style=\"min-width:25px\"\/>\n<col style=\"width:80px\"\/>\n<col style=\"width:273px\"\/><\/colgroup>\n<tbody wp_automatic_readability=\"3\">\n<tr>\n<td>\n<p><strong>\u0634\u06cc\u0679<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u0634\u0646\u0627\u062e\u062a \u06a9\u0646\u0646\u062f\u06c1<\/strong><\/p>\n<\/td>\n<td>\n<p><strong>\u06a9\u06cc\u0633\u0632 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong><\/p>\n<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"4.5\">\n<td>\n<p><strong>\u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u0634\u06cc\u0679<\/strong><\/p>\n<\/td>\n<td>\n<p>\u0634\u06cc\u0679-03<\/p>\n<\/td>\n<td wp_automatic_readability=\"6\">\n<p>\u06a9\u0627\u0631\u0679 \u062f\u0631\u0627\u0632\u060c \u0622\u0631\u0688\u0631 \u06a9\u0627 \u062e\u0644\u0627\u0635\u06c1<\/p>\n<\/td>\n<\/tr>\n<tr wp_automatic_readability=\"4.5\">\n<td>\n<p><strong>\u0641\u0644\u0679\u0631 \u067e\u06cc\u0646\u0644 \u0634\u06cc\u0679<\/strong><\/p>\n<\/td>\n<td>\n<p>\u0634\u06cc\u0679-04<\/p>\n<\/td>\n<td wp_automatic_readability=\"6\">\n<p>\u067e\u0631\u0648\u0688\u06a9\u0679 \u0641\u0644\u0679\u0631\u0632\u060c \u0631\u06cc\u0641\u0627\u0626\u0646\u0645\u0646\u0679 \u067e\u06cc\u0646\u0644 \u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>\u06a9\u0633\u06cc \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<hr\/>\n<h2 id=\"heading-key-concepts-for-using-shadcn-sheet\">Shadcn \u0634\u06cc\u0679 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0644\u06cc\u062f\u06cc \u062a\u0635\u0648\u0631\u0627\u062a<\/h2>\n<ul wp_automatic_readability=\"17.5\">\n<li wp_automatic_readability=\"4\">\n<p><strong>\u062b\u0627\u0646\u0648\u06cc \u0648\u0631\u06a9 \u0641\u0644\u0648 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0634\u06cc\u0679\u0633 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u06cc\u06c1 \u0641\u0644\u0679\u0631\u0632\u060c \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679\u0633\u060c \u0633\u06cc\u0679\u0646\u06af\u0632\u060c \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0645\u06cc\u0646\u0648 \u0627\u0648\u0631 \u0641\u0627\u0631\u0645\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u062b\u0627\u0644\u06cc \u06c1\u06d2 \u062c\u0648 \u0645\u0631\u06a9\u0632\u06cc \u0635\u0641\u062d\u06c1 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u062f\u0627\u062e\u0644\u062a \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<\/li>\n<li wp_automatic_readability=\"2\">\n<p><strong>\u0627\u067e\u0646\u06cc \u062a\u0631\u062a\u06cc\u0628 \u06a9\u0648 \u0645\u0633\u062a\u0642\u0644 \u0631\u06a9\u06be\u06cc\u06ba\u06d4<\/strong> \u0641\u06a9\u0633\u0688 \u06c1\u06cc\u0688\u0631\u060c \u0633\u06a9\u0631\u0648\u0644 \u0642\u0627\u0628\u0644 \u0645\u0648\u0627\u062f \u06a9\u0627 \u0639\u0644\u0627\u0642\u06c1 (<code>flex-1 overflow-y-auto<\/code>) \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0686\u0633\u067e\u0627\u06ba \u0641\u0648\u0679\u0631 \u062a\u0627\u06a9\u06c1 \u0622\u067e \u06a9\u0627 \u06a9\u0627\u0645 \u0637\u0648\u06cc\u0644 \u0645\u0648\u0627\u062f \u0645\u06cc\u06ba \u0628\u06be\u06cc \u0646\u0638\u0631 \u0622\u062a\u0627 \u0631\u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li wp_automatic_readability=\"2\">\n<p><strong>\u0631\u06cc\u0627\u0633\u062a \u0633\u06d2 UI \u0642\u062f\u0631\u06cc\u06ba \u0627\u062e\u0630 \u06a9\u0631\u0646\u0627:<\/strong> \u0634\u0645\u0627\u0631\u060c \u0679\u0648\u0679\u0644\u060c \u0627\u0648\u0631 \u0628\u06cc\u062c\u0632 (\u062c\u06cc\u0633\u06d2 \u0641\u0639\u0627\u0644 \u0641\u0644\u0679\u0631\u0632 \u06cc\u0627 \u06a9\u0627\u0631\u0679 \u0622\u0626\u0679\u0645\u0632) \u06a9\u0627 \u062d\u0633\u0627\u0628 \u0627\u0644\u06af \u0633\u06d2 \u0630\u062e\u06cc\u0631\u06c1 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0631\u06cc\u0627\u0633\u062a \u0633\u06d2 \u06a9\u06cc\u0627 \u062c\u0627\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<\/li>\n<li wp_automatic_readability=\"3\">\n<p><strong>\u062c\u0628 \u0622\u067e \u06a9\u0627\u0645 \u06a9\u0631 \u0644\u06cc\u06ba \u062a\u0648 \u0634\u06cc\u0679 \u0628\u0646\u062f \u06a9\u0631 \u062f\u06cc\u06ba\u06d4<\/strong> \u06a9\u0627\u0645 \u062c\u06cc\u0633\u06d2 <strong>\u0641\u0644\u0679\u0631 \u0644\u06af\u0627\u0626\u06cc\u06ba\u06d4<\/strong>\u060c <strong>\u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba<\/strong>\u06cc\u0627 <strong>\u0645\u0639\u0627\u0626\u0646\u06c1<\/strong> \u0646\u0634\u0633\u062a \u0628\u0646\u062f \u06c1\u0648\u0646\u06cc \u0686\u0627\u06c1\u06cc\u06d2\u06d4 \u06a9\u0627\u0645 \u062c\u06cc\u0633\u06d2 <strong>\u0641\u0644\u0679\u0631 \u0635\u0627\u0641 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u06cc\u0627 <strong>\u0627\u0633\u06d2 \u0648\u0627\u067e\u0633 \u0631\u06a9\u06be\u0648<\/strong> \u0627\u0633\u06d2 \u06a9\u06be\u0644\u0627 \u0631\u06a9\u06be\u0627 \u062c\u0627\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 \u062a\u0627\u06a9\u06c1 \u0635\u0627\u0631\u0641\u06cc\u0646 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u06a9\u0631\u062a\u06d2 \u0631\u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li wp_automatic_readability=\"4\">\n<p><strong>\u0635\u062d\u06cc\u062d \u0631\u06cc\u0627\u0633\u062a\u06cc \u0688\u06be\u0627\u0646\u0686\u06c1 \u06a9\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u0645\u062a\u0639\u062f\u062f \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u06d2 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a (\u062c\u06cc\u0633\u06d2 \u0632\u0645\u0631\u06c1 \u06cc\u0627 \u062f\u0633\u062a\u06cc\u0627\u0628\u06cc)\u060c \u0648\u0627\u062d\u062f \u0642\u062f\u0631 (\u06cc\u0627 <code>null<\/code>) \u0648\u0627\u062d\u062f \u0645\u0646\u062a\u062e\u0628 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a (\u062c\u06cc\u0633\u06d2 \u062f\u0631\u062c\u06c1 \u0628\u0646\u062f\u06cc) \u0627\u0648\u0631 \u062f\u0648 \u0642\u062f\u0631 \u0648\u0627\u0644\u06cc \u0635\u0641\u06cc\u06ba (<code>[min, max]<\/code>) \u0631\u06cc\u0646\u062c \u0641\u0644\u0679\u0631\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062c\u06cc\u0633\u06d2 \u0642\u06cc\u0645\u062a\u06d4<\/p>\n<\/li>\n<li wp_automatic_readability=\"2\">\n<p><strong>\u0627\u067e\u0646\u06d2 \u06a9\u0627\u0645\u0648\u06ba \u06a9\u0648 \u0622\u0633\u0627\u0646\u06cc \u0633\u06d2 \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc \u0631\u06a9\u06be\u06cc\u06ba:<\/strong> \u062f\u0631\u062c \u0630\u06cc\u0644 \u0628\u0646\u06cc\u0627\u062f\u06cc \u06a9\u0627\u0645\u0648\u06ba \u06a9\u0648 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba: <strong>\u0644\u0627\u06af\u0648 \u06a9\u0631\u06cc\u06ba<\/strong>\u060c <strong>\u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba<\/strong>\u06cc\u0627 <strong>\u0645\u0639\u0627\u0626\u0646\u06c1<\/strong> \u0627\u0633\u06d2 \u0627\u067e\u0646\u06d2 \u0641\u0648\u0679\u0631 \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0622\u067e \u06a9\u0627 \u0645\u0648\u0627\u062f \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc \u0631\u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li wp_automatic_readability=\"3\">\n<p><strong>\u0633\u06cc\u0679 \u06a9\u0648 \u0627\u0648\u0648\u0631 \u0644\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u06af\u0631\u06cc\u0632 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u0627\u06af\u0631 \u0622\u067e \u06a9\u0627 \u0648\u0631\u06a9 \u0641\u0644\u0648 \u0644\u0645\u0628\u0627 \u06c1\u06d2\u060c \u0645\u062a\u0639\u062f\u062f \u0645\u0631\u0627\u062d\u0644 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u060c \u06cc\u0627 \u0635\u0627\u0631\u0641 \u06a9\u06cc \u067e\u0648\u0631\u06cc \u062a\u0648\u062c\u06c1 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u060c \u062a\u0648 \u0634\u06cc\u0679\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0648\u0642\u0641 \u0634\u062f\u06c1 \u0635\u0641\u062d\u0627\u062a \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u067e\u0631 \u063a\u0648\u0631 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-conclusion\">\u0646\u062a\u06cc\u062c\u06c1<\/h2>\n<p>\u0627\u0633 \u06af\u0627\u0626\u06cc\u0688 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0646\u06d2 \u062f\u0648 \u0639\u0645\u0644\u06cc Shadcn \u0634\u06cc\u0679 \u0627\u062c\u0632\u0627\u0621 \u0628\u0646\u0627\u0626\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u06cc\u06a9 \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0641\u0644\u0679\u0631 \u067e\u06cc\u0646\u0644\u060c \u0627\u0646 \u0646\u0645\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062c\u0648 \u0622\u067e \u0627\u06a9\u062b\u0631 React \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646\u0632 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u06af\u06d2\u06d4 \u0631\u0627\u0633\u062a\u06d2 \u0645\u06cc\u06ba\u060c \u06c1\u0645 \u0646\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u06a9\u06d2 \u0628\u06c1\u062a\u0631\u06cc\u0646 \u0637\u0631\u06cc\u0642\u0648\u06ba\u060c \u0631\u06cc\u0627\u0633\u062a\u06cc \u0627\u0646\u062a\u0638\u0627\u0645\u060c \u0627\u062e\u0630 \u06a9\u0631\u062f\u06c1 \u0627\u0642\u062f\u0627\u0631\u060c \u0627\u0648\u0631 \u062a\u0639\u0627\u0645\u0644 \u06a9\u06d2 \u0646\u0645\u0648\u0646\u0648\u06ba \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u06cc\u0627 \u062c\u0648 \u0634\u06cc\u0679\u0633 \u06a9\u0648 \u0628\u062f\u06cc\u06c1\u06cc \u0627\u0648\u0631 \u0642\u0627\u0628\u0644 \u0627\u0639\u062a\u0645\u0627\u062f \u0645\u062d\u0633\u0648\u0633 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1 \u0645\u062b\u0627\u0644\u06cc\u06ba \u0645\u062d\u0636 \u0645\u0638\u0627\u06c1\u0631\u0648\u06ba \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0633\u06cc\u0679\u0646\u06af \u067e\u06cc\u0646\u0632\u060c \u0645\u0648\u0628\u0627\u0626\u0644 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646\u060c \u0646\u0648\u0679\u06cc\u0641\u06a9\u06cc\u0634\u0646 \u067e\u06cc\u0646\u0644\u0632\u060c \u0627\u0648\u0631 \u0628\u06c1\u062a \u0633\u06d2 \u062f\u0648\u0633\u0631\u06d2 \u0633\u0627\u0626\u0688 \u067e\u06cc\u0646\u0644 \u062a\u062c\u0631\u0628\u0627\u062a \u06a9\u06cc \u062a\u0639\u0645\u06cc\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0628\u0646\u06cc\u0627\u062f \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0646 \u0646\u0645\u0648\u0646\u0648\u06ba \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0622\u067e \u06a9\u0648 Shadcn \u0634\u06cc\u0679 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 \u0628\u0646\u0627\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u062f\u062f \u0645\u0644\u06d2 \u06af\u06cc \u062c\u0648 \u0635\u0627\u0641\u060c \u062c\u0648\u0627\u0628\u062f\u06c1\u060c \u0627\u0648\u0631 \u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0628\u0691\u06be\u0646\u06d2 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u0645\u06cc\u06ba \u0622\u0633\u0627\u0646 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-resources\">\u0648\u0633\u0627\u0626\u0644<\/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>\u0633\u0644\u0627\u0626\u06cc\u0688 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0645\u06cc\u06ba \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba\u060c \u06c1\u0645 shadcn\/ui \u0627\u0648\u0631 \u0628\u0646\u06cc\u0627\u062f\u06cc UI \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648\u0632 \u06a9\u0648 Shadcn Space \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \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 \u0634\u06cc\u0679 \u06a9\u06d2 \u062f\u0648 \u0627\u062c\u0632\u0627\u0621 \u0628\u0646\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4 \u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba \u0634\u0627\u067e\u0646\u06af \u06a9\u0627\u0631\u0679 \u0634\u06cc\u0679 \u0645\u0642\u062f\u0627\u0631 \u06a9\u0627 \u06a9\u0646\u0679\u0631\u0648\u0644\u060c \u0622\u0626\u0679\u0645 \u06a9\u0648 \u06c1\u0679\u0627\u0646\u0627\u060c \u0627\u0648\u0631 \u0631\u06cc\u0626\u0644 \u0679\u0627\u0626\u0645 \u0633\u0628 \u0679\u0648\u0679\u0644\u0632 \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba\u06d4 \u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba \u0641\u0644\u0679\u0631 \u067e\u06cc\u0646\u0644 \u0634\u06cc\u0679 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"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-26708","post","type-post","status-publish","format-standard","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/26708","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/comments?post=26708"}],"version-history":[{"count":0,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/26708\/revisions"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media?parent=26708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/categories?post=26708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/tags?post=26708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}