Development
Plugin
magicui
UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source.
Plugin Signal58/100Fair
maintained100
capable14
documented23
adopted92
Install
$ npx -y skills add magicuidesign/magicui --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
21,851
Stars
1,092
Forks
Active
Maintenance
MDX
Language
MIT
License
23h ago
Last commit
3y ago
Created
Repo: magicuidesign/magicui
What's inside
Badges
1
README
1Documentation
Visit https://magicui.design/docs to view the documentation.
Contributing
Visit our contributing guide to learn how to contribute. It only takes ~5 minutes to add your own!
Community
Have questions, comments or feedback? Join our discord.
Authors
Stats
Star History
License
Licensed under the MIT license.
File tree
966magicuidesign/magicuiView on GitHub
.cursor/
mcp.json
.editorconfig
.gitattributes
.github/
ISSUE_TEMPLATE/
bug_report.yml
feature_request.yml
PULL_REQUEST_TEMPLATE.md
scripts/
publish-articles.cjs
submit-sitemap.mjs
workflows/
code-check.yml
publish-article.yml
submit-sitemap.yml
.gitignore
.nvmrc
.prettierignore
AGENTS.md
apps/
www/
.env.example
.gitignore
.prettierignore
app/
(blog)/
blog/
[...slug]/
page.tsx
layout.tsx
page.tsx
(docs)/
docs/
[[...slug]]/
page.tsx
layout.tsx
loading.tsx
not-found.tsx
layout.tsx
(marketing)/
layout.tsx
page.tsx
showcase/
[...slug]/
page.tsx
page.tsx
api/
blog-webhook/
route.ts
apple-icon.png
favicon.ico
icon.png
icon.svg
layout.tsx
llm/
[[...slug]]/
route.ts
not-found.tsx
og/
geist-regular-otf.json
geist-semibold-otf.json
geistmono-regular-otf.json
route.tsx
robots.ts
sitemap.ts
components/
components.json
analytics.tsx
blog/
mobile-toc.tsx
table-of-contents.tsx
blur-image.tsx
callout.tsx
code-block-command.tsx
code-block-wrapper.tsx
code-collapsible-wrapper.tsx
code-tabs.tsx
command-menu.tsx
component-preview-tabs.tsx
component-preview.tsx
component-source.tsx
components-list.tsx
contribute.tsx
copy-button.tsx
deal-banner.tsx
discord-link.tsx
docs-copy-page.tsx
docs-sidebar.tsx
docs-toc.tsx
github-link.tsx
gradient-blur.tsx
icons.tsx
logo-button.tsx
main-nav.tsx
mobile-nav.tsx
mode-toggle.tsx
open-in-v0-button.tsx
ping-dot.tsx
posthog-provider.tsx
sections/
component-demos.tsx
cta.tsx
expandable-masonary-section.tsx
hero.tsx
showcase.tsx
testimonial-tweet-link.tsx
testimonials.tsx
video-testimonials.tsx
sidebar-cta.tsx
site-banner.tsx
site-footer.tsx
site-header.tsx
tech-stack.tsx
template-open.tsx
template-preview.tsx
theme-provider.tsx
ui/
accordion.tsx
alert.tsx
avatar.tsx
badge.tsx
button.tsx
calendar.tsx
card.tsx
collapsible.tsx
command.tsx
context-menu.tsx
dialog.tsx
dropdown-menu.tsx
form.tsx
input.tsx
label.tsx
popover.tsx
scroll-area.tsx
select.tsx
separator.tsx
sheet.tsx
sidebar.tsx
skeleton.tsx
sonner.tsx
switch.tsx
table.tsx
tabs.tsx
tooltip.tsx
version-select.tsx
config/
docs.ts
site.ts
content/
blog/
animated-landing-page.mdx
animation-libraries.mdx
animation-on-scroll-css.mdx
ant-design-alternatives.mdx
ant-design-vs-material-ui.mdx
app-landing-page.mdx
best-react-component-library.mdx
best-react-native-ui-library.mdx
best-react-ui-framework.mdx
best-saas-landing-pages.mdx
best-web-design-tools.mdx
best-web-developer-portfolios.mdx
bootstrap-vs-react.mdx
cards-ui-design.mdx
carousel-user-interface.mdx
chakra-ui-vs-material-ui.mdx
color-theory-for-web-design.mdx
component-libraries.mdx
component-library-examples.mdx
cool-css-animations.mdx
cool-react-components.mdx
create-next-js-app.mdx
create-nextjs-app.mdx
create-react-component-library.mdx
creating-next-js-app.mdx
creative-landing-page-design.mdx
css-animation-on-scroll.mdx
css-buttons-hover.mdx
css-loader-animation.mdx
css-loading-animation.mdx
cta-design.mdx
dashboard-design-ui.mdx
disable-textarea-resize.mdx
drop-down-menu-in-js.mdx
dropdown-in-react-js.mdx
faq-template.mdx
framer-motion-react.mdx
free-react-components.mdx
hero-section-design.mdx
how-to-add-animation-to-website.mdx
how-to-build-a-landing-page.mdx
how-to-choose-tech-stack.mdx
how-to-create-a-landing-page.mdx
how-to-create-drop-down-menu.mdx
how-to-create-navigation-bar-in-html.mdx
how-to-design-a-landing-page.mdx
how-to-display-testimonials-on-website.mdx
how-to-improve-website-conversion-rates.mdx
how-to-improve-website-loading-speed.mdx
how-to-improve-website-performance.mdx
how-to-learn-react.mdx
how-to-make-an-animated-website.mdx
how-to-make-an-interactive-website.mdx
how-to-make-backgrounds-for-animation.mdx
how-to-optimize-images-for-web.mdx
infinite-scroll-react.mdx
install-tailwind-css.mdx
install-tailwind-react.mdx
installing-tailwind-css.mdx
interactive-landing-page.mdx
landing-page-call-to-action.mdx
landing-page-copywriting.mdx
landing-page-design-templates.mdx
landing-page-examples.mdx
landing-page-sections.mdx
landing-page-ui.mdx
mantine-vs-chakra.mdx
material-ui-alternatives.mdx
material-ui-react.mdx
material-ui-vs-joy-ui.mdx
mui-box.mdx
mui-card.mdx
mui-react.mdx
mui-table.mdx
mui-transitions.mdx
navbar-in-react-js.mdx
navbar-react-js.mdx
navigation-bar-for-website.mdx
next-js-app.mdx
next-js-create-app.mdx
next-js-getting-started.mdx
next-js-layout.mdx
next-js-project-structure.mdx
next-js-tailwind.mdx
next-js.mdx
nextjs-landing-page.mdx
nextjs-portfolio-template.mdx
nextjs-website-template.mdx
nextjs.mdx
portfolio-landing-page.mdx
pricing-page-examples.mdx
react-animation-examples.mdx
react-animation-libraries.mdx
react-best-practices.mdx
react-bootstrap.mdx
react-component-best-practices.mdx
react-css-framework.mdx
react-design-patterns.mdx
react-frameworks.mdx
react-header.mdx
react-hero-component.mdx
react-infinite-scroll.mdx
react-js-file-upload.mdx
react-js-form-validation.mdx
react-js-navbar.mdx
react-js-navigation-bar.mdx
react-landing-page.mdx
react-libraries.mdx
react-native-libraries.mdx
react-portfolio-template.mdx
react-projects-for-beginners.mdx
react-tips.mdx
react-ui-framework.mdx
react-ux.mdx
responsive-web-design-templates.mdx
saas-landing-page-best-practices.mdx
search-input-with-icon.mdx
semantic-ui-vs-material-ui.mdx
shadcn-ui.mdx
sidebar-for-website.mdx
social-proof-on-website.mdx
startup-landing-page.mdx
tailwind-border-radius.mdx
tailwind-cdn-html.mdx
tailwind-css-button.mdx
tailwind-css-component-library.mdx
tailwind-css-grid.mdx
tailwind-css-install.mdx
tailwind-css-react.mdx
tailwind-css-template.mdx
tailwind-css-templates-free.mdx
tailwind-css-themes.mdx
tailwind-dark-mode.mdx
tailwind-font-size.mdx
tailwind-landing-page-templates.mdx
tailwind-landing-page.mdx
tailwind-portfolio-template.mdx
tailwind-vs-bootstrap.mdx
text-animation-css.mdx
text-loading-bar.mdx
time-and-date-picker.mdx
typescript-vs-javascript-differences.mdx
ui-animation.mdx
ui-card-design.mdx
ui-framework-for-react.mdx
ui-frameworks.mdx
ui-libraries.mdx
user-interface-design-patterns.mdx
user-interface-themes.mdx
visual-hierarchy-in-web-design.mdx
waitlist-landing-page.mdx
web-animation-tools.mdx
web-application-design.mdx
web-design-best-practices.mdx
web-design-trends.mdx
website-animation-examples.mdx
website-footer.mdx
website-header-examples.mdx
website-logo-examples.mdx
websites-with-great-ui.mdx
what-are-ui-components.mdx
what-is-a-component-library.mdx
what-is-mobile-first-design.mdx
what-is-nextjs.mdx
docs/
components/
android.mdx
animated-beam.mdx
animated-circular-progress-bar.mdx
animated-gradient-text.mdx
animated-grid-pattern.mdx
animated-list.mdx
animated-shiny-text.mdx
animated-theme-toggler.mdx
aurora-text.mdx
avatar-circles.mdx
backlight.mdx
bento-grid.mdx
blur-fade.mdx
border-beam.mdx
code-comparison.mdx
comic-text.mdx
confetti.mdx
cool-mode.mdx
dia-text-reveal.mdx
dock.mdx
dot-pattern.mdx
dotted-map.mdx
file-tree.mdx
flickering-grid.mdx
glare-hover.mdx
globe.mdx
glyph-matrix.mdx
grid-pattern.mdx
hero-video-dialog.mdx
hexagon-pattern.mdx
highlighter.mdx
hyper-text.mdx
icon-cloud.mdx
index.mdx
interactive-grid-pattern.mdx
interactive-hover-button.mdx
iphone.mdx
kinetic-text.mdx
lens.mdx
light-rays.mdx
line-shadow-text.mdx
magic-card.mdx
marquee.mdx
meteors.mdx
morphing-text.mdx
neon-gradient-card.mdx
noise-texture.mdx
number-ticker.mdx
orbiting-circles.mdx
particles.mdx
pixel-image.mdx
pointer.mdx
progressive-blur.mdx
pulsating-button.mdx
rainbow-button.mdx
retro-grid.mdx
ripple-button.mdx
ripple.mdx
safari.mdx
scroll-based-velocity.mdx
scroll-progress.mdx
shimmer-button.mdx
shine-border.mdx
shiny-button.mdx
smooth-cursor.mdx
sparkles-text.mdx
spinning-text.mdx
striped-pattern.mdx
terminal.mdx
text-3d-flip.mdx
text-animate.mdx
text-reveal.mdx
tweet-card.mdx
typing-animation.mdx
video-text.mdx
warp-background.mdx
word-rotate.mdx
index.mdx
installation/
index.mdx
legacy.mdx
mcp.mdx
story.mdx
... 615 moreFAQ
magicui is a Claude Code plugin with 1 hand-picked skill for development work, indexed on Flowy. Install it with the command on its page. It includes magic-ui. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is magicui?
- UI Library for Design Engineers. Animated components and effects you can copy and paste into your apps. Free. Open Source.
- How do I install magicui?
- Run these in Claude Code: npx -y skills add magicuidesign/magicui --agent claude-code. Then prompt normally.
- Does magicui auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is magicui free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.