在React 中安装和配置 shadcn/ui_react shadcn-ui

1. 创建 React 项目

pnpm create vite@latest .

• 选择模板：React + TypeScript
• 安装依赖：

  pnpm install

2. 添加 Tailwind CSS

pnpm add -D tailwindcss postcss autoprefixer

• 修改 src/index.css 内容：

@import \"tailwindcss\";

3. 配置 TypeScript 路径别名

修改 tsconfig.json：

{ \"compilerOptions\": { \"baseUrl\": \".\", \"paths\": { \"@/*\": [\"./src/*\"] } }, \"files\": [], \"references\": [ { \"path\": \"./tsconfig.app.json\" }, { \"path\": \"./tsconfig.node.json\" } ]}

修改 tsconfig.app.json：

{ \"compilerOptions\": { \"baseUrl\": \".\", \"paths\": { \"@/*\": [\"./src/*\"] } }, // ...其他配置}

4. 配置 Vite 路径别名

1. 安装依赖：

   pnpm add -D @types/node

2. 修改 vite.config.ts：

    import path from \"path\" import tailwindcss from \"@tailwindcss/vite\" import react from \"@vitejs/plugin-react\" import { defineConfig } from \"vite\" // https://vite.dev/config/ export default defineConfig({ plugins: [react(), tailwindcss()], resolve: { alias: { \"@\": path.resolve(__dirname, \"./src\"), }, }, })

5. 初始化 shadcn/ui

pnpm dlx shadcn@latest init

• 按提示配置：
  

6. 添加并使用组件

1. 添加 Button 组件：

   pnpm dlx shadcn@latest add button

2. 在 src/App.tsx 中使用：

   import { Button } from \"@/components/ui/button\";function App() { return ( 
    click me  
    );}export default App;

7. 启动开发服务器

pnpm run dev

更多组件

安装命令（除 button 外）

pnpm dlx shadcn@latest add badge card input scroll-area select tabs textarea

完整使用示例

// 导入所有组件import { Badge } from \"@/components/ui/badge\"import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from \"@/components/ui/card\"import { Input } from \"@/components/ui/input\"import { ScrollArea } from \"@/components/ui/scroll-area\"import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from \"@/components/ui/select\"import { Tabs, TabsList, TabsTrigger, TabsContent } from \"@/components/ui/tabs\"import { Textarea } from \"@/components/ui/textarea\"function App() { return ( 
 {/* Badge */} 
 默认徽章 次要徽章 警告徽章 
 {/* Card */}   组件展示 独立导入的 shadcn/ui 组件   {/* Input & Textarea */} 
 
   
 
   </div> </div> {/* Select */} <div>         选项一 选项二 选项三    </div> {/* Tabs */}    账户  设置  账单    <p>账户管理内容区域</p>    <p>系统设置内容区域</p>    <p>账单信息内容区域</p>     状态：激活 <span>卡片底部</span>   {/* Scroll Area */} <div>  <div> {[...Array(50)].map((_, i) => (  <div> <div /> <div>  <p>项目 {i + 1}</p>  <p>可滚动内容区域</p> </div>  </div> ))} </div>  </div> </div> )}export default App</code></pre>
<h4>启动</h4>
<pre><code class="prism language-bash"><span class="token function">pnpm</span> run dev</code></pre>
<p><img src="https://i-blog.csdnimg.cn/direct/831d584a05dd471aa62a6ff1b3a2e342.png" alt="在React 中安装和配置 shadcn/ui_react shadcn-ui" alt="在这里插入图片描述" /><br /> 参考链接：https://ui.shadcn.com/docs/</p>
</div>
				
				               	<div class="clear"></div>
                			

				                <div class="article_tags">
                	<div class="tagcloud">
                    	网络标签：<a href="http://www.csdndoc.com/tag/zzl" rel="tag">在这里</a> <a href="http://www.csdndoc.com/tag/crtp" rel="tag">插入图片</a> <a href="http://www.csdndoc.com/tag/zj" rel="tag">组件</a>                    </div>
                </div>
				
             </div>
		</div>
    

			
    
		<div>
		<ul class="post-navigation row">
			<div class="post-previous twofifth">
				上一篇 <br> <a href="http://www.csdndoc.com/thread/18672.html" rel="prev">【unity游戏开发入门到精通——UGUI】文本控件 —— TextetMeshPro新文本控件（TextMeshPro - Text(UI)和TextMeshPro - Text）_unity textmeshpro</a>            </div>
            <div class="post-next twofifth">
				下一篇 <br> <a href="http://www.csdndoc.com/thread/18674.html" rel="next">Oculus Quest 2 VR核心交互Unity初学者开发指南_quest怎么开启usb调试</a>            </div>
        </ul>
	</div>
	     
	<div class="article_container row  box article_related">
    	<div class="related">
		<div class="newrelated">
    <h2>相关问题</h2>
    <ul>
                        <li><a href="http://www.pcgg.com.cn/lol/31000.html">惩罚减免能减免多少lol</a></li>
                            <li><a href="http://www.pcgg.com.cn/lol/22161.html">lol什么叫智能施法</a></li>
                            <li><a href="http://www.pcgg.com.cn/lol/18391.html">英雄联盟英雄要花钱买吗</a></li>
                            <li><a href="http://www.pcgg.com.cn/lol/30244.html">lol战争之王加什么</a></li>
                            <li><a href="http://www.pcgg.com.cn/csol/55778.html">csol几点重置</a></li>
                            <li><a href="http://www.pcgg.com.cn/aedfh/38252.html">艾尔登法环螃蟹怪经验变少</a></li>
                            <li><a href="http://www.pcgg.com.cn/lol/32601.html">lol怎么表段位</a></li>
                            <li><a href="http://www.pcgg.com.cn/gpqq/12099.html">和平精英模拟器哪个好用不卡(和平精英模拟器和手机哪个厉害)</a></li>
                            <li><a href="http://www.pcgg.com.cn/ys/44608.html">原神怎么找到神舆之首</a></li>
                            <li><a href="http://www.pcgg.com.cn/xlgwy/50952.html">星露谷物语能呆几年</a></li>
                </ul>
