{"id":10799,"date":"2026-03-06T06:52:00","date_gmt":"2026-03-05T22:52:00","guid":{"rendered":"https:\/\/infernews.com\/blog\/admin-dashboard-ui-built-with-shadcn-and-vite\/"},"modified":"2026-08-06T06:53:14","modified_gmt":"2026-08-05T22:53:14","slug":"admin-dashboard-ui-built-with-shadcn-and-vite","status":"publish","type":"post","link":"https:\/\/infernews.com\/blog\/admin-dashboard-ui-built-with-shadcn-and-vite\/","title":{"rendered":"shadcn-admin \u628a\u5f8c\u53f0\u4ecb\u9762\u505a\u6210\u53ef\u91cd\u7528\u57fa\u5e95"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/infernews.com\/blog\/wp-content\/uploads\/2026\/08\/shadcn-admin.jpg\" alt=\"alt text\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u505a\u7ba1\u7406\u5f8c\u53f0\u6700\u82b1\u6642\u9593\u7684\uff0c\u5f80\u5f80\u5514\u4fc2\u696d\u52d9\u908f\u8f2f\uff0c\u800c\u4fc2\u5074\u908a\u6b04\u3001\u641c\u5c0b\u3001\u6df1\u8272\u6a21\u5f0f\u540c\u624b\u6a5f\u7248\u6392\u7248\u5462\u985e\u53cd\u8986\u51fa\u73fe\u7684\u4ecb\u9762\u7d30\u7bc0\u3002shadcn-admin \u5c6c\u65bc<strong>\u5f8c\u53f0 UI \u9805\u76ee<\/strong>\uff0c\u7528 ShadcnUI\u3001Vite \u540c TanStack Router \u7d44\u6210\u4e00\u5957\u53ef\u91cd\u7528\u7684 dashboard \u4ecb\u9762\u96c6\u5408\uff0c\u76ee\u7684\u4fc2\u5e6b\u5718\u968a\u5feb\u5572\u6574\u7406\u51fa\u4e00\u81f4\u3001\u53ef\u7dad\u8b77\u7684\u7ba1\u7406\u754c\u9762\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5462\u500b\u9805\u76ee\u6700\u6709\u50f9\u503c\u7684\u5730\u65b9\uff0c\u5728\u65bc\u5b83\u523b\u610f\u5514\u5305\u88dd\u6210 starter template\u3002\u4f60\u62ce\u5230\u624b\u7684\u662f\u4e00\u5957\u5df2\u7d93\u92ea\u597d\u7d50\u69cb\u7684\u4ecb\u9762\u6a23\u677f\u8207\u5143\u4ef6\u7d44\u5408\uff0c\u5305\u62ec sidebar\u3001global search command\u300110+ pages\u3001light\/dark mode\u3001responsive \u540c accessible \u8a2d\u8a08\uff0c\u9069\u5408\u62ff\u4f86\u62c6\u4ef6\u3001\u91cd\u7d44\uff0c\u518d\u63a5\u4e0a\u81ea\u5df1\u5605\u8cc7\u6599\u6d41\u3001\u6b0a\u9650\u540c API\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b83\u540c\u4e00\u822c\u53ea\u5c55\u793a\u5e7e\u500b\u756b\u9762\u5605 UI showcase \u6709\u5206\u5225\uff0c\u56e0\u70ba README \u5df2\u7d93\u8b1b\u6e05\u695a\u90e8\u5206\u5143\u4ef6\u70ba\u5497 RTL support \u505a\u904e\u4fee\u6539\uff0c\u5514\u5efa\u8b70\u7121\u8166\u7528 Shadcn CLI \u8986\u84cb\u66f4\u65b0\u3002\u63db\u53e5\u8a71\u8aaa\uff0c\u5462\u500b\u9805\u76ee\u63db\u4f86\u7684\u662f\u8f03\u5b8c\u6574\u7684\u591a\u8a9e\u7cfb\u7248\u9762\u7167\u9867\u540c\u73fe\u6210\u5f8c\u53f0\u9aa8\u67b6\uff0c\u4f46\u4ee3\u50f9\u4fc2\u5f8c\u7e8c\u5347\u7d1a\u67d0\u4e9b\u5143\u4ef6\u6642\uff0c\u8981\u81ea\u5df1\u8655\u7406 merge\uff0c\u5514\u4fc2\u7d14\u7cb9\u4e00\u8def\u8ddf\u5b98\u65b9\u5143\u4ef6\u7248\u672c\u63a8\u9032\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5efa\u57fa\u65bc ShadcnUI\u3001TailwindCSS\u3001RadixUI\uff0c\u540c\u6642\u914d\u5408 Vite \u8207 TypeScript<\/li>\n<li>\u5167\u5efa sidebar\u3001\u5168\u57df\u641c\u5c0b\u6307\u4ee4\u300110+ \u9801\u9762\uff0c\u9069\u5408\u7528\u4f5c\u5167\u90e8\u7cfb\u7d71\u6216 SaaS \u5f8c\u53f0\u96db\u5f62<\/li>\n<li>\u91dd\u5c0d RTL support \u6539\u904e\u591a\u500b\u5143\u4ef6\uff0c\u5c0d\u96d9\u5411\u8a9e\u8a00\u4ecb\u9762\u66f4\u53cb\u5584<\/li>\n<li>Clerk \u53ea\u5c6c partial auth \u6574\u5408\uff0c\u8eab\u4efd\u9a57\u8b49\u4ecd\u9700\u8981\u6309\u81ea\u5df1\u9805\u76ee\u88dc\u5b8c<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u90e8\u7f72\u540c\u7406\u89e3\u65b9\u5f0f\u90fd\u7b97\u76f4\u63a5\uff1a\u5b89\u88dd\u4f9d\u8cf4\u5f8c\u4ee5 Vite \u672c\u5730\u8dd1\u8d77\u4ecb\u9762\uff0c\u518d\u6309 <code>src\/components\/ui\/<\/code> \u540c\u8def\u7531\u9801\u9762\u9010\u6b65\u66ff\u63db\u6210\u81ea\u5df1\u5605\u8cc7\u6599\u8207\u6d41\u7a0b\u3002\u5b83\u5514\u63d0\u4f9b\u5b8c\u6574\u7522\u54c1\u529f\u80fd\uff0c\u4e5f\u5187\u8072\u7a31\u6027\u80fd benchmark\uff1b\u91cd\u9ede\u4fc2\u628a\u4e00\u500b\u5f8c\u53f0\u6700\u96e3\u7dad\u6301\u4e00\u81f4\u6027\u7684 UI \u5c64\u5148\u6574\u7406\u597d\uff0c\u5c0d\u7d93\u5e38\u505a\u5167\u90e8\u5de5\u5177\u3001SaaS \u7ba1\u7406\u53f0\u3001\u5167\u5bb9\u71df\u904b\u9762\u677f\u7684\u524d\u7aef\u5718\u968a\u5c24\u5176\u5be6\u7528\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/github.com\/satnaing\/shadcn-admin\" rel=\"noopener noreferrer\"><strong>GitHub<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u60f3\u5feb\u901f\u780c\u51fa\u50cf\u6a23\u7684\u7ba1\u7406\u5f8c\u53f0\uff0cshadcn-admin \u63d0\u4f9b\u7684\u662f\u4e00\u5957\u53ef\u76f4\u63a5\u6539\u9020\u7684 UI \u57fa\u5e95\u3002\u5b83\u91cd\u9ede\u5514\u4fc2\u751f\u6210\u529f\u80fd\uff0c\u800c\u4fc2\u5148\u5e6b\u4f60\u8655\u7406\u7248\u9762\u3001\u4e92\u52d5\u540c\u53ef\u8b80\u6027\u3002<\/p>\n","protected":false},"author":8,"featured_media":10798,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ai_generated_summary":"","footnotes":""},"categories":[133,137,209],"tags":[],"class_list":["post-10799","post","type-post","status-publish","format-standard","hentry","category-133","category-api","category-ui-ux"],"_links":{"self":[{"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/posts\/10799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/comments?post=10799"}],"version-history":[{"count":1,"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/posts\/10799\/revisions"}],"predecessor-version":[{"id":10801,"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/posts\/10799\/revisions\/10801"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/media\/10798"}],"wp:attachment":[{"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/media?parent=10799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/categories?post=10799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/tags?post=10799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}