Floating Dock Dialog

An enhanced floating dock that opens as a bottom sheet dialog. Features workspace cards with custom emoji icons, hex colors, favorite indicators, active states, and macOS-style spring physics on desktop.

Preview

Active: Personal

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/floating-dock-dialog.json

Usage

tsx
27 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { useState } from "react"
import { FloatingDockWithDialog } from "@/components/ui/floating-dock-dialog"
import type { WorkspaceItem } from "@/registry/ui/floating-dock-dialog"

const workspaces: WorkspaceItem[] = [
  { _id: "1", name: "Personal",  description: "Personal projects",  Appearance: { icon: "🏠", color: "#3B82F6" }, isfav: true  },
  { _id: "2", name: "Work",      description: "Work tasks",         Appearance: { icon: "💼", color: "#10B981" }, isfav: false },
  { _id: "3", name: "Design",    description: "UI/UX work",         Appearance: { icon: "🎨", color: "#8B5CF6" }, isfav: true  },
]

export default function WorkspaceLayout() {
  const [isOpen, setIsOpen]   = useState(false)
  const [activeId, setActiveId] = useState("1")

  return (
    <>
      <button onClick={() => setIsOpen(true)}>Workspaces</button>
      <FloatingDockWithDialog
        items={workspaces}
        activeId={activeId}
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        onAddWorkspace={() => console.log("Add workspace")}
      />
    </>
  )
}

Props

PropTypeDefaultDescription
itemsWorkspaceItem[]-Array of workspace items. Favorites are automatically sorted to the front.
activeIdstringundefinedID of the currently active workspace. Shown with a ring highlight.
isOpenboolean-Controls bottom sheet dialog visibility.
onClose() => void-Called when the dialog is dismissed.
onAddWorkspace() => voidundefinedCalled when the + add workspace button is clicked.