前端热门UI库全面解析 - Mon, Mar 30, 2026

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material

import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Card sx={{ maxWidth: 345, margin: 2 }}>
        <CardContent>
          <TextField 
            label="用户名" 
            variant="outlined" 
            fullWidth 
            sx={{ mb: 2 }}
          />
          <TextField 
            label="密码" 
            type="password" 
            variant="outlined" 
            fullWidth 
            sx={{ mb: 2 }}
          />
          <Button variant="contained" fullWidth>
            登录
          </Button>
        </CardContent>
      </Card>
    </ThemeProvider>
  );
}

npm install antd
npm install @ant-design/icons

import { Button, Input, Card, Form, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';

function LoginForm() {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    console.log('Received values of form: ', values);
    message.success('登录成功');
  };

  return (
    <Card title="登录" style={{ width: 400, margin: '0 auto' }}>
      <Form
        form={form}
        name="normal_login"
        onFinish={onFinish}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入用户名' }]}
        >
          <Input 
            prefix={<UserOutlined />} 
            placeholder="用户名" 
          />
        </Form.Item>
        
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入密码' }]}
        >
          <Input.Password 
            prefix={<LockOutlined />} 
            placeholder="密码" 
          />
        </Form.Item>
        
        <Form.Item>
          <Button type="primary" htmlType="submit" block>
            登录
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

import {
  ChakraProvider,
  Box,
  VStack,
  Input,
  Button,
  Heading,
  extendTheme
} from '@chakra-ui/react';

const theme = extendTheme({
  colors: {
    brand: {
      50: '#f0f9ff',
      100: '#e0f2fe',
      500: '#0ea5e9',
      900: '#0c4a6e',
    },
  },
});

function LoginForm() {
  return (
    <ChakraProvider theme={theme}>
      <Box p={8} maxWidth="md" mx="auto">
        <VStack spacing={4}>
          <Heading size="lg" color="brand.900">
            登录
          </Heading>
          <Input placeholder="用户名" size="lg" />
          <Input placeholder="密码" type="password" size="lg" />
          <Button 
            colorScheme="brand" 
            size="lg" 
            width="full"
          >
            登录
          </Button>
        </VStack>
      </Box>
    </ChakraProvider>
  );
}

npm install element-plus
npm install @element-plus/icons-vue

<template>
  <div class="login-container">
    <el-card class="login-card">
      <template #header>
        <div class="card-header">
          <span>登录</span>
        </div>
      </template>
      
      <el-form :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input 
            v-model="form.username" 
            placeholder="请输入用户名"
          />
        </el-form-item>
        
        <el-form-item label="密码">
          <el-input 
            v-model="form.password" 
            type="password"
            placeholder="请输入密码"
          />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" style="width: 100%">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';

export default {
  setup() {
    const form = reactive({
      username: '',
      password: ''
    });

    const handleLogin = () => {
      ElMessage.success('登录成功');
    };

    return { form, handleLogin };
  }
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f5f5f5;
}

.login-card {
  width: 400px;
}

.card-header {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}
</style>

npm install vuetify
npm install sass
npm install @mdi/font

<template>
  <v-app>
    <v-container class="fill-height">
      <v-row justify="center">
        <v-col cols="12" sm="8" md="4">
          <v-card>
            <v-card-title class="justify-center">
              登录
            </v-card-title>
            <v-card-text>
              <v-text-field
                v-model="username"
                label="用户名"
                prepend-icon="mdi-account"
              />
              <v-text-field
                v-model="password"
                label="密码"
                type="password"
                prepend-icon="mdi-lock"
              />
            </v-card-text>
            <v-card-actions>
              <v-btn
                color="primary"
                block
                @click="handleLogin"
              >
                登录
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    username: '',
    password: ''
  }),
  methods: {
    handleLogin() {
      // 登录逻辑
    }
  }
};
</script>

