framejs-ui

Beautiful, animated React UI components built with Framer Motion.

Installation

npm install framejs-ui framer-motion

Requirements

• React 18.0.0 or higher
• Framer Motion 10.0.0 or higher

Quick Start

import { Button, Dropdown, GlowCursor } from 'framejs-ui';

function App() {
  return (
    <div>
      <GlowCursor />
      
      <Button variant="primary">Get Started</Button>
      
      <Dropdown>
        <Dropdown.Trigger>
          <button>Menu</button>
        </Dropdown.Trigger>
        <Dropdown.Menu>
          <Dropdown.Item>Profile</Dropdown.Item>
          <Dropdown.Item>Settings</Dropdown.Item>
          <Dropdown.Separator />
          <Dropdown.Item variant="danger">Logout</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>
  );
}

Components

Button

An animated button component with smooth hover and tap interactions.

import { Button } from 'framejs-ui';

// Variants
<Button variant="primary">Primary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="outline">Outline</Button>

// As a link
<Button href="/about">About</Button>

// With icon
<Button icon={<ArrowRightIcon />}>Continue</Button>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'ghost' \| 'outline' | 'primary' | Visual style variant | | href | string | - | Renders as an anchor element | | icon | ReactNode | - | Icon displayed after the label | | className | string | - | Additional CSS classes |

Dropdown

A compound component for building accessible dropdown menus with smooth animations.

import { Dropdown } from 'framejs-ui';

<Dropdown>
  <Dropdown.Trigger>
    <button>Open 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" onClick={handleLogout}>
      Logout
    </Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>

Dropdown.Menu Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | align | 'left' \| 'right' | 'left' | Menu alignment | | className | string | - | Additional CSS classes |

Dropdown.Item Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'default' \| 'danger' | 'default' | Visual style | | icon | ReactNode | - | Icon before the label | | href | string | - | Renders as a link | | onClick | () => void | - | Click handler |

Cursor Effects

Decorative cursor effects for landing pages and marketing sites. These components automatically hide on mobile devices.

GlowCursor

A glowing orb that follows the cursor.

import { GlowCursor } from 'framejs-ui';

<GlowCursor />

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

| Prop | Type | Default | Description | |------|------|---------|-------------| | color | string | 'rgba(255, 255, 255, 0.5)' | Glow color | | size | number | 32 | Cursor size in pixels | | zIndex | number | 9999 | Stack order |

FluidCursor

A fluid, flowing trail effect.

import { FluidCursor } from 'framejs-ui';

<FluidCursor />

// Custom configuration
<FluidCursor trailLength={40} />

| Prop | Type | Default | Description | |------|------|---------|-------------| | trailLength | number | 30 | Number of trail points | | color | string | 'rgba(255, 255, 255, 0.4)' | Trail color | | zIndex | number | 9999 | Stack order |

BubbleCursor

Particle bubbles that spawn from the cursor.

import { BubbleCursor } from 'framejs-ui';

<BubbleCursor />

// Custom configuration
<BubbleCursor color="rgba(180, 150, 255, 0.5)" />

| Prop | Type | Default | Description | |------|------|---------|-------------| | color | string | 'rgba(180, 150, 255, 0.5)' | Bubble color | | zIndex | number | 9999 | Stack order |

ElasticCursor

An elastic connector between cursor position and a following dot.

import { ElasticCursor } from 'framejs-ui';

<ElasticCursor />

// Custom configuration
<ElasticCursor color="#9333ea" />

| Prop | Type | Default | Description | |------|------|---------|-------------| | color | string | 'white' | Dot and line color | | zIndex | number | 9999 | Stack order |

SpotlightCursor

A large spotlight effect centered on the cursor.

import { SpotlightCursor } from 'framejs-ui';

<SpotlightCursor />

// Custom configuration
<SpotlightCursor size={600} intensity={0.2} />

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 800 | Spotlight diameter in pixels | | intensity | number | 0.15 | Light intensity (0-1) | | zIndex | number | 9990 | Stack order |

Hooks

useOnClickOutside

Detects clicks outside of a referenced element.

import { useOnClickOutside } from 'framejs-ui';

function Modal({ onClose }) {
  const ref = useRef(null);
  useOnClickOutside(ref, onClose);

  return <div ref={ref}>Modal content</div>;
}

TypeScript

This package includes TypeScript definitions. All components and hooks are fully typed.

import type { ButtonProps, DropdownRootProps } from 'framejs-ui';

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Cursor effects are automatically disabled on touch devices.

Documentation

Full documentation and live examples are available at framejs.vercel.app.

License

MIT