Overview
Velnor UI is a free, open collection of animated React components — Tailwind and motion/react — meant to drop into product UI without rebuilding the basics. It sits in the gap between generic component kits and one-off marketing animations: production-ready patterns with motion that still feels intentional.
Problem
Most “animated component” kits either look demos-only or ignore accessibility and composition. Product teams need primitives that respect focus, keyboard, and reduced motion — while still feeling alive in marketing and app chrome.
Goals
- Ship components that are free to use and easy to adapt to a design system
- Prefer accessible primitives over decorative flourishes
- Keep install and customization lightweight (Tailwind + Shadcn-friendly)
- Cover common product surfaces: interaction, layout, navigation, feedback, forms
What shipped
Buttons, toggles, and switches with interruptible motion — press, hover, and state changes that feel responsive rather than theatrical.
Cards, grids, menus, and breadcrumbs structured for real product density, not empty marketing hero demos.
Alerts, notices, inputs, and selects with clear states — including motion that respects prefers-reduced-motion.
Categories
- Interaction — buttons, toggles, switches
- Layout — cards, grids, containers
- Navigation — menus, breadcrumbs
- Data — tables, metrics
- Feedback — alerts, notices
- Forms — inputs, selects
Outcome
An open source library teams can skim, install, and restyle — without forking a heavyweight design system. The emphasis is craft and reuse: motion as feedback, not decoration.
Stack
Next.js, TypeScript, Tailwind CSS, Shadcn UI, motion/react.