UI Hub 是一个每日更新的免费 UI 资源目录，给设计师、前端开发者和做界面的 AI Agent 用：共 2,395 条资源，其中 133 个组件库、1,929 个带明暗预览的组件样式示例，另有设计 skill 与 AI 设计技巧文章。UI Hub 是一個每日更新的免費 UI 資源目錄，給設計師、前端開發者和做介面的 AI Agent 用：共 2,395 條資源，其中 133 個元件庫、1,929 個附明暗預覽的元件樣式示例，另有設計 skill 與 AI 設計技巧文章。UI Hub is a free, daily-updated directory of UI resources for designers, front-end developers and AI agents that build interfaces: 2,395 resources, including 133 component libraries and 1,929 component style demos with light/dark previews, plus design skills and AI design articles.UI Hub は、デザイナー・フロントエンド開発者・UI を作る AI エージェント向けの、毎日更新される無料の UI リソース集です。全 2,395 件（コンポーネントライブラリ 133 件、ライト/ダーク対応のスタイルデモ 1,929 件）に加え、デザインスキルと AI デザイン記事を掲載しています。UI Hub는 디자이너, 프론트엔드 개발자, 인터페이스를 만드는 AI 에이전트를 위한 매일 업데이트되는 무료 UI 리소스 디렉터리입니다. 총 2,395개 리소스(컴포넌트 라이브러리 133개, 라이트/다크 미리보기가 있는 스타일 데모 1,929개)와 디자인 스킬, AI 디자인 글을 제공합니다.UI Hub ialah direktori sumber UI percuma yang dikemas kini setiap hari untuk pereka, pembangun front-end dan ejen AI yang membina antara muka: 2,395 sumber, termasuk 133 pustaka komponen dan 1,929 demo gaya komponen dengan pratonton terang/gelap, serta kemahiran reka bentuk dan artikel reka bentuk AI.UI Hub là danh mục tài nguyên UI miễn phí, cập nhật hằng ngày, dành cho nhà thiết kế, lập trình viên front-end và AI agent dựng giao diện: 2,395 tài nguyên, gồm 133 thư viện component và 1,929 mẫu phong cách component có xem trước sáng/tối, cùng skill thiết kế và bài viết về thiết kế với AI.UI Hub est un annuaire gratuit de ressources UI, mis à jour chaque jour, pour designers, développeurs front-end et agents IA qui construisent des interfaces : 2,395 ressources, dont 133 bibliothèques de composants et 1,929 démos de styles avec aperçus clair/sombre, plus des skills de design et des articles sur le design avec l’IA.UI Hub es un directorio gratuito de recursos de UI, actualizado a diario, para diseñadores, desarrolladores front-end y agentes de IA que construyen interfaces: 2,395 recursos, incluidas 133 bibliotecas de componentes y 1,929 demos de estilos con vista clara/oscura, además de skills de diseño y artículos de diseño con IA.UI Hub ist ein kostenloses, täglich aktualisiertes Verzeichnis von UI-Ressourcen für Designer, Frontend-Entwickler und KI-Agents, die Oberflächen bauen: 2,395 Ressourcen, darunter 133 Komponentenbibliotheken und 1,929 Komponenten-Stildemos mit Hell/Dunkel-Vorschau, dazu Design-Skills und Artikel zu KI-Design.

← 返回博客返回部落格Back to blogブログへ戻る블로그로Kembali ke blogVề blogRetour au blogVolver al blogZurück zum Blog · 组件库深读元件庫深讀Component librariesコンポーネント컴포넌트Pustaka komponenThư viện componentBibliothèquesBibliotecasKomponenten · 2026-10-14 · 2 分钟阅读2 分鐘閱讀2 min read2 分で読めます2 분 읽기2 min bacaan2 phút đọc2 min de lecture2 min de lectura2 Min. Lesezeit