ng add @angular/material

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-login',
  template: `
    <mat-card class="login-card">
      <mat-card-header>
        <mat-card-title>登录</mat-card-title>
      </mat-card-header>
      <mat-card-content>
        <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
          <mat-form-field appearance="fill" style="width: 100%;">
            <mat-label>用户名</mat-label>
            <input 
              matInput 
              formControlName="username"
              placeholder="请输入用户名"
            />
            <mat-error *ngIf="loginForm.get('username')?.hasError('required')">
              用户名是必填项
            </mat-error>
          </mat-form-field>

          <mat-form-field appearance="fill" style="width: 100%;">
            <mat-label>密码</mat-label>
            <input 
              matInput 
              type="password" 
              formControlName="password"
              placeholder="请输入密码"
            />
          </mat-form-field>

          <button 
            mat-raised-button 
            color="primary"
            type="submit"
            [disabled]="loginForm.invalid"
            style="width: 100%;"
          >
            登录
          </button>
        </form>
      </mat-card-content>
    </mat-card>
  `,
  styles: [`
    .login-card {
      max-width: 400px;
      margin: 2rem auto;
    }
  `]
})
export class LoginComponent {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      username: ['', Validators.required],
      password: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.loginForm.valid) {
      console.log('Login:', this.loginForm.value);
    }
  }
}

npm install -D tailwindcss
npx tailwindcss init

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <div class="min-h-screen flex items-center justify-center bg-gray-100">
    <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
      <h1 class="text-2xl font-bold text-center mb-6 text-gray-800">
        登录
      </h1>
      
      <form class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">
            用户名
          </label>
          <input 
            type="text" 
            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            placeholder="请输入用户名"
          />
        </div>
        
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-2">
            密码
          </label>
          <input 
            type="password" 
            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
            placeholder="请输入密码"
          />
        </div>
        
        <button 
          type="submit"
          class="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition-colors"
        >
          登录
        </button>
      </form>
    </div>
  </div>
</body>
</html>

npm install bootstrap

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <div class="row justify-content-center">
      <div class="col-md-6 col-lg-4">
        <div class="card shadow">
          <div class="card-header text-center">
            <h4>登录</h4>
          </div>
          <div class="card-body">
            <form>
              <div class="mb-3">
                <label for="username" class="form-label">用户名</label>
                <input 
                  type="text" 
                  class="form-control" 
                  id="username"
                  placeholder="请输入用户名"
                />
              </div>
              
              <div class="mb-3">
                <label for="password" class="form-label">密码</label>
                <input 
                  type="password" 
                  class="form-control" 
                  id="password"
                  placeholder="请输入密码"
                />
              </div>
              
              <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary">
                  登录
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

npm install @radix-ui/react-dialog
npm install @radix-ui/react-dropdown-menu

import * as Dialog from '@radix-ui/react-dialog';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

function Example() {
  return (
    <div>
      <DropdownMenu.Root>
        <DropdownMenu.Trigger asChild>
          <button className="px-4 py-2 bg-blue-500 text-white rounded">
            菜单
          </button>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content className="bg-white border rounded shadow-lg">
          <DropdownMenu.Item className="px-4 py-2 hover:bg-gray-100">
            选项1
          </DropdownMenu.Item>
          <DropdownMenu.Item className="px-4 py-2 hover:bg-gray-100">
            选项2
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Root>

      <Dialog.Root>
        <Dialog.Trigger>打开对话框</Dialog.Trigger>
        <Dialog.Portal>
          <Dialog.Overlay className="fixed inset-0 bg-black/50" />
          <Dialog.Content className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded shadow-xl">
            <Dialog.Title>标题</Dialog.Title>
            <Dialog.Description>描述内容</Dialog.Description>
            <Dialog.Close>关闭</Dialog.Close>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>
    </div>
  );
}

// Material-UI
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';

// Element Plus
import { Button, Input } from 'element-plus';

// Tailwind CSS
// 已自动处理未使用的样式

// Material-UI主题定制
const theme = createTheme({
  palette: {
    primary: {
      main: '#1890ff',
    },
    secondary: {
      main: '#722ed1',
    },
  },
  typography: {
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
  },
});

// Tailwind CSS定制
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#1890ff',
        secondary: '#722ed1',
      },
      fontFamily: {
        sans: ['Roboto', 'Helvetica', 'Arial', 'sans-serif'],
      },
    },
  },
}

// 使用懒加载
import { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

// 虚拟化长列表
import { FixedSizeList } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

const MyList = () => (
  <FixedSizeList
    height={400}
    itemCount={10000}
    itemSize={35}
    width="100%"
  >
    {Row}
  </FixedSizeList>
);