@nishant51/frame-ui

Beautiful, animated React UI components built with Framer Motion.

📦 Installation

npm install @nishant51/frame-ui framer-motion

🚀 Quick Start

import { Button, Dropdown, GlowCursor } from '@nishant51/frame-ui';

function App() {
  return (
    <div>
      {/* Add a beautiful cursor effect */}
      <GlowCursor />
      
      {/* Animated button */}
      <Button variant="primary">Click Me</Button>
      
      {/* Dropdown menu */}
      <Dropdown>
        <Dropdown.Trigger>
          <button>Open Menu</button>
        </Dropdown.Trigger>
        <Dropdown.Menu>
          <Dropdown.Item onClick={() => console.log('clicked')}>
            Option 1
          </Dropdown.Item>
          <Dropdown.Separator />
          <Dropdown.Item variant="danger">Delete</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}

📚 Components

Button

A beautiful animated button with multiple variants.

import { Button } from '@nishant51/frame-ui';

<Button variant="primary">Primary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="outline">Outline</Button>
<Button href="/about">Link Button</Button>
<Button icon={<ArrowIcon />}>With Icon</Button>

Props: | Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'ghost' \| 'outline' | 'primary' | Button style variant | | href | string | - | Optional link (renders as anchor) | | icon | ReactNode | - | Optional icon after text |

Dropdown

A compound component for animated dropdown menus.

import { Dropdown } from '@nishant51/frame-ui';

<Dropdown>
  <Dropdown.Trigger>
    <button>Menu</button>
  </Dropdown.Trigger>
  <Dropdown.Menu align="right">
    <Dropdown.Item icon={<UserIcon />}>Profile</Dropdown.Item>
    <Dropdown.Item href="/settings">Settings</Dropdown.Item>
    <Dropdown.Separator />
    <Dropdown.Item variant="danger">Logout</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Cursor Effects

Beautiful cursor effects for your landing pages.

import { 
  GlowCursor, 
  BubbleCursor, 
  FluidCursor, 
  ElasticCursor, 
  SpotlightCursor 
} from '@nishant51/frame-ui';

// Glowing cursor
<GlowCursor color="rgba(147, 51, 234, 0.5)" size={40} />

// Bubble particles
<BubbleCursor color="rgba(180, 150, 255, 0.5)" />

// Fluid trail
<FluidCursor trailLength={40} />

// Elastic connector
<ElasticCursor color="#9333ea" />

// Spotlight effect
<SpotlightCursor size={600} intensity={0.2} />

🎨 Peer Dependencies

This package requires the following peer dependencies:

{
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0",
  "framer-motion": ">=10.0.0"
}

📖 Documentation

Full documentation available at framejs.vercel.app

📄 License

MIT © Nishant