关于
使用 Tailwind CSS 和 Framer Motion 的现代暗色主题 React UI 系统。专为仪表盘、管理面板和数据密集型应用设计，具有毛玻璃效果和精致动画。
name: frontend-ui-dark-ts description: "使用 Tailwind CSS 和 Framer Motion 的现代深色主题 React UI 系统。专为仪表板、管理面板和数据密集型应用设计，具有毛玻璃效果和精致动画。" risk: unknown source: community date_added: "2026-02-27"
前端 UI 深色主题（TypeScript）
使用 Tailwind CSS 和 Framer Motion 的现代深色主题 React UI 系统。专为仪表板、管理面板和数据密集型应用设计，具有毛玻璃效果和精致动画。
技术栈
| 包 | 版本 | 用途 |
|---------|---------|---------|
| react | ^18.x | UI 框架 |
| react-dom | ^18.x | DOM 渲染 |
| react-router-dom | ^6.x | 路由 |
| framer-motion | ^11.x | 动画 |
| clsx | ^2.x | 类名合并 |
| tailwindcss | ^3.x | 样式 |
| vite | ^5.x | 构建工具 |
| typescript | ^5.x | 类型安全 |
快速开始
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install framer-motion clsx react-router-dom
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
项目结构
public/
├── favicon.ico # 经典 favicon (32x32)
├── favicon.svg # 现代 SVG favicon
├── apple-touch-icon.png # iOS 主屏幕 (180x180)
├── og-image.png # 社交分享图片 (1200x630)
└── site.webmanifest # PWA 清单
src/
├── assets/
│ └── fonts/
│ ├── Segoe UI.ttf
│ ├── Segoe UI Bold.ttf
│ ├── Segoe UI Italic.ttf
│ └── Segoe UI Bold Italic.ttf
├── components/
│ ├── ui/
│ │ ├── Button.tsx
│ │ ├── Card.tsx
│ │ ├── Input.tsx
│ │ ├── Badge.tsx
│ │ ├── Dialog.tsx
│ │ ├── Tabs.tsx
│ │ └── index.ts
│ └── layout/
│ ├── AppShell.tsx
│ ├── Sidebar.tsx
│ └── PageHeader.tsx
├── styles/
│ └── globals.css
├── App.tsx
└── main.tsx
配置
index.html
带有移动端视口、favicon 和社交 meta 标签的 HTML 入口点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<!-- Favicons -->
<link rel="icon" href="/favicon.ico" sizes="32x32" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />
<!-- Theme color for mobile browser chrome -->
<meta name="theme-color" content="#18181B" />
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:title" content="App Name" />
<meta property="og:description" content="App description" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:url" content="https://example.com" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="App Name" />
<meta name="twitter:description" content="App description" />
<meta name="twitter:image" content="https://example.com/og-image.png" />
<title>App Name</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
public/site.webmanifest
可安装 Web 应用的 PWA 清单：
{
"name": "App Name",
"short_name": "App",
"icons": [
{ "src": "/favicon.ico", "sizes": "32x32", "type": "image/x-icon" },
{ "src": "/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" }
],
"theme_color": "#18181B",
"background_color": "#18181B",
"display": "standalone"
}
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
fontFamily: {
sans: ['Segoe UI', 'system-ui', 'sans-serif'],
},
colors: {
brand: {
DEFAULT: '#8251EE',
hover: '#9366F5',
light: '#A37EF5',
subtle: 'rgba(130, 81, 238, 0.15)',
},
neutral: {
bg1: 'hsl(240, 6%, 10%)',
bg2: 'hsl(240, 5%, 12%)',
bg3: 'hsl(240, 5%, 14%)',
bg4: 'hsl(240, 4%, 18%)',
bg5: 'hsl(240, 4%, 22%)',
bg6: 'hsl(240, 4%, 26%)',
},
text: {
primary: '#FFFFFF',
secondary: '#A1A1AA',
muted: '#71717A',
},
border: {
subtle: 'hsla(0, 0%, 100%, 0.08)',
DEFAULT: 'hsla(0, 0%, 100%, 0.12)',
strong: 'hsla(0, 0%, 100%, 0.20)',
},
status: {
success: '#10B981',
warning: '#F59E0B',
error: '#EF4444',
info: '#3B82F6',
},
dataviz: {
purple: '#8251EE',
blue: '#3B82F6',
green: '#10B981',
yellow: '#F59E0B',
},
},
},
},
plugins: [],
}
兼容工具
Claude CodeCursor
标签
前端开发