Introduction
Welcome to Dockly, a library of components or Dock for your website which you can customize as you want, simply and easily, take a look at how you customize your website and start using a Dock, simple, simple and easy to integrate
Getting Started
Install the library:
npm install @watercubz/docklyAdd the options provider:
// 📃 options.ts
import {
FileText,
FolderPlus,
Hash,
Tag,
CodeXml,
Paperclip,
Settings,
Users,
BarChart,
Image,
Music,
AppWindowMac,
} 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"];Usage:
// 📃 index.tsx
import { Dock } from "@watercubz/dockly";
import { DockOption, DockItems } from "./utils/options";
export default function Index() {
return (
<>
<section className="bg-gray-700">
<Dock
DockItems={DockItems}
DockOption={DockOption}
icon1={<CodeXml size={18} />}
icon2={<AppWindowMac size={18} />}
icon3={<Paperclip size={18} />}
/>
</section>
</>
);
}