AliveUI
AliveUI is a motion-first CSS framework
27 followers
AliveUI is a motion-first CSS framework
27 followers
AliveUI is a motion-first CSS framework. Every surface has depth, every interaction is alive. Add physics-based motion to any web project with a single PostCSS plugin.
Free
Launch Team / Built With
Atlassian LoomShow, don't just tell with Loom
Promoted
Hey Product Hunt! Pratiksha here, maker of AliveUI.
I built this because I kept solving the same problem on every project — adding motion to UIs felt like it
required either a heavyweight JS library or hours of custom CSS. Neither felt right.
AliveUI is a PostCSS plugin that outputs a single CSS file. No JavaScript runtime, no build complexity. You get:
- Depth system — .d1, .d2, .d3 classes that add realistic shadow, lift, and scale on hover. One class, instant
tactility.
- Entrance animations — .alive-enter, .alive-enter-down, .alive-enter-scale etc. triggered by an is-visible class
or Intersection Observer.
- Motion tokens — CSS custom properties for easing curves, durations, and stagger gaps, so everything feels
physically consistent.
- Component primitives — buttons, cards, badges, inputs, modals, toasts — all motion-aware out of the box.
The whole thing is ~8kb gzipped.
Get started in two lines:
npm install @alivecss/aliveui
npx aliveui init
Works with Vite, Next.js, Astro, or anything PostCSS touches.
I'd love to hear what you think — especially if something feels off or missing. Happy to answer any questions
below.
Love it! Excited to try it out 🚀
@saurabh_khante Thanks. Do share feedback to improve it further
Woot woot! Congrats on the launch
@jatinsandilya Thanks. Do give it a try.