[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"workflow-asset-ca9d165d":3,"seo:featured-workflow:ca9d165d-4d35-11f1-9bc6-00163e2b0d79:zh":83,"workflow-related-asset-ca9d165d-ca9d165d-4d35-11f1-9bc6-00163e2b0d79":84},{"id":4,"uuid":5,"slug":6,"title":7,"description":8,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":13,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":15,"tags":21,"has_voted":27,"visibility":13,"share_token":11,"is_featured":12,"content_hash":28,"asset_kind":29,"target_tools":30,"install_mode":34,"entrypoint":18,"risk_profile":35,"dependencies":37,"verification":42,"agent_metadata":45,"agent_fit":58,"trust":70,"provenance":79,"created_at":81,"updated_at":82},3047,"ca9d165d-4d35-11f1-9bc6-00163e2b0d79","asset-ca9d165d","Magic UI — Animated React Components for Design Engineers","Magic UI is a free open-source collection of animated React components built with Tailwind CSS, Framer Motion, and shadcn\u002Fui conventions that you copy and paste into your projects.","8a911193-3180-11f1-9bc6-00163e2b0d79","AI Open Source","",0,1,"en",[16],{"id":17,"step_order":13,"title":18,"description":11,"prompt_template":19,"variables":11,"depends_on":20,"expected_output":11},3610,"Magic UI Overview","# Magic UI — Animated React Components for Design Engineers\n\n## Quick Use\n```bash\nnpx shadcn@latest add \"https:\u002F\u002Fmagicui.design\u002Fr\u002Fmarquee\"\n```\nThen use in your component:\n```tsx\nimport { Marquee } from \"@\u002Fcomponents\u002Fmagicui\u002Fmarquee\"\n\u003CMarquee pauseOnHover>{items}\u003C\u002FMarquee>\n```\n\n## Introduction\nMagic UI is a collection of animated, copy-paste UI components for React and Next.js. Built on Tailwind CSS and Framer Motion, it follows the shadcn\u002Fui pattern where you own the source code rather than depending on a package, giving full control over customization and bundle size.\n\n## What Magic UI Does\n- Provides 50+ animated components: marquees, text animations, backgrounds, cards, and effects\n- Uses the shadcn\u002Fui CLI pattern for adding components directly into your project\n- Ships source code you own, not an npm dependency to manage\n- Offers landing page sections and templates ready for marketing sites\n- Supports both light and dark mode with Tailwind CSS class variants\n\n## Architecture Overview\nEach Magic UI component is a standalone React file using Tailwind CSS for styling and Framer Motion for animations. Components are published to a registry that the shadcn CLI can resolve. When you add a component, the CLI copies the source files into your project's components directory along with any required utilities. There is no runtime library to import.\n\n## Self-Hosting & Configuration\n- Requires a React\u002FNext.js project with Tailwind CSS and Framer Motion installed\n- Add components via `npx shadcn@latest add \"https:\u002F\u002Fmagicui.design\u002Fr\u002F\u003Cname>\"`\n- Components land in your `components\u002Fmagicui\u002F` directory as editable source files\n- Customize animations by editing Framer Motion props directly in the component\n- Works with any Tailwind theme configuration you already have\n\n## Key Features\n- Copy-paste model means zero dependency overhead and full code ownership\n- Animated text components include typewriter, blur-in, gradual-spacing, and word-rotate\n- Background effects like dot pattern, grid pattern, ripple, and particles\n- Marquee, dock, globe, and bento grid components for landing page layouts\n- Built-in dark mode support through Tailwind's `dark:` variant classes\n\n## Comparison with Similar Tools\n- **shadcn\u002Fui** — Foundation Magic UI builds on; shadcn focuses on core UI primitives, Magic UI adds animated effects\n- **Aceternity UI** — Similar animated component approach; Magic UI follows shadcn CLI conventions more closely\n- **Framer Motion** — The animation engine Magic UI uses; Magic UI provides pre-composed components\n- **Radix UI** — Headless accessible primitives; Magic UI focuses on visual effects and animations\n- **Chakra UI** — Full design system with runtime CSS-in-JS; Magic UI is static Tailwind with motion\n\n## FAQ\n**Q: Is Magic UI free?**\nA: Yes. All components are MIT-licensed and free to use in personal and commercial projects.\n\n**Q: Do I need shadcn\u002Fui installed first?**\nA: A shadcn\u002Fui setup (Tailwind + the CLI) is recommended since Magic UI uses the same registry and conventions.\n\n**Q: Does Magic UI work with plain React (not Next.js)?**\nA: Yes. Any React project with Tailwind CSS and Framer Motion can use Magic UI components.\n\n**Q: How do I update a component after copying it?**\nA: Since you own the source, re-run the CLI add command to overwrite, or manually merge changes from the Magic UI docs.\n\n## Sources\n- https:\u002F\u002Fgithub.com\u002Fmagicuidesign\u002Fmagicui\n- https:\u002F\u002Fmagicui.design","0",[22],{"id":23,"name":24,"slug":25,"icon":26},12,"Configs","config","⚙️",false,"b002ab3fa4d659666f6be10fe71535fefa1b4ddc286e8739adb234c01c65d621","skill",[31,32,33],"claude_code","codex","gemini_cli","single",{"executes_code":27,"modifies_global_config":27,"requires_secrets":36,"uses_absolute_paths":27,"network_access":27},[],{"npm":38,"pip":39,"brew":40,"system":41},[],[],[],[],{"commands":43,"expected_files":44},[],[18],{"asset_kind":29,"target_tools":46,"install_mode":34,"entrypoint":18,"risk_profile":47,"dependencies":49,"content_hash":28,"verification":54,"inferred":57},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":48,"uses_absolute_paths":27,"network_access":27},[],{"npm":50,"pip":51,"brew":52,"system":53},[],[],[],[],{"commands":55,"expected_files":56},[],[18],true,{"target":32,"score":59,"status":60,"policy":61,"why":62,"asset_kind":29,"install_mode":34},98,"native","allow",[63,64,65,66,67,68,69],"target_tools includes codex","asset_kind skill","install_mode single","markdown-only","policy allow","safe markdown-only Codex install","trust established",{"author_trust_level":71,"verified_publisher":27,"asset_signed_hash":28,"signature_status":72,"install_count":12,"report_count":12,"dangerous_capability_badges":73,"review_status":74,"signals":75},"established","hash_only",[],"unreviewed",[76,77,78],"author has published assets","content hash available","no dangerous capability badges",{"owner_uuid":9,"owner_name":10,"source_url":80,"content_hash":28,"visibility":13,"created_at":81,"updated_at":82},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fasset-ca9d165d","2026-05-11 20:34:45","2026-05-11 22:28:41",null,[85,138,185,231],{"id":86,"uuid":87,"slug":88,"title":89,"description":90,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":91,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":92,"tags":93,"has_voted":27,"visibility":13,"share_token":11,"is_featured":12,"content_hash":95,"asset_kind":29,"target_tools":96,"install_mode":34,"entrypoint":97,"risk_profile":98,"dependencies":100,"verification":105,"agent_metadata":108,"agent_fit":120,"trust":122,"provenance":126,"created_at":128,"updated_at":129,"__relatedScore":130,"__relatedReasons":131,"__sharedTags":136},1025,"25e291e1-35b8-11f1-9bc6-00163e2b0d79","ant-design-enterprise-class-react-ui-library-25e291e1","Ant Design — Enterprise-Class React UI Library","Ant Design is an enterprise-class UI design language and React component library created by Alibaba. 60+ production-ready components with comprehensive patterns, internationalization for 30+ languages, and a rich theme system. The go-to choice for admin dashboards.",123,[],[94],{"id":23,"name":24,"slug":25,"icon":26},"460ef48461de8e9e15ebdddee74cf6b4048361119e3de4f9f5cf3baf5512807c",[31,32,33],"SKILL.md",{"executes_code":27,"modifies_global_config":27,"requires_secrets":99,"uses_absolute_paths":27,"network_access":27},[],{"npm":101,"pip":102,"brew":103,"system":104},[],[],[],[],{"commands":106,"expected_files":107},[],[11],{"asset_kind":29,"target_tools":109,"install_mode":34,"entrypoint":97,"risk_profile":110,"dependencies":112,"content_hash":95,"verification":117},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":111,"uses_absolute_paths":27,"network_access":27},[],{"npm":113,"pip":114,"brew":115,"system":116},[],[],[],[],{"commands":118,"expected_files":119},[],[11],{"target":32,"score":59,"status":60,"policy":61,"why":121,"asset_kind":29,"install_mode":34},[63,64,65,66,67,68,69],{"author_trust_level":71,"verified_publisher":27,"asset_signed_hash":95,"signature_status":72,"install_count":12,"report_count":12,"dangerous_capability_badges":123,"review_status":74,"signals":124},[],[125,76,77,78],"asset has usage views",{"owner_uuid":9,"owner_name":10,"source_url":127,"content_hash":95,"visibility":13,"created_at":128,"updated_at":129},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fant-design-enterprise-class-react-ui-library-25e291e1","2026-04-11 23:07:25","2026-05-11 21:09:57",127.14013252774335,[132,133,134,135],"topic-match","same-kind","same-target","same-author",[25,137],"configs",{"id":139,"uuid":140,"slug":141,"title":142,"description":143,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":144,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":145,"tags":146,"has_voted":27,"visibility":13,"share_token":11,"is_featured":12,"content_hash":148,"asset_kind":29,"target_tools":149,"install_mode":34,"entrypoint":150,"risk_profile":151,"dependencies":153,"verification":158,"agent_metadata":161,"agent_fit":173,"trust":175,"provenance":178,"created_at":180,"updated_at":181,"__relatedScore":182,"__relatedReasons":183,"__sharedTags":184},2453,"bdf004e4-4517-11f1-9bc6-00163e2b0d79","flowbite-open-source-ui-components-built-tailwind-css-bdf004e4","Flowbite — Open-Source UI Components Built with Tailwind CSS","A library of interactive UI components — modals, dropdowns, navbars, carousels, and more — designed for Tailwind CSS. Available as vanilla JS, React, Svelte, and Vue packages.",75,[],[147],{"id":23,"name":24,"slug":25,"icon":26},"50123c6c337e28fa1c4d11cab73991833095e9b20b4451b355a4817c4f9c3f66",[31,32,33],"Flowbite",{"executes_code":27,"modifies_global_config":27,"requires_secrets":152,"uses_absolute_paths":27,"network_access":27},[],{"npm":154,"pip":155,"brew":156,"system":157},[],[],[],[],{"commands":159,"expected_files":160},[],[150],{"asset_kind":29,"target_tools":162,"install_mode":34,"entrypoint":150,"risk_profile":163,"dependencies":165,"content_hash":148,"verification":170},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":164,"uses_absolute_paths":27,"network_access":27},[],{"npm":166,"pip":167,"brew":168,"system":169},[],[],[],[],{"commands":171,"expected_files":172},[],[150],{"target":32,"score":59,"status":60,"policy":61,"why":174,"asset_kind":29,"install_mode":34},[63,64,65,66,67,68,69],{"author_trust_level":71,"verified_publisher":27,"asset_signed_hash":148,"signature_status":72,"install_count":12,"report_count":12,"dangerous_capability_badges":176,"review_status":74,"signals":177},[],[76,77,78],{"owner_uuid":9,"owner_name":10,"source_url":179,"content_hash":148,"visibility":13,"created_at":180,"updated_at":181},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fflowbite-open-source-ui-components-built-tailwind-css-bdf004e4","2026-05-01 12:39:29","2026-05-11 22:24:35",126.82122038842118,[132,133,134,135],[25,137],{"id":186,"uuid":187,"slug":188,"title":189,"description":190,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":191,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":192,"tags":193,"has_voted":27,"visibility":13,"share_token":11,"is_featured":12,"content_hash":195,"asset_kind":29,"target_tools":196,"install_mode":34,"entrypoint":97,"risk_profile":197,"dependencies":199,"verification":204,"agent_metadata":207,"agent_fit":219,"trust":221,"provenance":224,"created_at":226,"updated_at":227,"__relatedScore":228,"__relatedReasons":229,"__sharedTags":230},3051,"0c9bea87-4d36-11f1-9bc6-00163e2b0d79","asset-0c9bea87","Arco Design — Comprehensive React UI Library by ByteDance","Arco Design is a React component library developed by ByteDance featuring 60+ components, a design token system, and built-in dark mode for building modern enterprise applications.",3,[],[194],{"id":23,"name":24,"slug":25,"icon":26},"e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855",[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":198,"uses_absolute_paths":27,"network_access":27},[],{"npm":200,"pip":201,"brew":202,"system":203},[],[],[],[],{"commands":205,"expected_files":206},[],[],{"asset_kind":29,"target_tools":208,"install_mode":34,"entrypoint":97,"risk_profile":209,"dependencies":211,"content_hash":195,"verification":216,"inferred":57},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":210,"uses_absolute_paths":27,"network_access":27},[],{"npm":212,"pip":213,"brew":214,"system":215},[],[],[],[],{"commands":217,"expected_files":218},[],[],{"target":32,"score":59,"status":60,"policy":61,"why":220,"asset_kind":29,"install_mode":34},[63,64,65,66,67,68,69],{"author_trust_level":71,"verified_publisher":27,"asset_signed_hash":195,"signature_status":72,"install_count":12,"report_count":12,"dangerous_capability_badges":222,"review_status":74,"signals":223},[],[76,77,78],{"owner_uuid":9,"owner_name":10,"source_url":225,"content_hash":195,"visibility":13,"created_at":226,"updated_at":227},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fasset-0c9bea87","2026-05-11 20:36:36","2026-05-11 22:45:59",124.90308998699194,[132,133,134,135],[25,137],{"id":232,"uuid":233,"slug":234,"title":235,"description":236,"author_id":9,"author_name":10,"author_avatar":11,"token_estimate":12,"time_saved":12,"model_used":11,"fork_count":12,"vote_count":12,"view_count":237,"parent_id":12,"parent_uuid":11,"lang_type":14,"steps":238,"tags":239,"has_voted":27,"visibility":13,"share_token":11,"is_featured":12,"content_hash":195,"asset_kind":29,"target_tools":241,"install_mode":34,"entrypoint":97,"risk_profile":242,"dependencies":244,"verification":249,"agent_metadata":252,"agent_fit":264,"trust":266,"provenance":269,"created_at":271,"updated_at":272,"__relatedScore":273,"__relatedReasons":274,"__sharedTags":275},2772,"d0868dbb-49a9-11f1-9bc6-00163e2b0d79","asset-d0868dbb","Ariakit — Accessible Headless Components for React","An open-source toolkit of unstyled, accessible React components built on WAI-ARIA patterns with first-class support for Tailwind CSS.",37,[],[240],{"id":23,"name":24,"slug":25,"icon":26},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":243,"uses_absolute_paths":27,"network_access":27},[],{"npm":245,"pip":246,"brew":247,"system":248},[],[],[],[],{"commands":250,"expected_files":251},[],[],{"asset_kind":29,"target_tools":253,"install_mode":34,"entrypoint":97,"risk_profile":254,"dependencies":256,"content_hash":195,"verification":261,"inferred":57},[31,32,33],{"executes_code":27,"modifies_global_config":27,"requires_secrets":255,"uses_absolute_paths":27,"network_access":27},[],{"npm":257,"pip":258,"brew":259,"system":260},[],[],[],[],{"commands":262,"expected_files":263},[],[],{"target":32,"score":59,"status":60,"policy":61,"why":265,"asset_kind":29,"install_mode":34},[63,64,65,66,67,68,69],{"author_trust_level":71,"verified_publisher":27,"asset_signed_hash":195,"signature_status":72,"install_count":12,"report_count":12,"dangerous_capability_badges":267,"review_status":74,"signals":268},[],[76,77,78],{"owner_uuid":9,"owner_name":10,"source_url":270,"content_hash":195,"visibility":13,"created_at":271,"updated_at":272},"https:\u002F\u002Ftokrepo.com\u002Fen\u002Fworkflows\u002Fasset-d0868dbb","2026-05-07 08:15:12","2026-05-11 19:51:00",117.36967539492521,[132,133,134,135],[25,137]]