Designeer

大类 · 120 个工具 · 2 个分区

UI 组件库与动画库

可复制粘贴的组件集、无样式基础组件、shadcn 注册表，以及让它们动起来的动画库。每一项都会播放一段短预览，装之前就能判断动效好坏。

01 / 02

React UI 组件库

109进入分区
forgeui.in
ForgeUI preview
ForgeUI组件库带动效的 React 与 Tailwind 组件，还配有现成模板，帮你更快搭建界面。
rewampui.com
RewampUI preview
RewampUI组件库一个展示现成 UI 组件的面板，可随意浏览并复用。
ui.shadcn.com
shadcn/ui preview
shadcn/ui组件库直接复制进自己代码库的 UI 组件，而不是作为依赖包安装。
base-ui.com
Base UI preview
Base UI组件库由 Radix 与 MUI 团队打造的无样式、可自由定制的组件基元。
radix-ui.com
Radix preview
Radix组件库无障碍、无样式的 UI 基元，搭建 React 界面时可自由定制样式。
21st.dev
21st.dev preview
21st.dev组件库社区版 shadcn 组件库，可先交互式预览再添加组件。
motion-primitives.com
Motion Primitives preview
Motion Primitives组件库基于 Motion 库打造的动效 React 组件，为界面增添动感。
reactbits.dev
React Bits preview
React Bits组件库一组富有创意的动效组件，可直接用到 React 项目中。
component.gallery
Component Gallery preview
Component Gallery组件库汇集并对比不同设计系统组件的参考资料库。
number-flow.barvian.me
NumberFlow preview
NumberFlow组件库平滑呈现数字变化动画的组件，兼容各主流框架。
fancycomponents.dev
Fancy Components preview
Fancy Components组件库运用物理效果打造的趣味 React 组件，让交互更生动。
opensourceui.in
Opensource UI preview
Opensource UI组件库可直接复制粘贴到项目里的 React UI 组件和设备样机。
ui.spectrumhq.in
Spectrum UI preview
Spectrum UI组件库专为搭建 SaaS 网站设计的精致 UI 组件。
amicro.vercel.app
Amicro preview
Amicro组件库轻量、即插即用的基元，为 React 界面添加微动画。
painterly.design-tools.workers.dev
Painterly preview
Painterly组件库基于 canvas 的艺术化加载动画，封装成 React 组件。
bencho.dev
Bencho preview
Bencho组件库可交互的 UI 模块，物理参数可调，精确调出想要的手感。
shadcnblocks.com
shadcnblocks preview
shadcnblocks组件库数千个 shadcn 风格、简洁即用的网站模块。
blocks.so
blocks.so preview
blocks.so组件库开源网站模块，可直接通过命令行安装。
8bitcn.com
8bitcn preview
8bitcn组件库复古 8-bit 风格的 UI 组件，可直接用到 shadcn 项目中。
evilcharts.com
Evil Charts preview
Evil Charts组件库带动效的 SVG 图表组件，能完美融入 shadcn/ui 项目。
coss.com
coss ui preview
coss ui组件库基于 Base UI 基元库打造、可复制粘贴的 UI 组件。
rareui.com
Rare UI preview
Rare UI组件库一组独具特色的动效 UI 组件，用于搭建 React 界面。
beui.dev
beUI preview
beUI组件库用 Tailwind CSS 设计样式的动效 React 组件，加快界面开发。
butter-nav.vercel.app
Butter Nav preview
Butter Nav组件库一款大型菜单组件，在不同板块间切换时布局会流畅变形。
cult-ui.com
Cult UI preview
Cult UI组件库由 Framer Motion 驱动的动效 React 组件，带来流畅的界面动画。
daisyui.com
daisyUI preview
daisyUI组件库一套扩展 Tailwind CSS 的组件类库，让样式编写更快。
heroui.com
HeroUI preview
HeroUI组件库一个现代化的 React UI 组件库，早期曾以 NextUI 之名发布。
kibo-ui.com
Kibo UI preview
Kibo UI组件库一个组件库，内含专为搭建 AI 界面定制的组件。
magicui.design
Magic UI preview
Magic UI组件库专为搭建落地页打造的动效 UI 组件。
ui.aceternity.com
Aceternity UI preview
Aceternity UI组件库潮流的动效组件与 hero 区块，用于打造吸睛的网页。
animate-ui.com
Animate UI preview
Animate UI组件库借助 Motion 动画库注入活力的无障碍 shadcn 组件。
flyonui.com
FlyonUI preview
FlyonUI组件库语义化的 Tailwind CSS 组件，可直接搭配最新的 Tailwind v4 使用。
tailgrids.com
TailGrids preview
TailGrids组件库响应式 UI 模块，助你用 Tailwind CSS 快速拼搭页面。
flowbite.com
Flowbite preview
Flowbite组件库一个基于 Tailwind CSS 的大型组件库，用于界面开发。
hyperui.dev
HyperUI preview
HyperUI组件库免费开源的 UI 组件，可复制到你的 Tailwind CSS 项目中。
preline.co
Preline UI preview
Preline UI组件库适合搭建复杂仪表盘界面的 Tailwind CSS 组件。
floatui.com
Float UI preview
Float UI组件库专为营销网站拼搭页面打造的 Tailwind CSS 组件。
merakiui.com
Meraki UI preview
Meraki UI组件库内置从右到左语言支持的 Tailwind CSS 组件。
tremor.so
Tremor preview
Tremor组件库一套模块化的 React 组件，用于拼搭完整的仪表盘界面。
headlessui.com
Headless UI preview
Headless UI组件库由 Tailwind Labs 团队打造的无样式、无障碍 UI 组件。
basecn.dev
Base CN preview
Base CN组件库将 Base UI 基元重新封装，以融入 shadcn 组件工作流。
easyui.pro
Easy UI preview
Easy UI组件库一个可复制粘贴的组件库，帮你快速拼搭界面。
eldoraui.site
Eldora UI preview
Eldora UI组件库专为快速搭建网页落地页定制的动效 UI 组件。
velora.colorlib.com
Velora UI preview
Velora UI组件库一套免费的 Tailwind CSS 组件和预制页面区块，可随取随用。
watermelon.sh
Watermelon UI preview
Watermelon UI组件库一个为融入 shadcn 工具生态而打造的 React 组件库。
beautifului.dev
Beautiful UI preview
Beautiful UI组件库精致、可复制粘贴的 UI 组件，用于搭建 Web 应用前端。
hexter-ui.com
hexter-ui.com
Hexter UI组件库一套整洁简约的组件合集，可直接用到 shadcn 项目中。
lightswind.com
Lightswind preview
Lightswind组件库带光照与辉光效果的 Tailwind CSS 组件，打造吸睛的 UI。
reverseui.com
Reverse UI preview
Reverse UI组件库一个用 React 和 Tailwind CSS 搭建界面的组件库。
smoothui.dev
Smooth UI preview
Smooth UI组件库动效丰富的 React 组件，可直接复制到你自己的项目中。
tailark.com
Tailark preview
Tailark组件库面向营销网站搭建的 Tailwind CSS 页面区块与组件。
ui-layouts.com
UI Layouts preview
UI Layouts组件库整页布局与 hero 区块，可用 Tailwind CSS 直接拼搭。
kokonutui.com
Kokonut UI preview
Kokonut UI组件库富有创意的可交互 UI 组件，以 shadcn 格式封装使用。
nexui.dev
Nex UI preview
Nex UI组件库一个可扩展的 UI 组件库，面向打造现代创业产品的团队。
ninna-ui.dev
Ninja UI preview
Ninja UI组件库轻量级 UI 组件，助力网站保持轻快、加载迅速。
seraui.com
Sera UI preview
Sera UI组件库可通过 shadcn 命令行工具直接安装的 React 组件。
reui.io
Re UI preview
Re UI组件库基于 Base UI 基元库打造的无障碍 UI 组件。
syntaxui.com
Syntax UI preview
Syntax UI组件库带动效、可复制粘贴的 UI 组件，用于快速拼搭落地页。
shadcn-cssinjs.com
shadcn-cssinjs preview
shadcn-cssinjs组件库经过改造的 shadcn 组件，适配采用 CSS-in-JS 样式方案的项目。
transitions.dev
Transitions preview
Transitions组件库精选的 CSS 过渡方案与缓动曲线合集，可随取随用。
23rd.dev
23rd preview
23rd组件库shadcn 风格的组件，React 和 Svelte 项目均可使用。
oneko.dhrv.pw
Oneko preview
Oneko组件库一只像素风小猫，会在页面上跟着你的光标跑来跑去。
rolling.kitlangton.dev
Rolling Number preview
Rolling Number组件库一个 React 数字计数器，数字变化时带有平滑的滚动动画。
annnimate.com
Annnimate preview
Annnimate组件库用 GSAP 动画库打造、可直接用于生产环境的动效组件。
getlayers.ai
GetLayers preview
GetLayers组件库一组 AI 提示词，为你的网站生成电影质感的页面区块。
scrit.to
Scritto preview
Scritto组件库提供字符滚动文字过渡效果的组件库，可直接嵌入你的 UI。
ogimagecn.com
ogimagecn preview
ogimagecn组件库基于 Satori 生成 Open Graph 社交分享图的组件。
tripwire.sh
Dither Kit preview
Dither Kit组件库用抖动像素渲染的图表组件，营造复古怀旧的视觉风格。
shieldcn.dev
shieldcn preview
shieldcn组件库契合 shadcn 风格的 README 徽章，用来美化你的项目文档。
ui.unlumen.com
unlumen UI preview
unlumen UI组件库极简风格的 React 组件库，通过命令行安装和添加。
bearnie.dev
Bearnie preview
Bearnie组件库专为 Astro 打造、用 Tailwind CSS 设计样式的 UI 组件集。
fluidfunctionalism.com
Fluid Functionalism preview
Fluid Functionalism组件库以基于物理、目的明确的动画驱动运动的 UI 组件。
termcn.dev
termcn preview
termcn组件库基于 Ink 和 OpenTUI、用于构建终端风格界面的 React 组件。
framecn.dev
framecn preview
framecn组件库基于 Editframe，为 React 项目提供程序化视频渲染。
emailcn.run
emailcn preview
emailcn组件库兼容 React Email、MJML 和 JSX Email 的响应式邮件组件。
startercn.vercel.app
startercn preview
startercn组件库可直接 fork 的 shadcn/ui registry 启动模板，内置文档、落地页和 agent 支持。
pdfcn.dev
pdfcn preview
pdfcn组件库基于 Takumi 和 Forme、用于生成 PDF 文档的 React 组件。
editorcn.vercel.app
editorcn preview
editorcn组件库基于 Tiptap 框架、可直接嵌入 React 应用的富文本编辑 UI。
shadcn-labs.com
Shadcn Labs preview
Shadcn Labs组件库面向 shadcn/ui 生态的开源 registry 与工具合集。
frameblox.com
frameblox.com
Frameblox组件库模块化区块和模板，可在 Framer 中拼装成完整网站。
ui.nexvyn.dev
ui.nexvyn.dev
Nexvyn UI组件库精致、可直接嵌入数字界面和应用的 UI 组件。
gradient-spin.vercel.app
gradient-spin.vercel.app
Gradient Spin组件库为 React 项目提供的渐变旋转加载指示器组件。
libraries.dev
Libraries.dev preview
Libraries.dev组件库专为 AI agent 使用而设计的 UI 效果与组件合集。
sonaui.com
Sona UI preview
Sona UI组件库可复制进代码库的动画 React 组件，完全归你所有、可自由改样式。
text-effects.colorion.co
Colorion Text Effects preview
Colorion Text Effects组件库可直接复制粘贴到界面中的动画文字效果。
dotmatrix.zzzzshawn.cloud
Dot Matrix preview
Dot Matrix组件库为 shadcn 项目打造的五十多款点阵风格加载动画。
sacred.computer
SRCL preview
SRCL组件库重现复古 DOS 时代终端界面外观的组件套件。
prompt-kit.com
Prompt Kit preview
Prompt Kit组件库用于构建聊天及其他 AI 界面体验的基础组件。
shoogle.dev
Shoogle preview
Shoogle组件库索引众多 shadcn registry 中 UI 组件的搜索引擎。
interior.dev
interior.dev preview
interior.dev组件库精心调校的微交互，点击瞬间就有灵敏的反馈感。
soundcn.xyz
soundcn preview
soundcn组件库可复制粘贴的 UI 音效合集，为界面添加声音。
cuelume.dev
cuelume preview
cuelume组件库用浏览器 Web Audio API 实时生成的微型界面音效提示。
canvasui.dev
Canvas UI preview
Canvas UI组件库GPU 加速的液体物理效果与 canvas 着色器，带来丰富的 UI 视觉。
odysseyui.com
Odyssey UI preview
Odyssey UI组件库构建于 shadcn 组件体系之上的一套动画 React 组件。
spell.sh
Spell UI preview
Spell UI组件库精心打造的交互式 UI 组件，用于构建现代 Web 应用。
skiper-ui.com
Skiper UI preview
Skiper UI组件库可用 Tailwind CSS 组合与设计样式的动画 UI 基础组件。
devl.dev
devl preview
devl组件库极简、实验性的 UI 组件，用于构建现代 Web 界面。
uiuno.com
Uiuno preview
Uiuno组件库借助 AI 整理和管理 shadcn 组件的工作空间。
vengeanceui.com
Vengeance UI preview
Vengeance UI组件库围绕滚动驱动交互与效果打造的动画 React 组件。
sensory-ui.com
sensory-ui preview
sensory-ui组件库为 shadcn/ui 组件添加音频反馈的声音设计系统。
amacro.vercel.app
Amacro preview
Amacro组件库可直接嵌入的页面进场动画，几乎无需配置即可加入 React 应用。
evilbuttons.com
Evil Buttons preview
Evil Buttons组件库精心打造的按钮组件，按下瞬间就有交互感与触感。
componentry.dev
Componentry preview
Componentry组件库可定制的 UI 基础组件，用于构建 React 界面。
great-ui.com
Great UI preview
Great UI组件库用 React 构建、Tailwind CSS 设计样式的可复制粘贴组件。
ui.ruru.build
Ruru UI preview
Ruru UI组件库无障碍、可定制的 UI 组件，用于构建 React 应用。
shadcnstudio.com
Shadcn Studio preview
Shadcn Studio组件库包含 shadcn/ui 组件、预制区块和完整模板的库。
shadcn-animated.vercel.app
Animated shadcn/ui preview
Animated shadcn/ui组件库由 Motion 驱动的标准 shadcn/ui 组件动画版本，用于打造动画界面。
pinui.xyz
Pin UI preview
Pin UI组件库用 React 和 Tailwind CSS 构建、风格独特的可复制粘贴组件。
loading.dev
loading.dev preview
loading.dev组件库为 React 应用提供的轻量加载指示器与加载动画库。
02 / 02

