Future UI

Revolving Sidebar

▧ Blocks

Circular navigation sidebar with revolving bars, drag inertia, and snap physics.

sidebarnavigationrevolvinggsapdraginertiamobile

No preview available

Drag bars to spin · Click to select

Controls

#ff7657
390
19
0.92

Blocks / React Component

About Revolving Sidebar

Circular navigation sidebar with revolving bars, drag inertia, and snap physics.

Category Blocks
Framework React + TypeScript
Dependencies gsap, @gsap/react
Tags sidebar, navigation, revolving, gsap, drag, inertia, mobile

Install Revolving Sidebar in your project

Copy the shadcn CLI command below. Replace YOUR_LICENSE_KEY with the license key from your FutureUI account — or log in and it will auto-fill for you.

npx shadcn@latest add "https://futureui.studio/api/registry/revolving-sidebar.json?key=YOUR_LICENSE_KEY"

Usage example

import { useState } from 'react';
import RevolvingSidebar from './RevolvingSidebar';
import { Home, User, FolderOpen, FileText, Mail } from 'lucide-react';

export default function Example() {
  const [open, setOpen] = useState(true);

  return (
    <div className="relative w-full h-[500px]">
      {/* Place your toggle button anywhere */}
      <button onClick={() => setOpen(!open)}>
        {open ? 'Close' : 'Open'}
      </button>

      <RevolvingSidebar
        items={[
          { label: 'Home', icon: <Home size={18} /> },
          { label: 'About', icon: <User size={18} /> },
          { label: 'Projects', icon: <FolderOpen size={18} /> },
          { label: 'Blog', icon: <FileText size={18} /> },
          { label: 'Contact', icon: <Mail size={18} /> },
        ]}
        open={open}
        onOpenChange={setOpen}
        edge="right"
        accentColor="#8b5cf6"
        onSelect={(item) => console.log(item.label)}
      />
    </div>
  );
}