Framework Guide
Next.js

💡 This guide shows how to use the library with Next.js /app router (/pages router is also supported). @pheralb/toast +v0.3.0 supports Next.js 15 with React 19.

Create a new Next.js project

  1. Run the following command:
npx create-next-app@latest
  1. Select the default options:
√ What is your project named? ... nextjs-project
√ Would you like to use TypeScript? ... Yes
√ Would you like to use ESLint? ... Yes
√ Would you like to use Tailwind CSS? ... Yes (👈 optional)
√ Would you like to use `src/` directory? ... Yes (👈 optional)
#...

Add the library

  1. Run the following command:

  2. Add the Toaster to the layout.tsx file:

💡 By default, Toaster includes use client directive.

// 📃 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"];
  1. Use the dock function in your client components:
"use client";
 
import { dock } from "@watercubz/dockly";
 
import { DockOption, DockItems } from "./utils/options";
 
export default function MyComponent() {
  return (
    <div>
      <Dock
        DockItems={DockItems}
        DockOption={DockOption}
        icon1={<CodeXml size={18} />} //It is required!
        icon2={<AppWindowMac size={18} />} // It is required!
        icon3={<Paperclip size={18} />} // It is required!
        colorIcon={{ text: "text-green-500" }} // It is optional!
      />
    </div>
  );
}

✨ Ready.

AstroReact