React 与 Web 动画库

11进入分区
motion.dev
Motion preview
Motion动画库生产级动画库，为 web 上的 React 应用添加动效。
gsap.com
GSAP preview
GSAP动画库业界广泛使用的 JavaScript 动画引擎，以时间轴为核心。
rive.app
Rive preview
Rive动画库用状态机驱动、构建交互式矢量动画的工具。
lottiefiles.com
Lottie preview
Lottie动画库轻量的、基于 JSON 的格式，用于向 web 交付矢量动画。
easingwizard.com
Easing Wizard preview
Easing Wizard动画库可视化生成器，为 web 动画定制 CSS 弹簧缓动曲线。
morphrig.dev
Morphrig preview
Morphrig动画库交互式手册，逐步讲解图标形变动画的原理。
theatrejs.com
Theatre.js preview
Theatre.js动画库可视化时序编排工具，用于编排 DOM 元素的动效设计。
morphicons.com
morphicons preview
morphicons动画库动画库，用弹簧物理让图标形变，实现自然的动效。
glimm.dev
glimm preview
glimm动画库由 shader 驱动的页面过渡，为 Next.js 项目的导航添加动画。
devouringdetails.com
Devouring Details preview
Devouring Details动画库交互式电子书，讲授微交互设计的工艺。
textmotion.dev
textmotion preview
textmotion动画库零依赖的基础组件，为 web 添加滚动文字动画。
UI 组件库与动画库精选（120） — Designeer