# UI 前端套件 Demo 可以直接進入官方網站，查看各種網頁 Component 的外觀、動畫與互動效果。 --- ## Vue 3 完整元件庫 * [Naive UI－Switch 開關範例](https://www.naiveui.com/zh-CN/os-theme/components/switch) * [Element Plus](https://element-plus.org/) * [Vuetify](https://vuetifyjs.com/) * [Ant Design Vue](https://antdv.com/) * [PrimeVue](https://primevue.org/) * [Nuxt UI－Components](https://ui.nuxt.com/components) * [TDesign Vue Next](https://tdesign.tencent.com/vue-next/) * [Arco Design Vue](https://arco.design/vue/en-US/component/button) * [Quasar－Vue Components](https://quasar.dev/vue-components/) * [Varlet UI](https://varletjs.org/) --- ## Vue／跨框架 Headless 元件 這類套件著重元件行為、鍵盤操作與無障礙功能，外觀可以自行設計。 * [Reka UI](https://reka-ui.com/) * [Ark UI](https://ark-ui.com/) --- ## React 完整元件庫 * [Material UI（MUI）](https://mui.com/) * [Ant Design](https://ant.design/) * [Chakra UI](https://chakra-ui.com/) * [shadcn/ui](https://ui.shadcn.com/) * [HeroUI](https://www.heroui.com/) * [Mantine](https://mantine.dev/) * [Radix Themes](https://www.radix-ui.com/themes) * [Tailwind Plus](https://tailwindcss.com/plus) --- ## React 動畫與視覺特效元件 這一區最適合直接點進去玩，可以看到滑鼠追蹤、文字動畫、3D 卡片、粒子背景、光影、視差滾動與頁面轉場。 * [Aceternity UI－Components](https://ui.aceternity.com/components) * [Magic UI](https://magicui.design/) * [React Bits](https://reactbits.dev/) * [Motion Primitives](https://motion-primitives.com/) * [Animate UI](https://animate-ui.com/docs) * [SmoothUI－Components](https://smoothui.dev/docs/components) --- ## AI 網頁介面元件 專門展示聊天介面、Prompt 輸入框、AI Reasoning、Tool Call、Code Block、Artifact、附件及串流訊息等元件。 * [Vercel AI Elements](https://elements.ai-sdk.dev/) * [assistant-ui](https://www.assistant-ui.com/docs) * [Prompt Kit](https://www.prompt-kit.com/) --- ## Cloudflare 設計系統 * [Kumo－全部元件](https://kumo-ui.com/) * [Kumo－Button 按鈕範例](https://kumo-ui.com/components/button) * [Kumo－Switch 開關範例](https://kumo-ui.com/components/switch) * [Kumo－Date Picker 日期選擇器](https://kumo-ui.com/components/date-picker) * [Kumo－Dialog 對話框](https://kumo-ui.com/components/dialog) --- ## Web Components 這類元件以瀏覽器原生 Web Components 為基礎，可以搭配 React、Vue、Svelte 或一般 HTML 使用。 * [Web Awesome](https://webawesome.com/) * [Adobe Spectrum Web Components](https://opensource.adobe.com/spectrum-web-components/) --- ## 企業級設計系統 * [Microsoft Fluent 2－React Components](https://fluent2.microsoft.design/components/web/react/) * [Adobe Spectrum Design System](https://spectrum.adobe.com/) * [IBM Carbon Design System](https://carbondesignsystem.com/components/overview/) * [Shopify Polaris](https://polaris.shopify.com/components) * [GitHub Primer](https://primer.style/components/) * [Atlassian Design System](https://atlassian.design/components/) --- ## 建議優先觀看 ### 想看最炫、最前沿的動畫效果 1. [React Bits](https://reactbits.dev/) 2. [Aceternity UI](https://ui.aceternity.com/components) 3. [Magic UI](https://magicui.design/) 4. [Motion Primitives](https://motion-primitives.com/) 5. [SmoothUI](https://smoothui.dev/docs/components) ### 想看精緻、真正適合產品使用的元件 1. [HeroUI](https://www.heroui.com/) 2. [Mantine](https://mantine.dev/) 3. [Nuxt UI](https://ui.nuxt.com/components) 4. [Kumo](https://kumo-ui.com/) 5. [Radix Themes](https://www.radix-ui.com/themes) ### 想看 AI 產品正在使用的新型元件 1. [Vercel AI Elements](https://elements.ai-sdk.dev/) 2. [assistant-ui](https://www.assistant-ui.com/docs) 3. [Prompt Kit](https://www.prompt-kit.com/) ### 想研究大型公司的設計語言 1. [Microsoft Fluent 2](https://fluent2.microsoft.design/components/web/react/) 2. [Adobe Spectrum](https://spectrum.adobe.com/) 3. [IBM Carbon](https://carbondesignsystem.com/components/overview/) 4. [Shopify Polaris](https://polaris.shopify.com/components) 5. [GitHub Primer](https://primer.style/components/)