{"id":25723,"date":"2026-06-22T21:25:19","date_gmt":"2026-06-22T21:25:19","guid":{"rendered":"https:\/\/umang.pk\/2026\/06\/22\/monorepo-%d9%85%db%8c%da%ba-%d8%aa%d9%88%d8%b3%db%8c%d8%b9-%d9%be%d8%b0%db%8c%d8%b1-%da%88%db%8c%d8%b2%d8%a7%d8%a6%d9%86-%da%a9%d8%a7-%d9%86%d8%b8%d8%a7%d9%85-%da%a9%db%8c%d8%b3%db%92-%d8%a8%d9%86\/"},"modified":"2026-06-22T21:25:20","modified_gmt":"2026-06-22T21:25:20","slug":"monorepo-%d9%85%db%8c%da%ba-%d8%aa%d9%88%d8%b3%db%8c%d8%b9-%d9%be%d8%b0%db%8c%d8%b1-%da%88%db%8c%d8%b2%d8%a7%d8%a6%d9%86-%da%a9%d8%a7-%d9%86%d8%b8%d8%a7%d9%85-%da%a9%db%8c%d8%b3%db%92-%d8%a8%d9%86","status":"publish","type":"post","link":"https:\/\/umang.pk\/ur\/2026\/06\/22\/monorepo-%d9%85%db%8c%da%ba-%d8%aa%d9%88%d8%b3%db%8c%d8%b9-%d9%be%d8%b0%db%8c%d8%b1-%da%88%db%8c%d8%b2%d8%a7%d8%a6%d9%86-%da%a9%d8%a7-%d9%86%d8%b8%d8%a7%d9%85-%da%a9%db%8c%d8%b3%db%92-%d8%a8%d9%86\/","title":{"rendered":"monorepo \u0645\u06cc\u06ba \u062a\u0648\u0633\u06cc\u0639 \u067e\u0630\u06cc\u0631 \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u0627 \u0646\u0638\u0627\u0645 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4"},"content":{"rendered":"\n<div id=\"\">\n<p>\u062c\u0628 \u0622\u067e \u06cc\u06c1 \u062c\u0645\u0644\u06c1 \u0633\u0646\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 &quot;\u0645\u0646\u0648\u0631\u06cc\u067e\u0648 \u0645\u0627\u062d\u0648\u0644\u06cc\u0627\u062a\u06cc \u0646\u0638\u0627\u0645 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0633\u06cc\u0628\u0644 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645&#8221;\u060c \u062a\u0648 \u0627\u06cc\u0633\u0627 \u0644\u06af \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0627\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062c\u0627\u0631\u062c\u0646 \u06a9\u0627 \u0627\u06cc\u06a9 \u06af\u0631\u0648\u067e \u062c\u0691\u0627 \u06c1\u0648\u0627 \u06c1\u06d2\u06d4 \u0622\u0626\u06cc\u06d2 \u0622\u0633\u0627\u0646 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><strong>\u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u06d2 \u0646\u0638\u0627\u0645<\/strong>: \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 (\u0628\u0679\u0646\u060c \u0627\u0646 \u067e\u0679\u060c \u0627\u0633\u0679\u0627\u0626\u0644\u060c \u0679\u0648\u06a9\u0646\u060c \u067e\u06cc\u0679\u0631\u0646)\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>monorepo<\/strong>: \u0627\u06cc\u06a9 \u0628\u0691\u0627 \u0630\u062e\u06cc\u0631\u06c1 \u062c\u06c1\u0627\u06ba \u0645\u062a\u0639\u062f\u062f \u067e\u06cc\u06a9\u062c\u0632 \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u0645\u0648\u062c\u0648\u062f \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0679\u0648\u0644\u0632 \u0627\u0648\u0631 \u0648\u0631\u06a9 \u0641\u0644\u0648 \u06a9\u0627 \u0627\u0634\u062a\u0631\u0627\u06a9 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0627\u0628 \u06cc\u06c1\u0627\u06ba \u062c\u0627\u062f\u0648 \u06c1\u06d2. \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0645\u0644\u0627\u0646\u06d2 \u0633\u06d2 \u0622\u067e \u06a9\u0648 \u0645\u0627\u0688\u06cc\u0648\u0644\u0631\u0679\u06cc\u060c \u0645\u0633\u062a\u0642\u0644 \u0645\u0632\u0627\u062c\u06cc \u0627\u0648\u0631 \u062a\u06cc\u0632 \u062a\u0631 \u062a\u0631\u0642\u06cc \u06a9\u06d2 \u0686\u06a9\u0631 \u0645\u0644\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0637\u0648\u0631 \u067e\u0631\u060c \u06cc\u06c1 \u0648\u06cc\u0628\u060c \u0645\u0648\u0628\u0627\u0626\u0644 \u0627\u0648\u0631 \u0645\u0632\u06cc\u062f \u067e\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0679\u06cc\u0645\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u062e\u0648\u0627\u0628\u06cc\u062f\u06c1 \u0633\u06cc\u0679 \u0627\u067e \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0622\u0631\u0679\u06cc\u06a9\u0644 \u0645\u06cc\u06ba\u060c \u0622\u067e React \u0627\u0648\u0631 Turborepo \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u0645\u0627\u0688\u06cc\u0648\u0644\u0631\u060c \u062a\u0648\u0633\u06cc\u0639 \u067e\u0630\u06cc\u0631 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u0627 \u0637\u0631\u06cc\u0642\u06c1 \u0633\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2\u060c \u062c\u0648 \u0645\u0627\u0626\u06cc\u06a9\u0631\u0648\u0633\u0627\u0641\u0679\u060c IBM \u0627\u0648\u0631 Shopify \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-table-of-contents\">\u0627\u0646\u0688\u06cc\u06a9\u0633<\/h2>\n<h2 id=\"heading-prerequisites\">\u0634\u0631\u0637\u06cc\u06ba<\/h2>\n<p>\u0622\u06af\u06d2 \u0628\u0691\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0622\u067e \u06a9\u0648 \u06a9\u0686\u06be \u0686\u06cc\u0632\u06cc\u06ba \u062a\u06cc\u0627\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4<\/p>\n<ul>\n<li>\n<p><strong>React \u0627\u0648\u0631 TypeScript \u06a9\u0627 \u0639\u0645\u0644\u06cc \u0639\u0644\u0645:<\/strong> \u0622\u067e \u06a9\u0648 \u0627\u062c\u0632\u0627\u0621 \u0628\u0646\u0627\u0646\u06d2 \u0627\u0648\u0631 \u0642\u062f\u06cc\u0645 \u0642\u0633\u0645 \u06a9\u06cc \u062a\u0634\u0631\u06cc\u062d\u0627\u062a \u067e\u0691\u06be\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u0627\u06c1\u0631 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u06a9\u0645\u0627\u0646\u0688 \u0644\u0627\u0626\u0646 \u06a9\u0627 \u0639\u0644\u0645:<\/strong> \u0622\u067e \u0686\u0644\u0627\u0626\u06cc\u06ba \u06af\u06d2 <code>npx<\/code>, <code>npm<\/code>\u0627\u0648\u0631 \u0627\u0633\u06cc \u0637\u0631\u062d \u06a9\u06d2 \u0627\u062d\u06a9\u0627\u0645\u0627\u062a \u0628\u06be\u0631 \u0645\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>Node.js \u0627\u0646\u0633\u0679\u0627\u0644 \u06c1\u0648\u0627 (v18 \u06cc\u0627 \u0627\u0633 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1)<\/strong>: \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4 <code>node -v<\/code>. \u0627\u06af\u0631 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u062a\u0648 \u0627\u0633\u06d2 nodejs.org \u0633\u06d2 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u067e\u06cc\u06a9\u06cc\u062c \u0645\u06cc\u0646\u06cc\u062c\u0631:<\/strong> \u0627\u0633 \u06af\u0627\u0626\u06cc\u0688 \u0645\u06cc\u06ba <code>npm<\/code>\u0644\u06cc\u06a9\u0646 <code>pnpm<\/code> \u06cc\u0627 <code>yarn<\/code> \u06cc\u06c1 \u0645\u0639\u0645\u0648\u0644\u06cc \u06a9\u0645\u0627\u0646\u0688 \u0679\u0648\u06cc\u06a9\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u06a9\u0648\u0688 \u0627\u06cc\u0688\u06cc\u0679\u0631<\/strong> \u0627\u067e\u0646\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0631\u06cc\u06ba (VS \u06a9\u0648\u0688 \u0628\u0691\u06d2 \u067e\u06cc\u0645\u0627\u0646\u06d2 \u067e\u0631 \u0679\u0627\u0626\u067e \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2)\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>monorepos \u06cc\u0627 Turborepo \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0633\u06cc \u067e\u06cc\u0634\u06af\u06cc \u062a\u062c\u0631\u0628\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u06c1\u0645 \u0646\u06d2 \u0634\u0631\u0648\u0639 \u0633\u06d2 \u0633\u0628 \u06a9\u0686\u06be \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-whos-already-doing-this\">\u06cc\u06c1 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06a9\u0648\u0646 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u061f<\/h2>\n<p>\u06cc\u06c1 \u067e\u062a\u06c1 \u0686\u0644\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0686\u06be \u0633\u0628 \u0633\u06d2 \u0628\u0691\u06d2 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645\u0632 \u062c\u0646 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u0622\u067e \u0646\u06d2 \u06a9\u0628\u06be\u06cc \u0633\u0646\u0627 \u06c1\u06d2 \u06a9\u06c1 monorepos \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0686\u0644\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<ol>\n<li>\n<p>Microsoft Fluent UI: \u0627\u06cc\u06a9 \u0645\u0644\u0679\u06cc \u067e\u06cc\u06a9\u062c \u0648\u0627\u062d\u062f \u0630\u062e\u06cc\u0631\u06c1 \u062c\u0648 React \u0627\u062c\u0632\u0627\u0621\u060c \u0648\u06cc\u0628 \u0627\u062c\u0632\u0627\u0621\u060c \u0627\u0648\u0631 \u06cc\u06c1\u0627\u06ba \u062a\u06a9 \u06a9\u06c1 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0679\u0648\u06a9\u0646 \u0628\u06be\u06cc \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>IBM \u06a9\u0627\u0631\u0628\u0646: \u06a9\u0626\u06cc \u067e\u06cc\u06a9\u062c\u0632\u060c \u0628\u0634\u0645\u0648\u0644: <code>@carbon\/ibm-products<\/code> \u0633\u06cc\u062f\u06be\u06d2 \u06a9\u0627\u0631\u0628\u0646 \u0645\u0648\u0646\u0648\u0631\u06cc\u067e\u0648 \u0633\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>Shopify Polaris: \u06a9\u06be\u0644\u06d2 \u0639\u0627\u0645 \u062e\u0648\u062f \u06a9\u0648 \u0627\u06cc\u06a9 monorepo\u060c \u067e\u06cc\u06a9\u06cc\u062c\u0646\u06af \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0627\u062c\u0632\u0627\u0621\u060c \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a\u060c \u0627\u0648\u0631 \u06cc\u06c1\u0627\u06ba \u062a\u06a9 \u06a9\u06c1 VS \u06a9\u0648\u0688 \u06a9\u06cc \u062a\u0648\u0633\u06cc\u0639 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0628\u06cc\u0627\u0646 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>Atlassian Atlaskit: \u0639\u0648\u0627\u0645\u06cc <code>@atlaskit\/*<\/code> \u067e\u06cc\u06a9\u062c\u0632 \u0627\u06cc\u06a9 \u0628\u0691\u06d2 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc monorepo \u0633\u06d2 \u0634\u0627\u0626\u0639 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0645\u06cc\u0679\u0631\u06cc\u0644 UI (MUI): React \u0627\u062c\u0632\u0627\u0621\u060c \u0679\u0648\u0644\u0632 \u0627\u0648\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u0648 \u0645\u0631\u0628\u0648\u0637 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0648\u0627\u062d\u062f \u0630\u062e\u06cc\u0631\u06c1 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0644\u0686\u06a9\u062f\u0627\u0631 EUI: \u0633\u0646\u06af\u0644 \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc \u067e\u0628\u0644\u0634 \u0641\u0644\u0648 \u06a9\u06cc \u0628\u062d\u062b \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0648\u0627\u062d\u062f \u0630\u062e\u06cc\u0631\u06c1 \u067e\u0631 \u062a\u06cc\u0627\u0631 \u0627\u0648\u0631 \u062c\u0627\u0631\u06cc \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4<\/p>\n<\/li>\n<\/ol>\n<h2 id=\"heading-why-it-works\">\u06cc\u06c1 \u06a9\u06cc\u0648\u06ba \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/h2>\n<p>\u0627\u067e\u0646\u06d2 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u06a9\u06d2 \u062a\u0645\u0627\u0645 \u062d\u0635\u0648\u06ba \u06a9\u0648 \u0627\u06cc\u06a9 \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc \u0645\u06cc\u06ba \u0688\u0627\u0644\u0646\u06d2 \u0633\u06d2 \u06a9\u0686\u06be \u0645\u062e\u0635\u0648\u0635 \u0641\u0648\u0627\u0626\u062f \u062d\u0627\u0635\u0644 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0646 \u06a9\u0648 \u0627\u0633\u067e\u0644\u0679 \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc \u0633\u06cc\u0679 \u0627\u067e \u0645\u06cc\u06ba \u0646\u0642\u0644 \u06a9\u0631\u0646\u0627 \u0645\u0634\u06a9\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0646 \u0645\u06cc\u06ba \u0633\u06d2 \u06c1\u0631 \u0627\u06cc\u06a9 \u062f\u0648\u0633\u0631\u06d2 \u06a9\u0648 \u062a\u0642\u0648\u06cc\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u062c\u0648 \u0679\u06cc\u0645\u06cc\u06ba \u0627\u0646 \u0646\u0645\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0627\u067e\u0646\u0627\u062a\u06cc \u06c1\u06cc\u06ba \u0648\u06c1 \u0634\u0627\u0630 \u0648 \u0646\u0627\u062f\u0631 \u06c1\u06cc \u0648\u0627\u067e\u0633 \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1\u0627\u06ba \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<ul>\n<li>\n<p><strong>\u0645\u0633\u062a\u0642\u0644 \u0645\u0632\u0627\u062c\u06cc<\/strong>: \u0679\u0648\u06a9\u0646\u0632\u060c \u0633\u0679\u0627\u0626\u0644\u0632\u060c \u0627\u0648\u0631 \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648\u0632 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0628\u06cc\u0627\u0646 \u06a9\u06cc\u06d2 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u06c1\u0631 \u062c\u06af\u06c1 \u0628\u06c1\u06c1 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u062a\u06cc\u0632 \u062a\u06a9\u0631\u0627\u0631<\/strong>: \u062c\u0628 \u06c1\u0645 \u0628\u0679\u0646 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0628\u06af \u06a9\u0648 \u0679\u06be\u06cc\u06a9 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0627\u067e \u0688\u06cc\u0679 \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0645\u0648\u0628\u0627\u0626\u0644\u060c \u0688\u06cc\u0633\u06a9 \u0679\u0627\u067e \u0627\u0648\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u067e\u0631 \u0644\u0627\u06af\u0648 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u06cc\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u0634\u062a\u0631\u0627\u06a9 \u06a9\u06d2 \u0627\u0648\u0632\u0627\u0631<\/strong>: \u0644\u0646\u0679\u0646\u06af\u060c \u0679\u06cc\u0633\u0679\u0646\u06af\u060c CI \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u06a9\u0648 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0648\u0631\u06a9 \u0641\u0644\u0648 \u06a9\u0648 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0627\u0631\u06cc \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u062a\u0645\u0627\u0645 \u067e\u06cc\u06a9\u06cc\u062c\u0632 \u067e\u0631 \u0644\u0627\u06af\u0648 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0648\u0631\u0698\u0646 \u06a9\u0646\u0679\u0631\u0648\u0644<\/strong>: Changesets \u06cc\u0627 Lerna \u062c\u06cc\u0633\u06d2 \u0679\u0648\u0644\u0632 \u0622\u067e \u06a9\u0648 \u0633\u06cc\u062f\u06be \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0622\u0632\u0627\u062f\u0627\u0646\u06c1 \u0637\u0648\u0631 \u067e\u0631 \u067e\u06cc\u06a9\u062c\u0632 \u062c\u0627\u0631\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u06a9\u0631\u0627\u0633 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u0644\u0686\u06a9<\/strong>: \u0648\u06c1\u06cc \u0628\u0644\u0688\u0646\u06af \u0628\u0644\u0627\u06a9\u0633 React \u0648\u06cc\u0628 \u0627\u06cc\u067e\u0633\u060c React Native\u060c Electron apps\u060c SDKs \u0627\u0648\u0631 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u06cc \u0633\u0627\u0626\u0679\u0633 \u06a9\u0648 \u0637\u0627\u0642\u062a \u062f\u06d2 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-think-of-it-like-a-ladder\">\u0627\u0633\u06d2 \u0633\u06cc\u0691\u06be\u06cc \u06a9\u06cc \u0637\u0631\u062d \u0633\u0648\u0686\u0648 <\/h2>\n<p>monorepo \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u0627 \u0633\u0628 \u0633\u06d2 \u0635\u0627\u0641 \u0637\u0631\u06cc\u0642\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0627\u0633\u06d2 \u0627\u0633\u0679\u06cc\u06a9 \u0634\u062f\u06c1 \u062a\u06c1\u0648\u06ba \u06a9\u06cc \u0627\u06cc\u06a9 \u0633\u06cc\u0631\u06cc\u0632 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u062f\u06cc\u06a9\u06be\u0627 \u062c\u0627\u0626\u06d2\u06d4 \u06c1\u0631 \u067e\u0631\u062a \u0627\u0633 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u06a9\u06cc \u067e\u0631\u062a \u067e\u0631 \u0628\u0646\u062a\u06cc \u06c1\u06d2\u060c \u0627\u0648\u0631 \u06c1\u0631 \u067e\u0631\u062a \u06a9\u0627 \u0627\u06cc\u06a9 \u0648\u0627\u0636\u062d \u06a9\u0627\u0645 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u067e\u06cc\u06a9\u062c\u0648\u06ba \u06a9\u06d2 \u062f\u0631\u0645\u06cc\u0627\u0646 \u062a\u0639\u0644\u0642\u0627\u062a \u0642\u0627\u0628\u0644 \u0642\u06cc\u0627\u0633 \u06c1\u06cc\u06ba\u060c \u0646\u0626\u06d2 \u0634\u0631\u0627\u06a9\u062a \u062f\u0627\u0631\u0648\u06ba \u06a9\u0648 \u062a\u06cc\u0632\u06cc \u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u0639\u0646\u06cc\u060c \u0679\u0648\u06a9\u0646 \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648\u0632 \u0645\u06cc\u06ba \u0628\u06c1\u06c1 \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648 \u06a9\u0648 \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u06ba \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0644\u06d2 \u0622\u0624\u0679 \u06a9\u0648 \u0627\u0633\u06a9\u0631\u06cc\u0646\u0648\u06ba \u0645\u06cc\u06ba \u062c\u0645\u0639 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0646\u06cc\u0686\u06d2 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u062e\u0627\u06a9\u06c1 \u0627\u0633 \u0627\u0633\u0679\u06cc\u06a9 \u06a9\u06cc \u0628\u0635\u0631\u06cc \u0646\u0645\u0627\u0626\u0646\u062f\u06af\u06cc \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0628\u0646\u06cc\u0627\u062f \u06c1\u06d2: <code>primitives<\/code> (\u0679\u0648\u06a9\u0646\u060c \u0627\u0646\u062f\u0627\u0632)<\/p>\n<p>\u0645\u0632\u06cc\u062f: <code>plugins<\/code> (\u06cc\u0648\u0679\u06cc\u0644\u0679\u06cc \u0627\u0633\u0633\u0679\u0646\u0679)\u06d4<\/p>\n<p>\u067e\u06be\u0631 \u0622\u0624 <code>layouts<\/code>\u067e\u0644\u06af \u0627\u0646 + \u067e\u0631\u0627\u0626\u0645\u06cc\u0679\u0648\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u067e\u06be\u0631 <code>screens<\/code>\u062a\u0631\u062a\u06cc\u0628 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u062e\u0631 \u06a9\u0627\u0631 <code>navigators<\/code> \u0627\u0633\u06a9\u0631\u06cc\u0646\u0648\u06ba \u06a9\u0648 \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u0628\u0627\u0646\u062f\u06be\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u0648\u067e\u0631: \u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u067e\u06cc\u06a9\u06cc\u062c \u0627\u0648\u0631 \u0628\u0648\u0645 \u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u062a\u06cc \u06c1\u06d2! UI \u0645\u0627\u062d\u0648\u0644\u06cc\u0627\u062a\u06cc \u0627\u062c\u0646\u0627\u0633\u0679\u06a9 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-the-same-design-system-everywhere\">\u06c1\u0631 \u062c\u06af\u06c1 \u0627\u06cc\u06a9 \u06c1\u06cc \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u0627 \u0646\u0638\u0627\u0645<\/h2>\n<p>\u0627\u0633 \u0633\u06cc\u0691\u06be\u06cc \u06a9\u0627 \u0627\u0635\u0644 \u0641\u0627\u0626\u062f\u06c1 \u06cc\u06c1 \u06c1\u06d2 \u06a9\u06c1 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062c\u0628 \u0622\u067e \u0627\u0633 \u067e\u0631 \u0686\u0691\u06be \u062c\u0627\u0626\u06cc\u06ba \u062a\u0648 \u0622\u067e \u062a\u0645\u0627\u0645 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645\u0632 \u067e\u0631 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0622\u067e \u06a9\u0627 <code>primitives<\/code> \u067e\u06cc\u06a9\u06cc\u062c\u0632 \u06a9\u0648 \u0648\u06cc\u0628 \u0627\u06cc\u067e\u060c \u0631\u06cc \u0627\u06cc\u06a9\u0679 \u0645\u0642\u0627\u0645\u06cc \u0645\u0648\u0628\u0627\u0626\u0644 \u0627\u06cc\u067e\u060c \u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646 \u0688\u06cc\u0633\u06a9 \u0679\u0627\u067e \u0627\u06cc\u067e\u060c \u06cc\u0627 \u062f\u0633\u062a\u0627\u0648\u06cc\u0632\u0627\u062a \u06a9\u06cc \u0633\u0627\u0626\u0679 \u0645\u06cc\u06ba \u06c1\u0631 \u0645\u0627\u062d\u0648\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0644\u06a9\u06be\u06d2 \u0628\u063a\u06cc\u0631 \u067e\u06cc\u0634 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0646\u06cc\u0686\u06d2 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u062e\u0627\u06a9\u06c1 \u062a\u06cc\u0646 \u0645\u062e\u062a\u0644\u0641 \u0627\u06cc\u067e \u06a9\u06cc \u0627\u0642\u0633\u0627\u0645 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u06cc \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u06a9\u0648 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u06c1\u0631 \u0645\u0627\u062d\u0648\u0644 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u06d2 \u067e\u06cc\u06a9\u062c\u0648\u06ba \u06a9\u0648 \u06a9\u06be\u06cc\u0646\u0686\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0637\u0648\u0631 \u067e\u0631 \u0645\u0633\u062a\u0642\u0644 \u0637\u0631\u0632\u060c \u0637\u0631\u0632 \u0639\u0645\u0644 \u0627\u0648\u0631 \u0631\u0633\u0627\u0626\u06cc \u062d\u0627\u0635\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/06\/1782163519_216_monorepo-\u0645\u06cc\u06ba-\u062a\u0648\u0633\u06cc\u0639-\u067e\u0630\u06cc\u0631-\u0688\u06cc\u0632\u0627\u0626\u0646-\u06a9\u0627-\u0646\u0638\u0627\u0645-\u06a9\u06cc\u0633\u06d2-\u0628\u0646\u0627\u06cc\u0627-\u062c\u0627\u0626\u06d2\u06d4.png\" alt=\"\u0627\u06cc\u06a9 \u06c1\u06cc \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u0627\u06cc\u06a9 \u06c1\u06cc \u062f\u0631\u0622\u0645\u062f \u0633\u06d2 \u062a\u06cc\u0646 \u0645\u062e\u062a\u0644\u0641 \u0627\u06cc\u067e\u0633 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: \u0622\u067e \u06a9\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0648\u06cc\u0628 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u060c \u0627\u0644\u06cc\u06a9\u0679\u0631\u0627\u0646 \u0637\u0631\u0632 \u06a9\u06cc \u0648\u0646\u0688\u0648 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0688\u06cc\u0633\u06a9 \u0679\u0627\u067e \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646\u060c \u0627\u0648\u0631 \u0622\u067e \u06a9\u06d2 \u0641\u0648\u0646 \u06a9\u06cc \u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u0627\u06cc\u06a9 \u0645\u0648\u0628\u0627\u0626\u0644 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u06d4 \u06c1\u0631 \u0627\u06cc\u067e \u0642\u062f\u06cc\u0645 \u0627\u0648\u0631 \u0679\u0648\u06a9\u0646\u0632 \u06a9\u06d2 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u067e\u06cc\u06a9\u06cc\u062c \u0633\u06d2 \u06a9\u06be\u06cc\u0646\u0686\u062a\u06cc \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0628\u0679\u0646\u060c \u0646\u0648\u0639 \u0679\u0627\u0626\u067e\u060c \u0627\u0648\u0631 \u0648\u0642\u0641\u06c1 \u06a9\u0627\u0631\u06cc \u06c1\u0631 \u062c\u06af\u06c1 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u06cc \u0646\u0638\u0631 \u0622\u062a\u06cc \u06c1\u06d2 \u0627\u0648\u0631 \u0628\u0631\u062a\u0627\u0624 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4\" style=\"display:block;margin:0 auto\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<p>\u0686\u0627\u06c1\u06d2 \u0648\u06cc\u0628 \u06c1\u0648\u060c \u0688\u06cc\u0633\u06a9 \u0679\u0627\u067e\u060c \u06cc\u0627 \u0645\u0648\u0628\u0627\u0626\u0644\u060c \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u06d2 \u0646\u0638\u0627\u0645 \u0627\u06cc\u06a9 \u06c1\u06cc \u0633\u0637\u062d \u067e\u0631 \u0627\u0679\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-should-you-go-monorepo\">\u06a9\u06cc\u0627 \u0645\u062c\u06be\u06d2 \u0645\u0648\u0646\u0648\u0631\u067e\u0648 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062c\u0627\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u061f<\/h2>\n<p>\u06c1\u0631 \u0679\u06cc\u0645 \u06a9\u0648 \u0627\u0633 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0644\u06cc\u06a9\u0646 \u0627\u06af\u0631 \u0622\u067e \u0627\u06cc\u06a9 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0627\u06cc\u067e\u0633 \u0688\u06cc\u0644\u06cc\u0648\u0631 \u06a9\u0631\u0646\u06d2\u060c \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645\u0632 \u067e\u0631 \u0645\u0633\u062a\u0642\u0644 \u0645\u0632\u0627\u062c\u06cc \u06a9\u0648 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u0646\u06d2\u060c \u0627\u0648\u0631 \u0628\u06c1\u062a \u0633\u06d2 \u062a\u0639\u0627\u0648\u0646 \u06a9\u0646\u0646\u062f\u06af\u0627\u0646 \u06a9\u06cc \u0645\u062f\u062f \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u0628\u0646\u0627 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u0627\u06cc\u06a9 monorepo \u0627\u06cc\u06a9 \u0628\u0632 \u0648\u0631\u0688 \u06a9\u0645 \u0627\u0648\u0631 \u0633\u0646\u0679\u06cc \u0633\u06cc\u0648\u0631 \u0632\u06cc\u0627\u062f\u06c1 \u0628\u0646 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-when-a-monorepo-is-not-the-right-fit\">\u062c\u0628 \u0627\u06cc\u06a9 monorepo \u0622\u067e \u06a9\u06d2 \u0644\u0626\u06d2 \u0635\u062d\u06cc\u062d \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/h2>\n<p>Monorepos \u0628\u0639\u0636 \u0627\u0648\u0642\u0627\u062a \u062f\u0648\u0633\u0631\u06cc \u0628\u062d\u062b\u0648\u06ba \u0645\u06cc\u06ba \u0627\u0644\u062c\u06be \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0645\u06cc\u06ba \u067e\u06c1\u0644\u06d2 \u0627\u0646 \u06a9\u06cc \u0645\u062e\u062a\u0635\u0631 \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u0648\u06ba \u06af\u0627\u06d4 &quot;monorepo \u0628\u0645\u0642\u0627\u0628\u0644\u06c1 polyrepo&#8221; \u0633\u0648\u0627\u0644 \u06cc\u06c1 \u06c1\u06d2: <strong>~ \u0646\u06c1\u06cc\u06ba<\/strong> &quot;\u0645\u0648\u0646\u0648\u0644\u06cc\u062a\u06be \u0628\u0645\u0642\u0627\u0628\u0644\u06c1 \u0645\u0627\u0626\u06cc\u06a9\u0631\u0648 \u0633\u0631\u0648\u0633\u0632&#8221; \u0633\u0648\u0627\u0644 \u062c\u06cc\u0633\u0627 \u06c1\u06cc\u06d4 \u0622\u067e \u0645\u06a9\u0645\u0644 \u0637\u0648\u0631 \u067e\u0631 \u0645\u0627\u0626\u06cc\u06a9\u0631\u0648 \u0633\u0631\u0648\u0633\u0632 \u06a9\u0648 \u0645\u0646\u0648\u0631\u067e\u0648 \u067e\u0631 \u0686\u0644\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba (\u06af\u0648\u06af\u0644 \u0627\u0648\u0631 \u0641\u06cc\u0633 \u0628\u06a9 \u06cc\u06c1 \u067e\u06cc\u0645\u0627\u0646\u06d2 \u067e\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba)\u06d4<\/p>\n<p>\u062f\u0648\u0646\u0648\u06ba \u0627\u0646\u062a\u062e\u0627\u0628 \u0645\u062e\u062a\u0644\u0641 \u0645\u062d\u0648\u0631\u0648\u06ba \u067e\u0631 \u06c1\u06cc\u06ba\u06d4 monorepo \u0627\u0648\u0631 polyrepo <em>\u062c\u06c1\u0627\u06ba \u06a9\u0648\u0688 \u0631\u06c1\u062a\u0627 \u06c1\u06d2\u06d4<\/em>\u0645\u0648\u0646\u0648\u0644\u06cc\u062a\u06be \u0628\u0645\u0642\u0627\u0628\u0644\u06c1 \u0645\u0627\u0626\u06cc\u06a9\u0631\u0648 \u0633\u0631\u0648\u0633\u0632 <em>\u0631\u0646 \u0679\u0627\u0626\u0645 \u06a9\u06cc \u0642\u0633\u0645<\/em>.<\/p>\n<p>\u0627\u0633 \u06a9\u0648 \u0627\u06cc\u06a9 \u0637\u0631\u0641 \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u0648\u0626\u06d2\u060c \u06cc\u06c1\u0627\u06ba \u06a9\u0686\u06be \u0646\u0634\u0627\u0646\u06cc\u0627\u06ba \u06c1\u06cc\u06ba \u06a9\u06c1 \u0627\u06cc\u06a9 monorepo \u0622\u067e \u06a9\u06cc \u0635\u0648\u0631\u062a \u062d\u0627\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u06c1\u062a\u0631\u06cc\u0646 \u0641\u0679 \u0646\u06c1\u06cc\u06ba \u06c1\u0648 \u0633\u06a9\u062a\u0627:<\/p>\n<ul>\n<li>\n<p><strong>\u0622\u067e \u0627\u06cc\u06a9 \u0686\u06be\u0648\u0679\u06cc \u0679\u06cc\u0645 \u06c1\u06cc\u06ba \u062c\u0648 \u0627\u06cc\u06a9 \u067e\u0631\u0648\u0688\u06a9\u0679 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/strong> \u0627\u06cc\u06a9 \u06c1\u06cc \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc \u06a9\u0627 \u0679\u0648\u0644\u0646\u06af \u0627\u0648\u0648\u0631 \u06c1\u06cc\u0688 (\u0648\u0631\u06a9 \u0627\u0633\u067e\u06cc\u0633 \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646\u060c \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u06a9\u06cc \u062a\u0639\u0645\u06cc\u0631\u060c \u067e\u06cc\u06a9\u062c \u06a9\u06cc \u062d\u062f\u0648\u062f) \u0686\u06cc\u0632\u0648\u06ba \u06a9\u0648 \u0627\u0633 \u0633\u06d2 \u06a9\u06c1\u06cc\u06ba \u0632\u06cc\u0627\u062f\u06c1 \u0633\u0633\u062a \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0627\u0633 \u06a9\u06cc \u0645\u062f\u062f \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc\u0648\u06ba \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u06cc\u06a9 \u0648\u0627\u062d\u062f \u0631\u062f \u0639\u0645\u0644 \u0627\u06cc\u067e \u06a9\u0648 \u0634\u0627\u06cc\u062f \u0627\u0633 \u067e\u0631\u062a \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u067e\u06cc\u06a9\u062c\u0632 \u0645\u06cc\u06ba \u0628\u06c1\u062a \u0645\u062e\u062a\u0644\u0641 \u0631\u06cc\u0644\u06cc\u0632 \u0633\u0627\u0626\u06cc\u06a9\u0644 \u0627\u0648\u0631 \u0645\u062e\u062a\u0644\u0641 \u0627\u0633\u0679\u06cc\u06a9 \u06c1\u0648\u0644\u0688\u0631\u0632 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/strong> \u0627\u06af\u0631 \u06a9\u0648\u0688\u0628\u06cc\u0633 \u06a9\u06d2 \u062f\u0648 \u062d\u0635\u06d2 \u0627\u06cc\u0633\u06cc \u0679\u06cc\u0645\u0648\u06ba \u06a9\u06cc \u0645\u0644\u06a9\u06cc\u062a \u06c1\u06cc\u06ba \u062c\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u06c1\u062a \u0645\u062e\u062a\u0644\u0641 \u062a\u0639\u06cc\u0646\u0627\u062a\u06cc \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646\u0632\u060c \u06af\u0648\u0631\u0646\u0646\u0633\u060c \u06cc\u0627 \u0633\u06cc\u06a9\u06cc\u0648\u0631\u0679\u06cc \u067e\u0648\u0632\u06cc\u0634\u0646\u0632 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u060c \u062a\u0648 \u0639\u0644\u06cc\u062d\u062f\u06c1 \u0631\u06cc\u067e\u0648\u0632\u0679\u0631\u06cc\u0632 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0631\u06af\u0691 \u06a9\u0648 \u06a9\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0622\u067e monorepo \u0679\u0648\u0644\u0646\u06af \u0645\u06cc\u06ba \u0633\u0631\u0645\u0627\u06cc\u06c1 \u06a9\u0627\u0631\u06cc \u0646\u06c1\u06cc\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u06d2\u06d4<\/strong> Turborepo\u060c Nx\u060c \u0627\u0648\u0631 Changesets \u062c\u06cc\u0633\u06d2 \u0679\u0648\u0644\u0632 \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u0627\u0646 \u0645\u06cc\u06ba \u0633\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u0627 \u0648\u06a9\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u06cc \u0679\u06cc\u0645 \u0627\u0633\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0646\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0628\u0631\u0642\u0631\u0627\u0631 \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0648\u0642\u062a \u0646\u06c1\u06cc\u06ba \u0644\u06d2 \u0633\u06a9\u062a\u06cc \u06c1\u06d2\u060c \u062a\u0648 \u0627\u0633\u06d2 \u0646\u0642\u0635\u0627\u0646 \u06c1\u0648 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0622\u067e \u0627\u06cc\u0633\u06cc \u0632\u0628\u0627\u0646 \u06cc\u0627 \u0631\u0646 \u0679\u0627\u0626\u0645 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0631\u06c1\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0627\u0686\u06be\u06cc \u0637\u0631\u062d \u0633\u06d2 \u0634\u06cc\u0626\u0631 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc \u06af\u0626\u06cc \u06c1\u06d2\u06d4<\/strong> \u062c\u0628 \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u067e\u06cc\u06a9\u062c\u0632 \u0627\u06cc\u06a9 \u06c1\u06cc \u0679\u0648\u0644 \u0686\u06cc\u0646 \u0645\u06cc\u06ba \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 Monorepos \u0686\u0645\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0646\u0648\u0688\u060c \u06af\u0648\u060c \u0631\u0633\u0679\u060c \u0627\u0648\u0631 \u0627\u0632\u06af\u0631 \u06a9\u0648 \u0627\u06cc\u06a9 \u0630\u062e\u06cc\u0631\u06c1 \u0645\u06cc\u06ba \u0645\u0644\u0627\u0646\u0627 \u0645\u0645\u06a9\u0646 \u06c1\u06d2\u060c \u0644\u06cc\u06a9\u0646 \u0628\u0644\u0688 \u0679\u0648\u0644 \u06a9\u06cc \u06a9\u06c1\u0627\u0646\u06cc \u0632\u06cc\u0627\u062f\u06c1 \u0645\u0634\u06a9\u0644 \u06c1\u0648 \u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0633\u0646\u062c\u06cc\u062f\u06c1 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u0628\u0646\u0627\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0632\u06cc\u0627\u062f\u06c1 \u062a\u0631 \u0679\u06cc\u0645\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0627\u0646 \u0645\u06cc\u06ba \u0633\u06d2 \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0688\u06cc\u0644 \u0628\u0631\u06cc\u06a9\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 \u0644\u06cc\u06a9\u0646 \u0639\u06c1\u062f \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0686\u06cc\u0632\u0648\u06ba \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u0646\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-lets-build-our-design-system\">\u0622\u0626\u06cc\u06d2 \u0627\u06cc\u06a9 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n<h3 id=\"heading-create-your-turborepo-project\">\u0679\u0631\u0628\u0648\u0631\u067e\u0648 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h3>\n<p>\u0627\u06cc\u06a9 \u0646\u06cc\u0627 Turborepo \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0628\u0646\u0627 \u06a9\u0631 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4 \u06cc\u06c1 \u062a\u0648\u0633\u06cc\u0639 \u067e\u0630\u06cc\u0631 \u0645\u0648\u0646\u0648\u0631\u06cc\u067e\u0648 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0628\u06c1\u062a\u0631\u06cc\u0646 \u0628\u0646\u06cc\u0627\u062f \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-plaintext\"># Create a new Turborepo project\nnpx create-turbo@latest my-design-system\n\n# Navigate to the project\ncd my-design-system\n\n# Install dependencies\nnpm install\n<\/code><\/pre>\n<p>Turborepo \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u0648\u0631\u06a9 \u0627\u0633\u067e\u06cc\u0633 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2: <code>apps\/<\/code> \u0627\u0648\u0631 <code>packages\/<\/code> \u0641\u0648\u0644\u0688\u0631\u0632\u060c \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0679\u0648\u0644 \u0622\u0631\u06af\u0646\u0627\u0626\u0632\u06cc\u0634\u0646\u060c \u0627\u0648\u0631 \u0622\u067e\u0679\u0645\u0627\u0626\u0632\u0688 \u0628\u0644\u0688 \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646\u06d4<\/p>\n<h3 id=\"heading-design-your-package-structure\">\u067e\u06cc\u06a9\u06cc\u062c \u0688\u06be\u0627\u0646\u0686\u06c1 \u0688\u06cc\u0632\u0627\u0626\u0646<\/h3>\n<p>\u0627\u06af\u0644\u0627\u060c \u06c1\u0645 \u0627\u067e\u0646\u06d2 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u067e\u06cc\u06a9\u062c\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0645\u0646\u0637\u0642\u06cc \u062f\u0631\u062c\u06c1 \u0628\u0646\u062f\u06cc \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u062c\u06cc\u0633\u0627 \u06a9\u06c1 \u0627\u0648\u067e\u0631 \u0630\u06a9\u0631 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u060c \u0627\u0633\u06d2 \u0633\u06cc\u0691\u06be\u06cc \u06a9\u06cc \u0637\u0631\u062d \u0633\u0648\u0686\u06cc\u06ba\u06d4 \u06c1\u0631 \u0633\u0637\u062d \u0646\u06cc\u0686\u06d2 \u06a9\u06cc \u0633\u0637\u062d \u067e\u0631 \u0628\u0646\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-plaintext\">my-design-system\/\n\u251c\u2500\u2500 packages\/\n\u2502   \u251c\u2500\u2500 tokens\/          # Design tokens (colors, spacing, typography)\n\u2502   \u251c\u2500\u2500 primitives\/      # Base components (Button, Input, Card)\n\u2502   \u251c\u2500\u2500 layouts\/         # Layout components (Grid, Stack, Container)\n\u251c\u2500\u2500 apps\/\n\u2502   \u251c\u2500\u2500 web\/            # Example web app\n\u2502   \u2514\u2500\u2500 docs\/           # Documentation site\n\u2514\u2500\u2500 turbo.json          # Turborepo configuration\n<\/code><\/pre>\n<h4 id=\"heading-detailed-file-structure\">\u062a\u0641\u0635\u06cc\u0644\u06cc \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0688\u06be\u0627\u0646\u0686\u06c1<\/h4>\n<pre><code class=\"language-plaintext\">my-design-system\/\n\u251c\u2500\u2500 packages\/\n\u2502   \u251c\u2500\u2500 tokens\/\n\u2502   \u2502   \u251c\u2500\u2500 src\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 colors.ts\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 spacing.ts\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 typography.ts\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 index.ts\n\u2502   \u2502   \u251c\u2500\u2500 package.json\n\u2502   \u2502   \u2514\u2500\u2500 tsconfig.json\n\u2502   \u251c\u2500\u2500 primitives\/\n\u2502   \u2502   \u251c\u2500\u2500 src\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 Button\/\n\u2502   \u2502   \u2502   \u2502   \u2514\u2500\u2500 Button.tsx\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 Input\/\n\u2502   \u2502   \u2502   \u2502   \u2514\u2500\u2500 Input.tsx\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 index.ts\n\u2502   \u2502   \u251c\u2500\u2500 package.json\n\u2502   \u2502   \u2514\u2500\u2500 tsconfig.json\n\u2502   \u251c\u2500\u2500 layouts\/\n\u2502   \u2502   \u251c\u2500\u2500 src\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 Grid\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 Stack\/\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 index.ts\n\u2502   \u2502   \u2514\u2500\u2500 package.json\n\u251c\u2500\u2500 apps\/\n\u2502   \u251c\u2500\u2500 web\/\n\u2502   \u2502   \u251c\u2500\u2500 src\/\n\u2502   \u2502   \u2502   \u251c\u2500\u2500 App.tsx\n\u2502   \u2502   \u2502   \u2514\u2500\u2500 main.tsx\n\u2502   \u2502   \u251c\u2500\u2500 index.html\n\u2502   \u2502   \u2514\u2500\u2500 package.json\n\u2502   \u2514\u2500\u2500 docs\/\n\u2502       \u251c\u2500\u2500 src\/\n\u2502       \u2514\u2500\u2500 package.json\n\u251c\u2500\u2500 turbo.json\n\u251c\u2500\u2500 package.json\n\u2514\u2500\u2500 README.md\n<\/code><\/pre>\n<h3 id=\"heading-build-your-design-tokens-package\">\u0688\u06cc\u0632\u0627\u0626\u0646 \u0679\u0648\u06a9\u0646 \u067e\u06cc\u06a9\u062c \u0628\u0646\u0627\u0646\u0627<\/h3>\n<p>\u0628\u0646\u06cc\u0627\u062f\u06cc \u0628\u0627\u062a\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba: <strong>\u0688\u06cc\u0632\u0627\u0626\u0646 \u0679\u0648\u06a9\u0646<\/strong>. \u0679\u0648\u06a9\u0646\u0632 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u0645\u06cc\u06ba \u0633\u0628 \u0633\u06d2 \u0686\u06be\u0648\u0679\u06cc\u060c \u0633\u0628 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0627\u06a9\u0627\u0626\u06cc\u0627\u06ba \u06c1\u06cc\u06ba: \u0631\u0646\u06af \u06a9\u06cc \u0642\u062f\u0631\u06cc\u06ba\u060c \u0648\u0642\u0641\u06c1 \u06a9\u0627\u0631\u06cc \u06a9\u06cc \u062c\u06af\u06c1\u060c \u0641\u0648\u0646\u0679 \u06a9\u06d2 \u0633\u0627\u0626\u0632\u060c \u0628\u0627\u0631\u0688\u0631 \u0631\u06cc\u0688\u06cc\u060c \u0648\u063a\u06cc\u0631\u06c1\u06d4 \u06c1\u0627\u0631\u0688 \u06a9\u0648\u0688\u0646\u06af \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 <code>padding: 16px<\/code> \u06cc\u0627 <code>color: #3b82f6<\/code> \u06c1\u0631 \u062c\u06af\u06c1 \u0622\u067e \u0627\u0633 \u0637\u0631\u062d \u0679\u0648\u06a9\u0646 \u06a9\u0627 \u062d\u0648\u0627\u0644\u06c1 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba: <code>spacing.md<\/code> \u06cc\u0627 <code>colors.primary[500]<\/code>.<\/p>\n<p>\u0641\u0648\u0627\u0626\u062f \u0628\u06c1\u062a \u0632\u06cc\u0627\u062f\u06c1 \u06c1\u06cc\u06ba\u06d4<\/p>\n<ul>\n<li>\n<p><strong>\u0627\u06cc\u06a9 \u062c\u06af\u06c1 \u062c\u06c1\u0627\u06ba \u0622\u067e \u0642\u062f\u0631 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba:<\/strong> \u0679\u0648\u06a9\u0646 \u06a9\u0648 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u062a\u0645\u0627\u0645 \u0627\u062c\u0632\u0627\u0621 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0627\u067e \u0688\u06cc\u0679 \u06c1\u0648 \u062c\u0627\u0626\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u062a\u06be\u06cc\u0645 \u0633\u06cc\u0679 \u0627\u067e \u0622\u0633\u0627\u0646 \u06c1\u0648 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/strong> \u06a9\u06cc\u0627 \u0622\u067e \u0688\u0627\u0631\u06a9 \u0645\u0648\u0688 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u061f \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u06a9\u0648\u0646 \u0633\u0627 \u0679\u0648\u06a9\u0646 \u06a9\u0633 \u0642\u062f\u0631 \u06a9\u0648 \u062d\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u06a9\u0631\u0627\u0633 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645 \u06a9\u06cc \u0645\u0633\u062a\u0642\u0644 \u0645\u0632\u0627\u062c\u06cc:<\/strong> \u0648\u06c1\u06cc \u0679\u0648\u06a9\u0646 \u0646\u0627\u0645 \u0648\u06cc\u0628 \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633\u060c \u0688\u06cc\u0641\u0627\u0644\u0679 \u0627\u0633\u0679\u0627\u0626\u0644\u0632 \u0627\u0648\u0631 \u06cc\u06c1\u0627\u06ba \u062a\u06a9 \u06a9\u06c1 \u0641\u06af\u0645\u0627 \u0645\u06cc\u06ba \u0628\u06be\u06cc \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0679\u0648\u06a9\u0646 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u06a9\u0627 \u0688\u06cc \u0627\u06cc\u0646 \u0627\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0622\u0626\u06cc\u06d2 \u0627\u0646\u06c1\u06cc\u06ba \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-plaintext\"># Create the tokens package\nmkdir -p packages\/tokens\/src\ncd packages\/tokens\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u06cc\u06c1\u0627\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba: <code>packages\/tokens\/package.json<\/code>. \u06cc\u06c1 \u0641\u0627\u0626\u0644 \u067e\u06cc\u06a9\u06cc\u062c \u06a9\u06d2 \u0646\u0627\u0645\u060c \u0648\u0631\u0698\u0646\u060c \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06cc \u062a\u0639\u0645\u06cc\u0631\u060c \u0627\u0648\u0631 \u062a\u0631\u0642\u06cc \u06a9\u06d2 \u0627\u0646\u062d\u0635\u0627\u0631 \u06a9\u0627 \u0627\u0639\u0644\u0627\u0646 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u062c\u0648 \u0679\u0648\u06a9\u0646 \u0633\u0648\u0631\u0633 \u0641\u0627\u0626\u0644 \u06a9\u0648 \u0642\u0627\u0628\u0644 \u0627\u0634\u0627\u0639\u062a \u067e\u06cc\u06a9\u06cc\u062c \u0645\u06cc\u06ba \u0645\u0631\u062a\u0628 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062f\u0631\u06a9\u0627\u0631 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-json\">{\n  \"name\": \"@yourds\/tokens\",\n  \"version\": \"1.0.0\",\n  \"main\": \"dist\/index.js\",\n  \"types\": \"dist\/index.d.ts\",\n  \"scripts\": {\n    \"build\": \"tsup src\/index.ts --format cjs,esm --dts\",\n    \"dev\": \"tsup src\/index.ts --format cjs,esm --dts --watch\"\n  },\n  \"devDependencies\": {\n    \"tsup\": \"^8.0.0\",\n    \"typescript\": \"^5.0.0\"\n  }\n}\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u06cc\u06c1\u0627\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba: <code>packages\/tokens\/src\/colors.ts<\/code>. \u06cc\u06c1 \u0641\u0627\u0626\u0644 \u06c1\u06d2\u06d4 <strong>\u0631\u0646\u06af \u0679\u0648\u06a9\u0646<\/strong>: \u0627\u0631\u0627\u062f\u06d2 (\u0645\u06cc\u0646\u060c \u06af\u0631\u06d2) \u0627\u0648\u0631 \u0634\u06cc\u0688 (50 \u0633\u0628 \u0633\u06d2 \u06c1\u0644\u06a9\u0627\u060c 900 \u06af\u06c1\u0631\u0627 \u06c1\u06d2) \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u0627 \u06af\u06cc\u0627 \u0631\u0646\u06af \u06a9\u06cc \u0642\u062f\u0631\u0648\u06ba \u06a9\u0627 \u0627\u06cc\u06a9 \u0646\u0627\u0645\u0632\u062f \u067e\u06cc\u0644\u06cc\u0679\u06d4 \u06c1\u06cc\u06a9\u0633\u0627\u0688\u06cc\u0633\u06cc\u0645\u0644 \u06a9\u0648\u0688 \u06a9\u0648 \u06c1\u0627\u0631\u0688 \u06a9\u0648\u0688 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0627\u062c\u0632\u0627\u0621 \u0627\u0633\u06d2 \u0646\u0627\u0645 \u0633\u06d2 \u062d\u0648\u0627\u0644\u06c1 \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-javascript\">export const colors = {\n  primary: {\n    50: '#f0f9ff',\n    100: '#e0f2fe',\n    500: '#3b82f6',\n    600: '#2563eb',\n    900: '#1e3a8a'\n  },\n  gray: {\n    50: '#f9fafb',\n    100: '#f3f4f6',\n    500: '#6b7280',\n    900: '#111827'\n  }\n} as const;\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u06cc\u06c1\u0627\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba: <code>packages\/tokens\/src\/spacing.ts<\/code>. \u06cc\u06c1 \u0641\u0627\u0626\u0644 \u06c1\u06d2\u06d4 <strong>\u0648\u0642\u0641\u06c1 \u067e\u06cc\u0645\u0627\u0646\u06c1<\/strong>: \u0633\u0627\u0626\u0632 \u06a9\u06d2 \u0645\u0631\u0627\u062d\u0644 \u06a9\u0627 \u0627\u06cc\u06a9 \u0645\u0639\u06cc\u0627\u0631\u06cc \u0633\u06cc\u0679 \u062c\u0633\u06d2 \u062c\u0632\u0648 \u067e\u06cc\u0688\u0646\u06af\u060c \u0645\u0627\u0631\u062c\u0646\u060c \u0627\u0648\u0631 \u0627\u0633\u067e\u06cc\u0633\u0646\u06af \u0627\u0642\u062f\u0627\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06cc\u06a9 \u0645\u0642\u0631\u0631\u06c1 \u067e\u06cc\u0645\u0627\u0646\u06c1 (xs, sm, md, lg\u060c \u0648\u063a\u06cc\u0631\u06c1) \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0648\u0642\u0641\u06c1 \u06a9\u0627\u0631\u06cc \u0622\u067e \u06a9\u06d2 \u067e\u0648\u0631\u06d2 UI \u0645\u06cc\u06ba \u06cc\u06a9\u0633\u0627\u06ba \u0631\u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">export const spacing = {\n  xs: '0.25rem',    \/\/ 4px\n  sm: '0.5rem',     \/\/ 8px\n  md: '1rem',       \/\/ 16px\n  lg: '1.5rem',     \/\/ 24px\n  xl: '2rem',       \/\/ 32px\n  '2xl': '3rem'     \/\/ 48px\n} as const;\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u06cc\u06c1\u0627\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba: <code>packages\/tokens\/src\/typography.ts<\/code>. \u06cc\u06c1 \u0641\u0627\u0626\u0644 \u06c1\u06d2\u06d4 <strong>\u0646\u0648\u0639 \u0679\u0627\u0626\u067e \u0679\u0648\u06a9\u0646<\/strong>: \u0641\u0648\u0646\u0679 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u0627\u0648\u0631 \u0641\u0648\u0646\u0679 \u0648\u0632\u0646 \u062c\u0633\u06d2 \u062c\u0632\u0648 \u0627\u067e\u0646\u06d2 \u0645\u062a\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0648\u0642\u0641\u0648\u06ba \u06a9\u06cc \u0637\u0631\u062d\u060c \u0627\u0646 \u06a9\u0627 \u0646\u0627\u0645 \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u067e\u06a9\u0633\u0644 \u0648\u06cc\u0644\u06cc\u0648 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0642\u062f\u0645 \u0631\u06a9\u06be\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-typescript\">export const typography = {\n  fontSizes: {\n    xs: '0.75rem',\n    sm: '0.875rem',\n    base: '1rem',\n    lg: '1.125rem',\n    xl: '1.25rem',\n    '2xl': '1.5rem'\n  },\n  fontWeights: {\n    normal: 400,\n    medium: 500,\n    semibold: 600,\n    bold: 700\n  }\n} as const;\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u06cc\u06c1\u0627\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba: <code>packages\/tokens\/src\/index.ts<\/code>. \u06cc\u06c1 \u0641\u0627\u0626\u0644 \u06c1\u06d2\u06d4 <strong>\u067e\u0628\u0644\u06a9 \u0627\u0646\u0679\u0631\u06cc \u067e\u0648\u0627\u0626\u0646\u0679<\/strong> \u067e\u06cc\u06a9\u06cc\u062c: \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06c1\u0631 \u0686\u06cc\u0632 \u06a9\u0648 \u062a\u06cc\u0646 \u0679\u0648\u06a9\u0646 \u0641\u0627\u0626\u0644\u0648\u06ba \u0645\u06cc\u06ba \u0648\u0627\u067e\u0633 \u0627\u06cc\u06a9\u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u06cc\u06ba\u06d4 <code>import { colors, spacing, typography } from \"@yourds\/tokens\"<\/code> \u0627\u06cc\u06a9 \u0644\u0627\u0626\u0646 \u0645\u06cc\u06ba:<\/p>\n<pre><code class=\"language-typescript\">export * from '.\/colors';\nexport * from '.\/spacing';\nexport * from '.\/typography';\n<\/code><\/pre>\n<h3 id=\"heading-create-primitive-components\">\u0628\u0646\u06cc\u0627\u062f\u06cc \u0627\u062c\u0632\u0627\u0621 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h3>\n<p>\u0628\u0646\u06cc\u0627\u062f\u06cc \u0627\u062c\u0632\u0627\u0621 \u0628\u0646\u0627\u0626\u06cc\u06ba \u062c\u0648 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0679\u0648\u06a9\u0646 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-plaintext\"># Create the primitives package\nmkdir -p packages\/primitives\/src\ncd packages\/primitives\n\n# Install dependencies\nnpm install react react-dom\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u06cc\u06c1\u0627\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba: <code>packages\/primitives\/package.json<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n  \"name\": \"@yourds\/primitives\",\n  \"version\": \"1.0.0\",\n  \"main\": \"dist\/index.js\",\n  \"types\": \"dist\/index.d.ts\",\n  \"scripts\": {\n    \"build\": \"tsup src\/index.ts --format cjs,esm --dts --external react\",\n    \"dev\": \"tsup src\/index.ts --format cjs,esm --dts --external react --watch\"\n  },\n  \"peerDependencies\": {\n    \"react\": \"^18.0.0\",\n    \"react-dom\": \"^18.0.0\"\n  },\n  \"devDependencies\": {\n    \"@types\/react\": \"^18.0.0\",\n    \"tsup\": \"^8.0.0\",\n    \"typescript\": \"^5.0.0\"\n  }\n}\n<\/code><\/pre>\n<p>\u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u06cc\u06c1\u0627\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba: <code>packages\/primitives\/src\/Button\/Button.tsx<\/code>:<\/p>\n<pre><code class=\"language-typescript\">import React from 'react';\nimport { colors, spacing } from '@yourds\/tokens';\n\ninterface ButtonProps {\n  variant?: 'primary' | 'secondary' | 'outline';\n  size?: 'sm' | 'md' | 'lg';\n  children: React.ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n}\n\nexport const Button: React.FC<buttonprops> = ({\n  variant=\"primary\",\n  size=\"md\",\n  children,\n  disabled = false,\n  ...props\n}) => {\n  const baseStyles = {\n    border: 'none',\n    borderRadius: '0.5rem',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    fontWeight: 500,\n    transition: 'all 0.2s ease',\n    opacity: disabled ? 0.6 : 1\n  };\n\n  const variants = {\n    primary: {\n      backgroundColor: colors.primary[500],\n      color: 'white',\n      ':hover': { backgroundColor: colors.primary[600] }\n    },\n    secondary: {\n      backgroundColor: colors.gray[100],\n      color: colors.gray[900],\n      ':hover': { backgroundColor: colors.gray[200] }\n    },\n    outline: {\n      backgroundColor: 'transparent',\n      color: colors.primary[500],\n      border: `1px solid ${colors.primary[500]}`,\n      ':hover': { backgroundColor: colors.primary[50] }\n    }\n  };\n\n  const sizes = {\n    sm: { padding: `({spacing.xs} ){spacing.sm}`, fontSize: '0.875rem' },\n    md: { padding: `({spacing.sm} ){spacing.md}`, fontSize: '1rem' },\n    lg: { padding: `({spacing.md} ){spacing.lg}`, fontSize: '1.125rem' }\n  };\n\n  const buttonStyle = {\n    ...baseStyles,\n    ...variants[variant],\n    ...sizes[size]\n  };\n\n  return (\n    <button style=\"{buttonStyle}\" disabled=\"{disabled}\">\n      {children}\n    <\/button>\n  );\n};\n<\/buttonprops><\/code><\/pre>\n<p>\u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u06cc\u06c1\u0627\u06ba \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba: <code>packages\/primitives\/src\/index.ts<\/code>:<\/p>\n<pre><code class=\"language-typescript\">export { Button } from '.\/Button\/Button';\nexport type { ButtonProps } from '.\/Button\/Button';\n<\/code><\/pre>\n<h3 id=\"heading-configure-the-turborepo-pipeline\">\u0679\u0631\u0628\u0648\u0631\u067e\u0648 \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646<\/h3>\n<p>\u0627\u0628 \u0627\u067e\u0646\u06cc \u062a\u0639\u0645\u06cc\u0631\u0627\u062a\u06cc \u067e\u0627\u0626\u067e \u0644\u0627\u0626\u0646 \u062a\u0631\u062a\u06cc\u0628 \u062f\u06cc\u06ba\u06d4 <code>turbo.json<\/code> \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u067e\u06cc\u06a9\u062c\u0632 \u0635\u062d\u06cc\u062d \u062a\u0631\u062a\u06cc\u0628 \u0645\u06cc\u06ba \u0628\u0646\u0627\u0626\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-json\">{\n  \"$schema\": \"https:\/\/turbo.build\/schema.json\",\n  \"tasks\": {\n    \"build\": {\n      \"dependsOn\": [\"^build\"],\n      \"outputs\": [\"dist\/**\"]\n    },\n    \"dev\": {\n      \"cache\": false,\n      \"persistent\": true\n    },\n    \"lint\": {},\n    \"type-check\": {\n      \"dependsOn\": [\"^build\"]\n    }\n  }\n}\n<\/code><\/pre>\n<h3 id=\"heading-build-the-yourds-packages\">\u0628\u0644\u0688\u0646\u06af @yourds \u067e\u06cc\u06a9\u06cc\u062c<\/h3>\n<p>\u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0679\u0648\u06a9\u0646 \u0627\u0648\u0631 \u0628\u06cc\u0633 \u067e\u06cc\u06a9\u062c \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06c1\u0648 \u062c\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0627\u06af\u0644\u0627 \u0645\u0631\u062d\u0644\u06c1 \u0627\u0646\u06c1\u06cc\u06ba \u0627\u067e\u0646\u06cc \u0627\u06cc\u067e \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0631\u062a\u0628 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0686\u0644 \u0631\u06c1\u0627 \u06c1\u06d2 <code>npm install<\/code> \u062c\u0691 \u062a\u0645\u0627\u0645 \u0648\u0631\u06a9 \u0627\u0633\u067e\u06cc\u0633 \u0627\u0646\u062d\u0635\u0627\u0631 \u06a9\u0648 \u062d\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u060c \u0628\u0634\u0645\u0648\u0644 \u0627\u0646\u062f\u0631\u0648\u0646\u06cc \u0631\u0648\u0627\u0628\u0637\u06d4 <code>@yourds\/tokens<\/code> \u0627\u0648\u0631 <code>@yourds\/primitives<\/code>. \u067e\u06be\u0631 <code>npm run build<\/code> \u062a\u0645\u0627\u0645 \u067e\u06cc\u06a9\u062c\u0648\u06ba \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u062c\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u06c1\u0631 \u0627\u06cc\u06a9 \u06a9\u0648 \u0686\u0644\u0627\u0626\u06cc\u06ba\u06d4 <code>build<\/code> \u0679\u0631\u0628\u0648\u0631\u067e\u0648 \u0622\u0631\u0688\u0631 \u06a9\u0648 \u0635\u062d\u06cc\u062d \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u06a9\u0631\u067e\u0679 <code>tokens<\/code> \u067e\u06c1\u0644\u06d2 \u0645\u0631\u062a\u0628 \u06a9\u06cc\u0627 \u06af\u06cc\u0627\u06d4 <code>primitives<\/code> (\u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u0642\u062f\u06cc\u0645 \u0686\u06cc\u0632\u06cc\u06ba \u0679\u0648\u06a9\u0646 \u067e\u0631 \u0645\u0646\u062d\u0635\u0631 \u06c1\u06cc\u06ba)\u06d4 \u062d\u062a\u0645\u06cc <code>npm install<\/code> \u067e\u06be\u0631 \u0628\u0644\u0679 \u067e\u06cc\u06a9\u062c \u06a9\u0648 \u0631\u062c\u0633\u0679\u0631 \u06a9\u0631\u06cc\u06ba\u06d4 <code>apps\/web<\/code> \u0627\u06cc\u067e\u0633 \u06a9\u0648 \u0646\u0627\u0645 \u0633\u06d2 \u0627\u0645\u067e\u0648\u0631\u0679 \u06a9\u06cc\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-plaintext\"># Go to the root of the monorepo\nnpm install\n\n# Compile every package in the right order\nnpm run build\n\n# Register the built packages for the apps to use\nnpm install @yourds\/tokens @yourds\/primitives\n<\/code><\/pre>\n<p>\u0627\u06af\u0631 \u0633\u0628 \u06a9\u0686\u06be \u06a9\u0627\u0645\u06cc\u0627\u0628\u06cc \u0633\u06d2 \u0686\u0644\u062a\u0627 \u06c1\u06d2\u06d4 <code>dist\/<\/code> \u062f\u0648\u0646\u0648\u06ba \u0641\u0648\u0644\u0688\u0631\u0632 \u0627\u0646\u062f\u0631 <code>packages\/tokens<\/code> \u0627\u0648\u0631 <code>packages\/primitives<\/code>\u0645\u0631\u062a\u0628 \u06a9\u0631\u062f\u06c1 JavaScript \u0627\u0648\u0631 TypeScript \u0688\u06cc\u06a9\u0644\u0631\u06cc\u0634\u0646 \u0641\u0627\u0626\u0644\u0648\u06ba \u067e\u0631 \u0645\u0634\u062a\u0645\u0644 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-use-your-design-system-in-an-app\">\u0627\u067e\u0646\u06cc \u0627\u06cc\u067e\u0633 \u0645\u06cc\u06ba \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0627\u0628 \u0622\u067e \u06a9\u0633\u06cc \u0628\u06be\u06cc React \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u0645\u06cc\u06ba \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0630\u06cc\u0644 \u06a9\u06cc \u0645\u062b\u0627\u0644 \u06c1\u06d2\u06d4 <code>apps\/web\/src\/App.tsx<\/code> \u0627\u06cc\u06a9 \u0686\u06be\u0648\u0679\u06d2 \u06c1\u0648\u0645 \u067e\u06cc\u062c \u0648\u0627\u0644\u06cc \u0641\u0627\u0626\u0644 \u062c\u0648 \u0627\u06cc\u06a9 \u0633\u0627\u062a\u06be \u062f\u0648 \u0686\u06cc\u0632\u06cc\u06ba \u062f\u06a9\u06be\u0627\u062a\u06cc \u06c1\u06d2: \u0628\u0646\u06cc\u0627\u062f\u06cc \u0639\u0646\u0627\u0635\u0631 \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba ( <code>Button<\/code> \u062c\u0632\u0648) <code>@yourds\/primitives<\/code>\u0627\u0648\u0631 \u0679\u0648\u06a9\u0646 \u062d\u0627\u0635\u0644 \u06a9\u0631\u06cc\u06ba (<code>colors<\/code>, <code>spacing<\/code>) \u0628\u0631\u0627\u06c1 \u0631\u0627\u0633\u062a \u0633\u06d2 <code>@yourds\/tokens<\/code> \u0627\u0633\u0679\u0627\u0626\u0644 \u0645\u0639\u06cc\u0627\u0631\u06cc HTML \u0639\u0646\u0627\u0635\u0631 \u062c\u06cc\u0633\u06d2 \u0631\u06cc\u067e\u0631\u0632\u06d4 <code><\/p>\n<div> and the <code\/>.<\/p>\n<p>The result is a fully working page that uses your design system end-to-end, with zero hardcoded colors or spacing values:<\/p>\n<pre><code class=\"language-typescript\">import { Button } from \"@yourds\/primitives\";\nimport { colors, spacing } from \"@yourds\/tokens\";\n\nexport default function Home() {\n  return (\n    <p>\n      \n      <button variant=\"primary\" size=\"lg\">\n        Get Started\n      <\/button>\n      <button variant=\"outline\" size=\"md\">\n        Learn More\n      <\/button>\n    <\/p>\n  );\n}\n<\/code><\/pre>\n<p>\u0641\u0627\u0626\u0644 \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0627\u06cc\u067e \u06a9\u0648 \u0688\u06cc\u0648\u0644\u067e\u0645\u0646\u0679 \u0645\u0648\u0688 \u0645\u06cc\u06ba \u0686\u0644\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-plaintext\">npx turbo dev --filter=web\n<\/code><\/pre>\n<p>\u0622\u067e \u06c1\u0648\u0645 \u067e\u06cc\u062c \u06a9\u0648 \u0627\u0633 \u0637\u0631\u062d \u067e\u06cc\u0634 \u06a9\u0631\u062f\u06c1 \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <code>primary[500]<\/code> \u0628\u0644\u06cc\u0648 \u0679\u0627\u0626\u0679\u0644\u060c \u0628\u0648\u0644\u0688 <code>spacing.lg<\/code>\u0627\u0648\u0631 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u06cc\u06d2 \u06af\u0626\u06d2 \u062f\u0648 \u0628\u0679\u0646 \u06c1\u06cc\u06ba\u06d4 \u0679\u0648\u06a9\u0646 \u0645\u06cc\u06ba \u0622\u067e \u06a9\u06cc \u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc (\u062c\u06cc\u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0637\u06d2 \u0634\u062f\u06c1 \u0631\u0646\u06af \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u0627) \u0627\u06af\u0644\u06cc \u0628\u0627\u0631 \u062c\u0628 \u0622\u067e \u062f\u0648\u0628\u0627\u0631\u06c1 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0631\u06cc\u06ba \u06af\u06d2 \u062a\u0648 \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0627\u0633 \u0635\u0641\u062d\u06c1 \u067e\u0631 \u0638\u0627\u06c1\u0631 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<h2 id=\"heading-wrapping-up\">\u062e\u062a\u0645<\/h2>\n<p>\u0627\u06cc\u06a9 monorepo \u062c\u0627\u062f\u0648\u0626\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0627\u06cc\u06a9 \u0628\u06c1\u062a\u0631\u06cc\u0646 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u0646\u06c1\u06cc\u06ba \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u0622\u067e \u06a9\u0648 \u062f\u06cc\u062a\u0627 \u06c1\u06d2:<\/p>\n<ul>\n<li>\n<p>\u0627\u06cc\u06a9 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u062c\u06af\u06c1 \u062c\u06c1\u0627\u06ba \u06c1\u0631 \u0686\u06cc\u0632 \u0645\u0646\u0633\u0644\u06a9 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u062d\u0635\u0648\u06ba \u06a9\u0648 \u0622\u0632\u0627\u062f\u0627\u0646\u06c1 \u0637\u0648\u0631 \u067e\u0631 \u0634\u0627\u0626\u0639 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0686\u0633\u062a\u06cc<\/p>\n<\/li>\n<li>\n<p>\u0648\u0627\u0636\u062d\u06cc\u062a \u062c\u0648 \u0679\u06cc\u0645\u0648\u06ba \u0627\u0648\u0631 \u067e\u0644\u06cc\u0679 \u0641\u0627\u0631\u0645\u0632 \u0645\u06cc\u06ba \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u06cc \u067e\u06cc\u0645\u0627\u0626\u0634 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u06cc\u06c1 \u06a9\u0648\u0626\u06cc \u062a\u0639\u062c\u0628 \u06a9\u06cc \u0628\u0627\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u06a9\u06c1 \u062f\u0646\u06cc\u0627 \u06a9\u0627 \u0633\u0628 \u0633\u06d2 \u0628\u0691\u0627 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645 \u067e\u06c1\u0644\u06d2 \u06c1\u06cc \u0627\u06cc\u0633\u0627 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/p><\/div>\n<hr\/>\n<hr\/>\n<p data-test-label=\"social-row-cta\" class=\"social-row\">\n<p>    \u0627\u06af\u0631 \u0622\u067e \u06a9\u0648 \u06cc\u06c1 \u0645\u0636\u0645\u0648\u0646 \u0645\u0641\u06cc\u062f \u0644\u06af\u0627\u060c <button id=\"tweet-btn\" class=\"cta-button\" data-test-label=\"tweet-button\">\u0634\u06cc\u0626\u0631 \u06a9\u0631\u06cc\u06ba<\/button>.\n<\/p>\n<div class=\"learn-cta-row\" data-test-label=\"learn-cta-row\">\n<p>        \u0645\u0641\u062a \u0645\u06cc\u06ba \u06a9\u0648\u0688 \u0633\u06cc\u06a9\u06be\u06cc\u06ba\u06d4 freeCodeCamp \u06a9\u06d2 \u0627\u0648\u067e\u0646 \u0633\u0648\u0631\u0633 \u0646\u0635\u0627\u0628 \u0646\u06d2 40,000 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 \u0644\u0648\u06af\u0648\u06ba \u06a9\u0648 \u0628\u0637\u0648\u0631 \u0688\u06cc\u0648\u0644\u067e\u0631 \u0645\u0644\u0627\u0632\u0645\u062a\u06cc\u06ba \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u0646\u06d2 \u0645\u06cc\u06ba \u0645\u062f\u062f \u06a9\u06cc \u06c1\u06d2\u06d4 \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u0627\n    <\/p>\n<\/div>\n<p>                <\/code><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u062c\u0628 \u0622\u067e \u06cc\u06c1 \u062c\u0645\u0644\u06c1 \u0633\u0646\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 &quot;\u0645\u0646\u0648\u0631\u06cc\u067e\u0648 \u0645\u0627\u062d\u0648\u0644\u06cc\u0627\u062a\u06cc \u0646\u0638\u0627\u0645 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9\u0633\u0679\u06cc\u0646\u0633\u06cc\u0628\u0644 \u0688\u06cc\u0632\u0627\u0626\u0646 \u0633\u0633\u0679\u0645&#8221;\u060c \u062a\u0648 \u0627\u06cc\u0633\u0627 \u0644\u06af \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0627\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u062c\u0627\u0631\u062c\u0646 \u06a9\u0627 \u0627\u06cc\u06a9 \u06af\u0631\u0648\u067e \u062c\u0691\u0627 \u06c1\u0648\u0627 \u06c1\u06d2\u06d4 \u0622\u0626\u06cc\u06d2 \u0622\u0633\u0627\u0646 \u0628\u0646\u0627\u062a\u06d2 \u06c1\u06cc\u06ba: \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u06d2 \u0646\u0638\u0627\u0645: \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u06d2 \u0627\u062c\u0632\u0627\u0621 (\u0628\u0679\u0646\u060c \u0627\u0646 \u067e\u0679\u060c \u0627\u0633\u0679\u0627\u0626\u0644\u060c \u0679\u0648\u06a9\u0646\u060c \u067e\u06cc\u0679\u0631\u0646)\u06d4 monorepo: \u0627\u06cc\u06a9 \u0628\u0691\u0627 \u0630\u062e\u06cc\u0631\u06c1 \u062c\u06c1\u0627\u06ba \u0645\u062a\u0639\u062f\u062f \u067e\u06cc\u06a9\u062c\u0632 \u0627\u06cc\u06a9 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":25724,"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-25723","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/25723","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=25723"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/25723\/revisions"}],"predecessor-version":[{"id":25725,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/posts\/25723\/revisions\/25725"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media\/25724"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/media?parent=25723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/categories?post=25723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/ur\/wp-json\/wp\/v2\/tags?post=25723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}