Minimalist Dock Library for your React Website

  ✦   Documentation   ✦   License   ✦  

🚀 Getting Started

Important

This library requires React v18 or higher.

1. Install the library:

# Using npm:
npm install @watercubz/dockly

# Using pnpm:
pnpm add @watercubz/dockly

# Using yarn:
yarn install @watercubz/dockly

2. Predefined Options:

// 📃 options.ts
 
import {
  FileText,
  FolderPlus,
  Hash,
  Tag,
  CodeXml,
  Settings,
  Users,
  BarChart,
  Image,
  Music,
  AppWindowMac,
  Paperclip,
} from "lucide-react";
 
export let DockOption = {
  Apps: [
    { icon: <Settings size={18} />, label: "Settings" },
    { icon: <Users size={18} />, label: "Contacts" },
    { icon: <BarChart size={18} />, label: "Analytics" },
  ],
  Components: [
    { icon: <FileText size={18} />, label: "New Document", shortcut: "⌘N" },
    { icon: <FolderPlus size={18} />, label: "New Folder", shortcut: "⌘F" },
    { icon: <Hash size={18} />, label: "Add Hashtag", shortcut: "⌘H" },
    { icon: <Tag size={18} />, label: "Add Label", shortcut: "⌘L" },
    { icon: <Image size={18} />, label: "Insert Image", shortcut: "⌘I" },
    { icon: <FileText size={18} />, label: "Export as PDF", shortcut: "⌘E" },
  ],
  Notes: [{ icon: <Music size={18} />, label: "Music Library" }],
};
export let DockItems = ["Apps", "Components", "Notes"];
 
export let icons = [
  <CodeXml size={18} />,
  <AppWindowMac size={18} />,
  <Paperclip size={18} />,
];

3. Usage:

// 📃 index.jsx
import { dock } from "@watercubz/dockly";
 
import { DockOption, DockItems, icons } from "./utils/options";
 
export default function MyComponent() {
  return (
    <div>
      <Dock
        DockItems={DockItems}
        DockOption={DockOption}
        icon1={icons[0]}
        icon2={icons[1]}
        icon3={icons[2]}
      />
    </div>
  );
}

Tip

📚 Visit the Documentation for more information.

🔭 Roadmap

• 🚗 Add ./options options file for more configuration.
• 📚 Add support for React.

🤝 Contributing

watercubz/dockly

• Website: Nextra + Next.js
• Library: React 18

1. Click here to fork the repository.

2. Install dependencies:

# Install pnpm globally if you don't have it:
npm install -g pnpm

# and install dependencies:
pnpm install

3. Commands:

# Run only documentation website:
pnpm dev:docs
pnpm dev
# Build the library:
pnpm build
# Build the docs:
pnpm build && pnpm next export

🧑‍🚀 Open http://localhost:3000 to view the Nextra.js documentation website.

📃 License

MIT License - watercubz 2025.