Sign inStart a project

SCRIPT NINJA / PRODUCT

Magic UI Animated Component Kit

Animated React components for landing pages and product interfaces. Explore the free registry for buttons, text effects, bento grids and background treatments.

Download source ZIP Browse components
Magic UI Animated Component Kit collection illustration
Collection illustration. See the author's demo for the upstream design.

Animated React components for landing pages and product interfaces. Explore the free registry for buttons, text effects, bento grids and background treatments.

What you can build.

  • Animated text and button components
  • Bento grids and background effects
  • Free registry and documentation source

Inside the download.

  • Upstream source files and setup documentation
  • UPSTREAM-LICENSE.txt with the original copyright notice
  • SOURCE.json and SCRIPT-NINJA-README.md

Getting started.

Use apps/www/registry/ and its component documentation.
Follow the upstream README for the registry installation workflow.

Free MIT registry and source only. Premium products are not included. Individual components may require Motion or other dependencies.

Licence and credits.

MIT licence. You may use, modify and redistribute the code, including commercially, while retaining the upstream copyright and licence notice. Dependency licences and third-party image or trademark rights apply separately.

Original author: Magic UI contributors. Curated by Script Ninja.

Bundled raster demo images are neutral SVG placeholders. Replace remote images, sample names and brand marks before launch. The upstream demo may show artwork that is not in this download.

Support.

Free community source package. Use the upstream documentation and issue tracker. Custom implementation is available by project enquiry.

Make Magic UI Animated Component Kit fit your project. Illustrated project structure.A practical starting point for your project

PLAN THE NEXT STEP

Make Magic UI Animated Component Kit fit your project.

Review the source package and setup notes first. Replace demonstration content, check the dependencies you install and test the result against the pages or workflow you need.

Download source ZIP Browse components

MAKE IT ACTIONABLE

From download to your own implementation.

Choose the next step that matches where you are in the project.

Read the package notes

Start with the included README and licence files. Check React / TypeScript / Tailwind requirements before installing.

Download the source

Adapt your content

Replace sample text, brands and placeholders with assets you have permission to use.

Discuss customisation

BEFORE YOU BEGIN

A few useful answers.

Have a question about your project or account?

Send your requirements
Can I use these packages commercially?

The current source packages use the MIT licence. Keep the original copyright and permission notices, and check separate rights for images, trademarks and dependencies.

Are the downloads ready-made hosted websites?

These are source packages with setup notes. You will need the required development tools and your own hosting. Read the product requirements before downloading.

Can Script Ninja customise a template?

Yes. Send the template name, your content and the changes you need. Custom implementation is scoped and quoted separately.

LET'S MAKE SOMETHING USEFUL.

Need a hand adapting this package?

Bring your goals, your questions and the work you want to move forward.

Share your template brief