</div>
       	</div>
	</div>
         	<div class="clear"></div>
	<div id="comments_box">

    </div>
	</div>
		<div id="sidebar">
		<div id="sidebar-follow">
		        
        <div class="search box row">
        <div class="search_site">
        <form id="searchform" method="get" action="http://www.csdndoc.com/index.php">
            <button type="submit" value="" id="searchsubmit" class="button"><i class="fasearch">☚</i></button>
            <label><input type="text" class="search-s" name="s" x-webkit-speech="" placeholder="请输入搜索内容"></label>
        </form></div></div>
        <div class="widget_text widget box row widget_custom_html"><h3>公告</h3><div class="textwidget custom-html-widget"><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><h2>DeepSeek全套部署资料免费下载</h2></a>
<p><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/deep.png" alt="DeepSeekR1本地部署部署资料免费下载"></a></p><br /><br />
<a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><h2>免费可商用字体批量下载</h2></a>
<p><a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/freefont.png" alt="免费可商用字体下载"></a></p></div></div>                <div class="widget box row">
            <div id="tab-title">
                <div class="tab">
                    <ul id="tabnav">
                        <li  class="selected">猜你想看的文章</li>
                    </ul>
                </div>
                <div class="clear"></div>
            </div>
            <div id="tab-content">
                <ul>
                                                <li><a href="http://www.pcgg.com.cn/lol/24067.html">英雄联盟的名字怎么改</a></li>
                                                    <li><a href="http://www.pcgg.com.cn/xyx/33887.html">适合4399的电脑游戏</a></li>
                                                    <li><a href="http://www.pcgg.com.cn/lol/24429.html">英雄联盟晋级赛是五局三胜吗</a></li>
                                                    <li><a href="http://www.pcgg.com.cn/gpqq/6113.html">和平精英怎么换头像框教程(和平精英能换头像图片)</a></li>
                                                    <li><a href="http://www.pcgg.com.cn/gl/581.html">原神见闻只有九章吗</a></li>
                                                    <li><a href="http://www.pcgg.com.cn/gpqq/11150.html">电脑版和平精英怎么调灵敏度(电脑玩和平精英怎么登录)</a></li>
                                                    <li><a href="http://www.pcgg.com.cn/lol/27674.html">lol手游2.4什么时候更新</a></li>
                                                    <li><a href="http://www.pcgg.com.cn/cf/34948.html">cf有哪些外挂</a></li>
                                                    <li><a href="http://www.pcgg.com.cn/lol/24463.html">哪个平台有卖lol号</a></li>
                                                    <li><a href="http://www.pcgg.com.cn/gpqq/12386.html">和平精英怎么压枪教学(和平精英如何压枪教学视频)</a></li>
                                        </ul>
            </div>
        </div>
        									</div>
	</div>
</div>
</div>
<div class="clear"></div>
<div id="footer">
<div class="container">
	<div class="twothird">
      </div>

</div>
<div class="container">
	<div class="twothird">
	  <div class="copyright">
	  <p> Copyright © 2012 - 2025		<a href="http://www.csdndoc.com/"><strong>程序员档案馆</strong></a> Powered by <a href="/lists">网站分类目录</a> | <a href="/top100.php" target="_blank">精选推荐文章</a> | <a href="/sitemap.xml" target="_blank">网站地图</a>  | <a href="/post/" target="_blank">疑难解答</a>

				<a href="https://beian.miit.gov.cn/" rel="external">京ICP备05034492号</a>
		 	  </p>
	  <p>声明：本站内容来自互联网，如信息有错误可发邮件到f_fb#foxmail.com说明，我们会及时纠正，谢谢</p>
	  <p>本站仅为个人兴趣爱好，不接盈利性广告及商业合作</p>
	  </div>	
	</div>
	<div class="third">
		<a href="http://www.xiaoboy.cn" target="_blank">小男孩</a>			
	</div>
</div>
</div>
<!--gototop-->
<div id="tbox">
    <a id="home" href="http://www.csdndoc.com" title="返回首页"><i class="fa fa-gohome"></i></a>
      <a id="pinglun" href="#comments_box" title="前往评论"><i class="fa fa-commenting"></i></a>
   
  <a id="gotop" href="javascript:void(0)" title="返回顶部"><i class="fa fa-chevron-up"></i></a>
</div>
<script src="//css.5d.ink/body5.js" type="text/javascript"></script>
<script>
    function isMobileDevice() {
        return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || /iPhone|iPad|iPod/i.test(navigator.userAgent) || /Windows Phone/i.test(navigator.userAgent);
    }
    // 加载对应的 JavaScript 文件
    if (isMobileDevice()) {
        var script = document.createElement('script');
        script.src = '//css.5d.ink/js/menu.js';
        script.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(script);
    }
</script>
<script>
$(document).ready(function() { 
 $("#sidebar-follow").pin({
      containerSelector: ".main-container",
	  padding: {top:64},
	  minWidth: 768
	}); 
 $(".mainmenu").pin({
	 containerSelector: ".container",
	  padding: {top:0}
	});
 $(".swipebox").swipebox();	
});
</script>

 </body></html>