Magic UI 深读：像 shadcn 一样安装的动效组件Magic UI 深讀：像 shadcn 一樣安裝的動效元件Magic UI deep dive: animated components that install like shadcnMagic UI徹底解説：shadcnのように入るアニメ部品Magic UI 심층 분석: shadcn처럼 설치되는 애니메이션 컴포넌트Magic UI mendalam: komponen animasi dipasang seperti shadcnMagic UI chuyên sâu: component động cài như shadcnMagic UI en profondeur : des composants animés qui s'installent comme shadcnMagic UI a fondo: componentes animados que se instalan como shadcnMagic UI im Detail: animierte Komponenten, installiert wie shadcn

一套开源（MIT）的动效组件，通过 shadcn registry 分发。SaaS 页面最值得用的几个，以及如何保持无障碍。一套開源（MIT）的動效元件，透過 shadcn registry 分發。SaaS 頁面最值得用的幾個，以及如何維持無障礙。An open-source (MIT) set of motion components distributed through the shadcn registry. Best picks for SaaS pages and how to keep them accessible.shadcnレジストリで配布されるMITのモーション部品。SaaSページ向けの選び方とアクセシビリティ。shadcn 레지스트리로 배포되는 MIT 모션 컴포넌트. SaaS 페이지 추천과 접근성 유지법.Komponen gerakan sumber terbuka (MIT) melalui registry shadcn.Bộ component chuyển động MIT phân phối qua shadcn registry.Composants animés open source (MIT) distribués via le registre shadcn.Componentes animados open source (MIT) distribuidos por el registro de shadcn.Open-Source-Motion-Komponenten (MIT) über die shadcn-Registry.

Magic UI deep dive: animated components that install like shadcn

正文以簡體中文顯示。

本文は英語で表示しています。

본문은 영어로 표시됩니다.

Kandungan dipaparkan dalam bahasa Inggeris.

Nội dung hiển thị bằng tiếng Anh.

Le corps de l’article est en anglais.

El cuerpo del artículo está en inglés.

Der Beitragstext ist auf Englisch.

Magic UI is an open-source library of animated components (MIT licence) designed as a companion to shadcn/ui. Components are added with the shadcn CLI from Magic UI's registry, so the source lands in your repo where you can edit it, rather than living in a dependency.

Magic UI home page
Magic UI home page · Screenshot: Magic UI (magicui.design), captured 2026-10-14. © the original site.

Picks that earn their place

Commands to add Magic UI components via the shadcn CLI
Commands to add Magic UI components via the shadcn CLI · Diagram: original by UI Hub, CC BY 4.0

Accessibility and performance

Continuous motion (marquees, orbits) should pause on hover and stop under prefers-reduced-motion; WCAG 2.2.2 asks for a way to pause anything that moves for more than five seconds. Prefer transform and opacity animations, which browsers can composite cheaply.

Magic UI repository on GitHub (MIT licence)
Magic UI repository on GitHub (MIT licence) · Screenshot: GitHub (github.com), captured 2026-10-14. © the original site.

Our take

Magic UI is the easiest way to add motion to a shadcn project because it shares the install model and the token variables. The risk is the same as any effects library: use one or two components per page, and let the rest of the UI stay calm.

AI 提示词AI 提示詞AI promptAIプロンプトAI 프롬프트Prompt AIPrompt cho AIPrompt IAPrompt de IAKI-Prompt

