DocsComponents
Star us
MAGE-UI
MAGE-UI
View code
Bring your ideas to Code with
✨ beautifully crafted animations and effects

—designed to transform your projects,


one copy-paste at a time!

Get startedStar us on GitHub

Checkout the demo below

Tip: Use the view button to see the source.

Border trail

View
No longer wasting hours 🕕 looking for the inspiration or trying to write everything from scratch 📝.
time.saved = true;
frustration--;happiness++;productivity++;

Mirror text

View
Awesomeness
Awesomeness
Awesomeness
Awesomeness

Typing text

View
import BoldCopy from "@/mage-ui/text/bold-copy"
<|

Shiny card

View
cmake.yml
on: push
Install dependencies1m 20s
Build2m 10s
Test1m 30s

Skew card

View

55%

Developer preference for GitHub Copilot

Stack Overflow 2023 Survey

Widgets

View
Cycling2h 30m

Goal
15km4.5km

188 BPM

130 AVG

350m

Gurkha St.

BackgroundYour photo
0
5
4
8

Arrives Today

09:26

In Transit

Pokhara30 min ago
Cycling2h 30m

Goal
15km4.5km

188 BPM

130 AVG

350m

Gurkha St.

BackgroundYour photo
0
5
4
8

Arrives Today

09:26

In Transit

Pokhara30 min ago
Cycling2h 30m

Goal
15km4.5km

188 BPM

130 AVG

350m

Gurkha St.

BackgroundYour photo
0
5
4
8

Arrives Today

09:26

In Transit

Pokhara30 min ago
Cycling2h 30m

Goal
15km4.5km

188 BPM

130 AVG

350m

Gurkha St.

BackgroundYour photo
0
5
4
8

Arrives Today

09:26

In Transit

Pokhara30 min ago
Cycling2h 30m

Goal
15km4.5km

188 BPM

130 AVG

350m

Gurkha St.

BackgroundYour photo
0
5
4
8

Arrives Today

09:26

In Transit

Pokhara30 min ago

Gradient text

View
HELLO

Split text

View
HH
OO
VV
EE
RR

Animated beam

View
Free &Open source
View code

Interactive grid

View
Hover the small squares to see the background effect.

Skeleton

View
Receipt
ReportCSV
Receipt
ReportCSV
Receipt
ReportCSV
Receipt
ReportCSV
Receipt
ReportCSV
FAQ
FAQ
You ask. We answer.
View code

START BUILDING TODAY

View code
Explore Components
Follow On GitHub