SonaUI
betaBasic Components
AccordionnewMagic Components
Animated DocknewTransition Panelsoon
Preview










Source Code
1import React from "react";
2import { AnimatedDock, AnimatedDockItem } from "./AnimatedDock";
3
4const animatedDockData = [
5 {
6 tag: "Notion",
7 icon: "/animated-dock/notion-icon.png",
8 },
9 {
10 tag: "After Effects",
11 icon: "/animated-dock/ae-icon.png",
12 },
13 {
14 tag: "Figma",
15 icon: "/animated-dock/figma-icon.png",
16 },
17 {
18 tag: "Slack",
19 icon: "/animated-dock/slack-icon.png",
20 },
21 {
22 tag: "Spotify",
23 icon: "/animated-dock/spotify-icon.png",
24 },
25 {
26 tag: "VS Code",
27 icon: "/animated-dock/vscode-icon.png",
28 },
29 {
30 tag: "Photoshop",
31 icon: "/animated-dock/ps-icon.png",
32 },
33 {
34 tag: "Obsidian",
35 icon: "/animated-dock/obsidian-icon.png",
36 },
37 {
38 tag: "Discord",
39 icon: "/animated-dock/discord-icon.png",
40 },
41 {
42 tag: "Davinci Resolve",
43 icon: "/animated-dock/dr-icon.png",
44 },
45];
46
47const Page = () => {
48
49 return (
50 <>
51 <AnimatedDock>
52 {animatedDockData.map((item, index) => (
53 <AnimatedDockItem key={index} icon={item.icon} tag={item.tag} />
54 ))}
55 </AnimatedDock>
56 </>
57 );
58};
59
60export default Page;