duck/ui vs Magic UI
A large free registry of animated React components — marquees, animated beams, bento grids, text effects — built on React, Tailwind and Motion.
Short answer
Magic UI is a catalogue of animation effects; duck/ui is a theme with components attached. Magic UI is the better pick when you need a specific motion effect for a marketing page and the rest of your design is already settled. duck/ui is the better pick when the problem is that nothing on the page has a shared look, because the install starts with a token set that restyles what you already built.
Magic UI is best described as: animated component registry. Compared against its publicly documented positioning as of 2026-07-31.
What Magic UI does well
Stated first, because a comparison that skips this is not worth reading.
- Far more animation effects than duck/ui ships, and more arriving.
- Effects are genuinely well made — the animated beam and text effects in particular.
- MIT and copy-paste, so nothing is locked behind a package.
- Built for landing pages, where a single striking effect earns its keep.
Where they differ
| Magic UI | duck/ui | |
|---|---|---|
| Unit of value | The individual effect | The token set, then the components |
| Effect on existing pages | None until you place a component | Immediate — the theme restyles shadcn components already in the project |
| Motion budget | Per component; up to you to ration | Published rule: one idle animation and one holo element per viewport |
| Runtime cost | Motion (framer-motion) at runtime for most effects | CSS keyframes shipped by the theme; no motion dependency from the registry |
| Coverage | Broad animation catalogue | 37 components, three blocks, one theme — additive to shadcn |
Which to pick
Pick Magic UI
Pick Magic UI when you need a specific effect — an animated beam between two nodes, a marquee, a particular text reveal — and you are not trying to change how the rest of the app looks.
Visit Magic UIPick duck/ui
Pick duck/ui when the whole surface needs to look like one system, dark first, and you would rather install a token contract than assemble a page out of unrelated effects.
Read the install guideUsing both
They coexist. Both are copy-paste under the shadcn CLI, so a Magic UI effect dropped into a duck/ui project keeps working — but it will not inherit the duck tokens unless you point its colours at bg-primary and friends. Budget the motion: one idle animation per viewport is the duck rule, and a marquee plus a holo element already spends it.
FAQ
Can I use Magic UI and duck/ui in the same project?
Yes. Both install through the shadcn CLI and copy files into your repository, so there is no package conflict. Rewrite the Magic UI component's hardcoded colours to semantic tokens if you want it to follow the duck theme.
Is duck/ui a Magic UI alternative?
Only partly. Magic UI is an animation catalogue and duck/ui is a theme-first registry, so they answer different questions. If you came looking for a specific effect, Magic UI probably has it; if you came because your app looks generic, the theme is the thing that fixes that.