复制给 Claude、Cursor、v0 等 AI 助手，让它按本文的方法处理你的项目。尖括号里的内容换成你自己的。複製給 Claude、Cursor、v0 等 AI 助手，讓它按本文的方法處理你的專案。尖括號裡的內容換成你自己的。Paste this into Claude, Cursor, v0 or another assistant to apply this post to your own project. Replace the parts in angle brackets.Claude・Cursor・v0 などのAIアシスタントに貼り付けると、この記事の方法をあなたのプロジェクトに適用できます。山括弧の部分は自分の内容に置き換えてください。Claude, Cursor, v0 같은 AI 도우미에 붙여 넣으면 이 글의 방법을 내 프로젝트에 적용할 수 있습니다. 꺾쇠괄호 안은 내 내용으로 바꾸세요.Tampal ke Claude, Cursor, v0 atau pembantu lain untuk menggunakan kaedah artikel ini pada projek anda. Gantikan bahagian dalam kurungan sudut.Dán vào Claude, Cursor, v0 hoặc trợ lý khác để áp dụng bài này cho dự án của bạn. Thay phần trong dấu ngoặc nhọn bằng nội dung của bạn.Collez-le dans Claude, Cursor, v0 ou un autre assistant pour appliquer cet article à votre projet. Remplacez les parties entre chevrons.Pégalo en Claude, Cursor, v0 u otro asistente para aplicar este artículo a tu proyecto. Sustituye lo que está entre corchetes angulares.In Claude, Cursor, v0 oder einen anderen Assistenten einfügen, um diesen Beitrag auf dein Projekt anzuwenden. Teile in spitzen Klammern ersetzen.

