About GlideFrame

What is GlideFrame?

GlideFrame is a React component inspired by YouTube's mini-player feature. It provides a draggable, resizable floating container that can hold any content - videos, iframes, custom React components, or anything else you need.

Perfect for video players, chat widgets, notifications, or any content that needs to stay visible while users navigate your application.

Tech Stack

  • • Next.js 15 - App Router with React Server Components
  • • React 19 - Latest React features
  • • TypeScript - Full type safety
  • • Tailwind CSS 4 - Utility-first styling
  • • react-rnd - Drag and resize functionality
  • • Lucide Icons - Beautiful icon set

Usage

import { GlideFrame } from "@/components/glide-frame";

<GlideFrame
  id="my-frame"
  title="Video Player"
  headerStyle={{
    backgroundColor: "#dc2626",
    textColor: "#ffffff",
    buttonColor: "#ffffff",
  }}
  frameStyle={{
    borderRadius: 12,
    borderColor: "#dc2626",
  }}
>
  <YourContent />
</GlideFrame>