EasyUI
Beautiful UI. Made easy.
A modern collection of micro-animated, physics-based React components distributed via the official shadcn GitHub Registry.
Quick Start • Components • Running Locally • Contributing • License
What is EasyUI?
EasyUI is an open-source library of tactile, micro-animated React components designed to make modern web applications feel alive.
- Direct Source Ownership — Add components straight into your project via the
shadcnCLI. No black-box dependencies or runtime lock-in. - Spring Physics & Micro-Interactions — Built with Framer Motion and canvas for organic drag, magnetic pull, and smooth kinetic feedback.
- Modern Tech Stack — Fully typed in TypeScript, styled with Tailwind CSS, and optimized for React 18 & 19.
Quick Start
EasyUI is an official shadcn GitHub Registry. You can install any component directly into your project using the shadcn CLI:
npx shadcn@latest add Surajmaurya1/easyui/<component-name>
Popular Components
# Magnetic proximity button npx shadcn@latest add Surajmaurya1/easyui/magnetic-button # Radial cursor spotlight card npx shadcn@latest add Surajmaurya1/easyui/spotlight-card # Glassmorphic spring navigation npx shadcn@latest add Surajmaurya1/easyui/glass-navbar # Global Command Palette (⌘K) npx shadcn@latest add Surajmaurya1/easyui/command-menu
The CLI automatically downloads the component code into your components/ui/ directory, resolves required dependencies, and sets up any shared tokens.
Browse all components: Explore live previews, props, and install commands at easyui.site/components.
Usage Example
Import installed components directly from your own components/ui folder:
import React from 'react'; import { SpotlightCard } from '@/components/ui/spotlight-card'; import { MagneticButton } from '@/components/ui/magnetic-button'; import { ArrowUpRight } from 'lucide-react'; export function Demo() { return ( <SpotlightCard className="max-w-md p-6 bg-[#0A0A0A] rounded-2xl border border-[#222222]"> <h3 className="text-base font-semibold text-white">Edge Telemetry</h3> <p className="text-xs text-neutral-400 mt-1 mb-4"> Dynamic pointer tracking with zero layout penalty. </p> <MagneticButton strength={0.4} variant="primary"> <span>Launch Console</span> <ArrowUpRight className="w-4 h-4" /> </MagneticButton> </SpotlightCard> ); }
Running Locally
To run the interactive documentation showcase and testing sandbox locally:
# Clone the repository git clone https://github.com/Surajmaurya1/easyui.git cd easyui # Install dependencies npm install # Start the dev server npm run dev
Open http://localhost:5173 in your browser.
Contributing
Contributions are welcome! Whether you want to add a new animated component, fix an issue, or improve the documentation:
- Check out our Contributing Guide for our 3-step component workflow (
npm run component:new). - Read the Architecture Guide to learn about the auto-discovery registry engine.
Connect & Contact
Created with care by Suraj Maurya.
- LinkedIn: linkedin.com/in/suraj-maurya-33a91325a
- Email: surajmaurya.pvt@gmail.com
License
Distributed under the MIT License. See LICENSE for details.