用这些 2024 年顶级网页开发库提升你的生产力
精选的高质量组件和库，专为现代网页开发而打造，重点在于 React、Next.js 和 shadcn/ui 生态系统。
UI 组件库
aceternity-ui
粘贴热门的 React 组件，预建样式和动画。功能包括可直接使用的组件，采用 Tailwind CSS 和 Framer Motion 动画。
assistant-ui
专为 AI 聊天界面设计的 React 组件，专门用于 AI 驱动的应用程序。
bundui
可重用的动画组件集合，使用 Tailwind CSS 和 Framer Motion 构建。
cult-ui
精选的一组动画 shadcn 风格 React 组件，专注于特定的使用场景和动画。
farmui
风格美观且动画丰富的组件库，作为 npm package 提供，基于 shadcn 和 Tailwind CSS 构建。
fusion-ui
结合了 shadcn/ui 和 MagicUI，提供全面的 UI 组件集。
gluestack-ui
React 和 React Native 的组件和模式，采用 Tailwind CSS（NativeWind）设计的可直接复制使用的组件。
indie-ui
包含多种变体的 UI 组件，提供文档 。
inspira-ui
专为 Vue 和 NuxtJS 构建的华丽动画界面的 UI 组件。
kokonut-ui
免费的现代化可自定义组件，基于 shadcn 构建，适用于 Next.js。
lukacho-ui
下一代 UI 组件。
magicui
用于构建美观着陆页的 React 组件，采用 Tailwind CSS、Framer Motion 和 shadcn/ui。
mixcnui
Next.js 的动画或可重用组件集合。
mynaui
专为 Figma 和 React 打造的 TailwindCSS 和 shadcn/ui UI 套件。
neobrutalism-components
新野兽派风格的 Tailwind React 和 shadcn/ui 组件集合。
nextjs-components
使用 TypeScript、React、shadcn/ui、Craft UI 和 Tailwind CSS 构建的 Next.js 组件集合。
origin-ui
利用 Tailwind CSS 和 Next.js 构建的美观 UI 组件。
spectrum-ui
基于 Aceternity UI、Magic UI 和 shadcn/ui 构建的可重用组件集合。
stunning-ui
专为 Vue 和 Nuxt 打造的互动式 Tailwind CSS 组件集合。
ui-beats
动画 React 组件集合。
表单组件
autocomplete-select-shadcn-ui
高级自动完成组件，结合 shadcn/ui 和 Fancy Multi Select，由 Maximilian Kaske 创建。
auto-form
自动从 zod 模式生成 shadcn/ui 表单，简化表单创建过程。
country-state-dropdown
国家和州选择组件，使用 Next.js、Tailwind CSS、shadcn/ui 和 Zustand 进行状态管理。
date-range-picker-for-shadcn
高级日期范围选择器，具有多月视图、文本输入、预设范围和响应式设计。
date-time-picker-shadcn
为 shadcn/Next.js 项目精心设计的日期时间选择器。
datetime-picker
强大的日期时间选择器，支持时区选择，包含最小/最大日期选择和月份/年份选择功能。
downshift-shadcn-combobox
基于 shadcn/ui 和 Downshift 构建的组合框/自动完成组件。
emblor
高度可定制和可访问的标签输入组件，采用 shadcn/ui 构建。
fancy-area
受 GitHub PR 评论区启发的文本区域，支持 @mention 和预览中的悬停卡片功能。
fancy-box
受 GitHub PR 标签选择器启发的组合框，使用 shadcn/ui 和 radix-ui 组件构建。
fancy-multi-select
多选组件，灵感来源于 campsite.design 和 cal.com 设置表单。
fancy-switch
采用 shadcn/ui 构建的增强开关组件。
file-uploader
基于 shadcn/ui 和 react-dropzone 构建的文件上传组件。
file-vault
React 的文件上传组件。
image-upload-shadcn
shadcn/ui 的图片上传组件。
lingua-time
支持自然语言输入的智能日期时间选择器。
password-input
shadcn/ui 的自定义密码输入组件。
phone-input-shadcn-ui
采用 shadcn/ui 构建的自定义电话号码输入组件。
shadcn-phone-input
可定制的电话输入，支持任何国家的验证。
shadcn-phone-input-2
采用 shadcn/ui 和 libphonenumber-js 构建的简单格式化电话输入组件。
专用组件
capture-photo
基于浏览器的相机集成组件，简化网页应用中的照片拍摄。
clerk-elements
Clerk 的身份验证可组合组件，用于 Clerk 的 API 构建自定义 UI 基础模块。
clerk-shadcn-theme
同步 Clerk <SignIn /> 和 <SignUp /> 组件与 shadcn/ui 样式。
confirm-dialog
采用 shadcn/ui 构建的确认对话框组件。
credenza
shadcn/ui 的现成响应式模态组件。
dnd-dashboard
美观且高性能的仪表盘，支持拖放布局，使用 Next.js、shadcn/ui 和 swapy 构建。
drag-to-resize-sidebar
带拖动调整大小功能的扩展 shadcn/ui 侧边栏组件，支持 Next.js 应用程序的状态持久化。
echo-editor
基于 tiptap 和 shadcn/ui 的现代所见即所得富文本编辑器。
edil-ozi
利用 GSAP、Framer Motion 和 Tailwind 的 React 组件。
enhanced-button
默认 shadcn 按钮组件的增强版。
ibelick/background-snippet
现成的现代背景片段集合。
maily.to
类似 Notion 的强大电子邮件编辑器。
minimal-tiptap
采用 shadcn/ui 和 tiptap 构建的简约所见即所得编辑器。
novel
带有 AI 自动补全功能的 Notion 风格所见即所得编辑器，使用 Tiptap 和 Vercel AI SDK 构建。
number-flow
用于数值转换、本地化和格式化的 React 组件，无依赖、可访问且易于自定义。
planner
适用于 React 应用程序的高度可定制的计划组件。
plate
受 AI 驱动的富文本编辑器。
progress-button
带有状态机驱动进度用户体验的 shadcn/ui 按钮组件扩展。
react-highlight-popover
用于文本选择上创建弹出框的无头 React 组件，无依赖。
search-address
灵活和互动的地址搜索界面，利用 OpenStreetMap 的 Nominatim 服务。
数据可视化和图表
crypto-charts
基于 shadcn/ui 的加密货币图表，使用 PythNetwork 构建。
shadcn-calendar-heatmap
现代替代普鲁图反应热图的图表，基于 shadcn/ui 日历组件。
stocks
股票选择器实现，使用 Next.js、React Server Components 和 shadcn/ui 图表。
tremor-raw
现代网页应用程序的可复制粘贴 React 组件，特别适合构建图表。
zoom-charts
基于 shadcn/ui 图表构建的可缩放图表。
布局与导航组件
nextjs-dnd
可排序的拖放实现，使用 Next.js、shadcn/ui 和 dnd-kit 构建。
nextjs-link-pagination
使用 Next.js 链接和搜索参数的分页组件。## next-shadcn-dashboard-starter
使用 Next.js 14 和 Shadcn UI 构建的管理仪表板启动器。
pricing-page-shadcn
自定义定价页面模板，基于 shadcn/ui 和 Next.js 14 构建。
react-dnd-kit-tailwind-shadcn-ui
使用 React、dnd-kit、Tailwind 和 shadcn/ui 实现的可访问拖放看板。
recursive-dnd-kanban-board
递归生成的拖放可访问看板，使用 Next.js、@dnd-kit、Tailwind 和 shadcn/ui 构建。
shadcn-admin
基于 shadcn/ui 和 Vite 构建的管理仪表板 UI。
shadcn-blocks
官方 shadcn/ui 预制的可定制组件。
shadcn-cal
Cal.com 月历的复制版，基于 shadcn/ui、Radix Colors 和 React Aria 构建。
shadcn-calendar-component
使用 shadcn/ui 设计的日历日期选择组件。
shadcn-chat
可自定义和重复使用的聊天组件。
shadcn-carousel-testimonials
用于推荐语的轮播组件，使用 shadcn/ui 构建。
shadcn-chatbot-kit
设计精美的可定制聊天机器人组件，基于 shadcn/ui。
shadcn-cookie-consent
基于 shadcn-ui 和 Tailwind CSS 的可定制 Cookie 同意组件。
shadcn-data-table-advanced-col-opions
具有列大小调整选项的增强数据表，适用于 shadcn/ui。
shadcn-date-picker
高级日期选择器，支持范围、年份和月份选择。
shadcn-drag-table
使用 shadcn/ui 和 Next.js 构建的拖放表格组件。
shadcn-linear-combobox
Linear 任务优先级组合框的复制版。
shadcn-multi-select-component
使用 shadcn/ui 设计的多选组件。
shadcn-spinner
适用于 shadcn/ui 的旋转器组件。
shadcn-stepper
使用 shadcn/ui 构建的完整步骤条组件。
shadcn-table-v2
增强版 shadcn/ui 表组件，具有服务器端排序、过滤和分页功能。
shadcn-timeline
在 shadcn 上构建的可自定义时间轴组件。
shadcn-timeline-2
另一种为 shadcn/ui 提供的时间轴组件实现。
shadcn-tree-view
用于分层列表的组件，具有可展开/折叠的嵌套级别。
shadcn-ui-blocks
shadcn/ui 项目使用的 10 多个响应式 UI 模块集合。
shadcn-ui-expansions
默认情况下不包含在 shadcn/ui 中的其他实用组件。
shadcn-ui-sidebar
用于 shadcn/ui 的功能性响应式可伸缩侧边栏。
shadcn-ui-templates
shadcn/ui 的免费和高级模板及资源集合。
simplekit
基于 Wagmi 和 shadcn/ui 构建的响应式连接钱包和账户组件。
sortable
使用 shadcn/ui、radix ui 和 dnd-kit 构建的可排序组件。
time-picker
用于 shadcn/ui 项目的简单时间选择器组件。
uixmat/onborda
适用于 Next.js 应用的引导式入职组件。
vaul
React 的抽屉组件。
实用工具和增强组件
payment-gateways
流行支付网关的集成示例，包括 Stripe、Razorpay、PayPal 和 Coinbase，为 Next.js 14 构建。
react-select
带有 shadcn 样式的 react-select 库实现，支持选择、异步选择和多选。
shadcn-address-autocomplete
使用 Google Places API 和 shadcn 组件构建的地址自动完成组件。
shadcn-color-picker
使用 react-color 和 shadcn 构建的颜色选择器组件。
shadcn-editor
使用 shadcn 主题和组件的词法编辑器。
shadcn-extends
使用 shadcn/ui 构建的附加组件集合。
shadcn-extension
开源组件集合，使用 shadcn/ui 扩展 UI 库。
shadcn-image-cropper
使用 shadcn 和 react-image-crop 库构建的极简图像裁剪 UI。
shadcn-tiptap
适用于 Tiptap 编辑器的定制扩展和工具栏集合。