Surajmaurya1/easyui: +32 stars this week

Rank of Surajmaurya1/easyui in each topic for today, this week and this month
Topic	Today	This week	This month
UI & design systems topic	–	#32of 100	#40of 178
Web frameworks topic	–	#97of 288	#114of 475
TypeScript topic	–	#343of 885	#402of 1287

Topic

Today

This week

This month

UI & design systems

–

#32of 100

#40of 178

Web frameworks

–

#97of 288

#114of 475

TypeScript

–

#343of 885

#402of 1287

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 shadcn CLI. 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.