你是一名资深 UI 工程师。请把文章《Magic UI 深读：像 shadcn 一样安装的动效组件》（https://ui.incidental.site/blog/magic-ui-deep-dive/）的方法用到我的项目上。
核心观点：一套开源（MIT）的动效组件，通过 shadcn registry 分发。SaaS 页面最值得用的几个，以及如何保持无障碍。
步骤：
1. 读文章，把建议整理成一份具体、可检查的编号清单。
2. 用这份清单检查 <我的页面 / 组件 / 仓库>，每条标注通过或不通过，并写明文件和行号。
3. 用我现有的 token 和组件，小批量修复不通过的项。不要编造 API，以文章链接的官方文档为准。
4. 最后列出待确认的问题和你无法核实的内容。
你是一名資深 UI 工程師。請把文章《Magic UI 深讀：像 shadcn 一樣安裝的動效元件》（https://ui.incidental.site/blog/magic-ui-deep-dive/）的方法用到我的專案上。
核心觀點：一套開源（MIT）的動效元件，透過 shadcn registry 分發。SaaS 頁面最值得用的幾個，以及如何維持無障礙。
步驟：
1. 讀文章，把建議整理成一份具體、可檢查的編號清單。
2. 用這份清單檢查 <我的頁面 / 元件 / 儲存庫>，每條標註通過或不通過，並寫明檔案和行號。
3. 用我現有的 token 和元件，小批量修復不通過的項目。不要編造 API，以文章連結的官方文件為準。
4. 最後列出待確認的問題和你無法核實的內容。
You are a senior UI engineer. Apply the article “Magic UI deep dive: animated components that install like shadcn” (https://ui.incidental.site/blog/magic-ui-deep-dive/) to my project.
Key idea: An open-source (MIT) set of motion components distributed through the shadcn registry. Best picks for SaaS pages and how to keep them accessible.
Steps:
1. Read the article and turn its advice into a numbered checklist of concrete, checkable rules.
2. Audit <my page / component / repo> against that checklist; mark each rule PASS or FAIL with file and line.
3. Fix the FAIL items in small batches, using my existing tokens and components. Do not invent APIs; follow the official docs the article links to.
4. Finish with a short list of open questions and anything you could not verify.
あなたはシニアUIエンジニアです。記事「Magic UI徹底解説：shadcnのように入るアニメ部品」（https://ui.incidental.site/blog/magic-ui-deep-dive/）の方法を私のプロジェクトに適用してください。
要点：shadcnレジストリで配布されるMITのモーション部品。SaaSページ向けの選び方とアクセシビリティ。
手順：
1. 記事を読み、助言を具体的で確認可能な番号付きチェックリストにする。
2. そのチェックリストで <私のページ / コンポーネント / リポジトリ> を監査し、各項目を合格／不合格で示し、ファイルと行番号を書く。
3. 不合格の項目を、既存のトークンとコンポーネントを使って少しずつ修正する。APIを捏造せず、記事がリンクする公式ドキュメントに従う。
4. 最後に未解決の質問と検証できなかった点を挙げる。
당신은 시니어 UI 엔지니어입니다. 글 “Magic UI 심층 분석: shadcn처럼 설치되는 애니메이션 컴포넌트”(https://ui.incidental.site/blog/magic-ui-deep-dive/)의 방법을 내 프로젝트에 적용해 주세요.
핵심: shadcn 레지스트리로 배포되는 MIT 모션 컴포넌트. SaaS 페이지 추천과 접근성 유지법.
단계:
1. 글을 읽고 조언을 구체적이고 확인 가능한 번호 목록으로 정리한다.
2. 그 목록으로 <내 페이지 / 컴포넌트 / 저장소>를 점검하고, 항목마다 통과/실패와 파일·줄 번호를 적는다.
3. 실패 항목을 기존 토큰과 컴포넌트로 조금씩 고친다. API를 지어내지 말고 글에 링크된 공식 문서를 따른다.
4. 마지막으로 남은 질문과 확인하지 못한 내용을 정리한다.
Anda jurutera UI kanan. Gunakan kaedah artikel “Magic UI mendalam: komponen animasi dipasang seperti shadcn” (https://ui.incidental.site/blog/magic-ui-deep-dive/) pada projek saya.
Idea utama: Komponen gerakan sumber terbuka (MIT) melalui registry shadcn.
Langkah:
1. Baca artikel dan jadikan nasihatnya senarai semak bernombor yang konkrit dan boleh disemak.
2. Audit <halaman / komponen / repo saya> dengan senarai itu; tandakan setiap peraturan LULUS atau GAGAL dengan fail dan baris.
3. Baiki item GAGAL sedikit demi sedikit menggunakan token dan komponen sedia ada. Jangan reka API; ikut dokumen rasmi yang dipautkan artikel.
4. Akhiri dengan soalan terbuka dan perkara yang tidak dapat disahkan.
Bạn là kỹ sư UI cấp cao. Hãy áp dụng bài viết “Magic UI chuyên sâu: component động cài như shadcn” (https://ui.incidental.site/blog/magic-ui-deep-dive/) cho dự án của tôi.
Ý chính: Bộ component chuyển động MIT phân phối qua shadcn registry.
Các bước:
1. Đọc bài và biến lời khuyên thành danh sách kiểm tra đánh số, cụ thể, kiểm chứng được.
2. Rà soát <trang / component / repo của tôi> theo danh sách đó; ghi ĐẠT hoặc KHÔNG ĐẠT kèm tệp và dòng.
3. Sửa các mục KHÔNG ĐẠT theo từng đợt nhỏ, dùng token và component sẵn có. Không bịa API; làm theo tài liệu chính thức mà bài viết dẫn tới.
4. Kết thúc bằng các câu hỏi còn mở và những điểm chưa xác minh được.
Tu es ingénieur UI senior. Applique l’article « Magic UI en profondeur : des composants animés qui s'installent comme shadcn » (https://ui.incidental.site/blog/magic-ui-deep-dive/) à mon projet.
Idée clé : Composants animés open source (MIT) distribués via le registre shadcn.
Étapes :
1. Lis l’article et transforme ses conseils en une liste numérotée de règles concrètes et vérifiables.
2. Audite <ma page / mon composant / mon dépôt> avec cette liste ; indique OK ou KO pour chaque règle, avec fichier et ligne.
3. Corrige les points KO par petits lots, avec mes tokens et composants existants. N’invente pas d’API ; suis la documentation officielle citée par l’article.
4. Termine par les questions ouvertes et ce que tu n’as pas pu vérifier.
Eres un ingeniero de UI sénior. Aplica el artículo “Magic UI a fondo: componentes animados que se instalan como shadcn” (https://ui.incidental.site/blog/magic-ui-deep-dive/) a mi proyecto.
Idea clave: Componentes animados open source (MIT) distribuidos por el registro de shadcn.
Pasos:
1. Lee el artículo y convierte sus consejos en una lista numerada de reglas concretas y comprobables.
2. Audita <mi página / componente / repositorio> con esa lista; marca cada regla como CUMPLE o NO CUMPLE con archivo y línea.
3. Corrige los puntos que no cumplen en lotes pequeños, usando mis tokens y componentes actuales. No inventes APIs; sigue la documentación oficial que enlaza el artículo.
4. Termina con las preguntas abiertas y lo que no pudiste verificar.
Du bist Senior-UI-Engineer. Wende den Artikel „Magic UI im Detail: animierte Komponenten, installiert wie shadcn“ (https://ui.incidental.site/blog/magic-ui-deep-dive/) auf mein Projekt an.
Kernidee: Open-Source-Motion-Komponenten (MIT) über die shadcn-Registry.
Schritte:
1. Lies den Artikel und mach aus den Empfehlungen eine nummerierte Liste konkreter, prüfbarer Regeln.
2. Prüfe <meine Seite / Komponente / mein Repo> anhand dieser Liste; markiere jede Regel mit OK oder FEHLT, mit Datei und Zeile.
3. Behebe die fehlenden Punkte in kleinen Schritten mit meinen vorhandenen Tokens und Komponenten. Erfinde keine APIs; folge der offiziellen Doku, die der Artikel verlinkt.
4. Schließe mit offenen Fragen und dem, was du nicht prüfen konntest.

引用来源引用來源References参考文献참고 자료RujukanNguồn tham khảoRéférencesReferenciasQuellen

  1. Magic UI — Magic UI
  2. magicuidesign/magicui (MIT) — GitHub
  3. Understanding SC 2.2.2: Pause, Stop, Hide — W3C
  4. shadcn registry docs — shadcn

相关文章相關文章Related posts関連記事관련 글Artikel berkaitanBài liên quanArticles liésArtículos relacionadosÄhnliche Beiträge

组件库深读元件庫深讀Component librariesコンポーネント컴포넌트Pustaka komponenThư viện componentBibliothèquesBibliotecasKomponenten2026-10-142 分钟阅读2 分鐘閱讀2 min read2 分で読めます2 분 읽기2 min bacaan2 phút đọc2 min de lecture2 min de lectura2 Min. Lesezeit

Aceternity UI 深读：惊艳效果，要省着用Aceternity UI 深讀：驚豔效果，要省著用Aceternity UI deep dive: spectacle, used sparinglyAceternity UI徹底解説：派手さは控えめにAceternity UI 심층 분석: 화려함은 아껴서Aceternity UI mendalam: kemewahan, guna dengan jimatAceternity UI chuyên sâu: hiệu ứng ấn tượng, dùng tiết kiệmAceternity UI en profondeur : du spectacle, avec parcimonieAceternity UI a fondo: espectáculo, con moderaciónAceternity UI im Detail: Spektakel, sparsam eingesetzt

可复制粘贴的 React + Tailwind + Motion 特效，带火了「fancy」落地页风格。哪些能撑起页面，哪些会把页面变成特效合集。可複製貼上的 React + Tailwind + Motion 特效，帶紅了「fancy」落地頁風格。哪些能撐起頁面，哪些會讓頁面變成特效合輯。Copy-paste React + Tailwind + Motion effects that made the "fancy" landing look popular. Which pieces carry a page and which turn it into a demo reel.React+Tailwind+Motionのコピペ演出。ページを支える部品と、デモリールにしてしまう部品。복사-붙여넣기 React+Tailwind+Motion 효과. 페이지를 받쳐 주는 것과 데모 릴로 만드는 것.Kesan React+Tailwind+Motion salin-tampal. Mana yang menyokong halaman, mana yang jadi demo.Hiệu ứng React+Tailwind+Motion copy-paste. Phần nào nâng trang, phần nào biến trang thành demo.Effets React+Tailwind+Motion à copier-coller : ce qui porte une page, ce qui en fait une démo.Efectos React+Tailwind+Motion para copiar: lo que sostiene una página y lo que la vuelve demo.Copy-paste-Effekte mit React+Tailwind+Motion: was eine Seite trägt, was sie zur Demo macht.

Aceternity UImotioncomponents
组件库深读元件庫深讀Component librariesコンポーネント컴포넌트Pustaka komponenThư viện componentBibliothèquesBibliotecasKomponenten2026-10-148 分钟阅读8 分鐘閱讀6 min read6 分で読めます6 분 읽기6 min bacaan6 phút đọc6 min de lecture6 min de lectura6 Min. Lesezeit

Cult UI 深读：有手感、有个性的组件Cult UI 深讀：有手感、有個性的元件Cult UI deep dive: tactile components with personalityCult UI徹底解説：触感と個性のある部品Cult UI 심층 분석: 촉감과 개성이 있는 컴포넌트Cult UI mendalam: komponen taktil berperibadiCult UI chuyên sâu: component có cảm giác và cá tínhCult UI en profondeur : des composants tactiles avec du caractèreCult UI a fondo: componentes táctiles con personalidadCult UI im Detail: taktile Komponenten mit Charakter

兼容 shadcn、带物理手感的组件：灵动岛、质感按钮、可展开卡片。如何借来个性而不破坏一致性。相容 shadcn、帶物理手感的元件：動態島、質感按鈕、可展開卡片。如何借來個性而不破壞一致性。shadcn-compatible components that feel physical: dynamic islands, textured buttons, expandable cards. How to borrow personality without breaking consistency.shadcn互換で物理的な触感の部品。一貫性を壊さずに個性を借りる方法。shadcn 호환, 물리적 촉감의 컴포넌트. 일관성을 해치지 않고 개성을 빌리는 법.Komponen serasi shadcn yang terasa fizikal.Component tương thích shadcn có cảm giác vật lý.Composants compatibles shadcn au toucher physique.Componentes compatibles con shadcn con tacto físico.shadcn-kompatible Komponenten mit physischem Gefühl.

Cult UIshadcncomponents
组件库深读元件庫深讀Component librariesコンポーネント컴포넌트Pustaka komponenThư viện componentBibliothèquesBibliotecasKomponenten2026-10-142 分钟阅读2 分鐘閱讀2 min read2 分で読めます2 분 읽기2 min bacaan2 phút đọc2 min de lecture2 min de lectura2 Min. Lesezeit

shadcn Blocks 与 Registry：把页面区块当源码shadcn Blocks 與 Registry：把頁面區塊當原始碼shadcn blocks and registries: page sections as source codeshadcnブロックとレジストリ：ページ部品をソースとしてshadcn 블록과 레지스트리: 페이지 섹션을 소스 코드로Blok dan registry shadcn: bahagian halaman sebagai kod sumbershadcn blocks và registry: khối trang dưới dạng mã nguồnBlocs et registres shadcn : des sections de page en code sourceBloques y registros de shadcn: secciones como código fuenteshadcn-Blocks und Registries: Seitenabschnitte als Quellcode

Blocks（仪表盘、侧栏、登录页）一条 CLI 命令就能装，任何团队都能发布自己的 registry。为什么这是 AI 智能体最好的底座。Blocks（儀表板、側欄、登入頁）一條 CLI 指令就能裝，任何團隊都能發布自己的 registry。為何這是 AI 智慧體最好的底座。Blocks (dashboards, sidebars, login pages) install with one CLI command, and any team can publish its own registry. Why this is the best substrate for AI agents.ブロックはCLI一発で導入、どのチームも独自レジストリを公開可能。AIエージェントに最適な土台の理由。블록은 CLI 한 줄로 설치, 누구나 레지스트리 공개 가능. AI 에이전트에 최적인 이유.Blok dipasang dengan satu arahan CLI; mana-mana pasukan boleh terbitkan registry.Block cài bằng một lệnh CLI; nhóm nào cũng có thể phát hành registry riêng.Les blocs s'installent en une commande ; chaque équipe peut publier son registre.Los bloques se instalan con un comando; cualquier equipo puede publicar su registro.Blocks per CLI-Befehl; jedes Team kann eine eigene Registry veröffentlichen.

shadcnblocksregistry