Skip to content

Commit ad313e5

Browse files
SiumauricioSiumauricio
authored
Merge pull request #135 from Dokploy/feat/add-comparison-page
feat: add Dokploy vs. Coolify comparison page and related components
2 parents a3c781f + f5de812 commit ad313e5

9 files changed

Lines changed: 468 additions & 1 deletion

File tree

‎apps/website/app/dokploy-vs-coolify/page.tsx‎

Lines changed: 363 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,363 @@
1+
import { Container } from "@/components/Container";
2+
import { CallToAction } from "@/components/CallToAction";
3+
import { Testimonials } from "@/components/Testimonials";
4+
import { ComparisonStats } from "@/components/comparison-stats";
5+
import AnimatedGridPattern from "@/components/ui/animated-grid-pattern";
6+
import { Check, X, Zap, Cpu, Plug, LayoutDashboard, Bell } from "lucide-react";
7+
import Image from "next/image";
8+
import Link from "next/link";
9+
import type { Metadata } from "next";
10+
import { Button } from "@/components/ui/button";
11+
12+
export const metadata: Metadata = {
13+
title: "Dokploy Vs. Coolify Comparison",
14+
description:
15+
"Dokploy vs. Coolify at a glance: How to choose the right self-hosted open deployment option for your applications.",
16+
};
17+
18+
const featureComparisonRows = [
19+
{ feature: "One-command installation", dokploy: true, coolify: true },
20+
{ feature: "Installation feedback and progress logs", dokploy: true, coolify: true },
21+
{ feature: "Works with firewall and TailScale out of the box", dokploy: true, coolify: false },
22+
{ feature: "Lightweight CPU usage while idle", dokploy: true, coolify: false },
23+
{ feature: "Low memory usage", dokploy: true, coolify: true },
24+
{ feature: "Teams and organizations support", dokploy: true, coolify: true },
25+
{ feature: "Projects grouping", dokploy: true, coolify: true },
26+
{ feature: "Consistent, responsive UI", dokploy: true, coolify: false },
27+
{ feature: "Built with Next.js / TypeScript", dokploy: true, coolify: false },
28+
{ feature: "AI-assisted deployments", dokploy: true, coolify: false },
29+
{ feature: "Deploy from custom Docker images", dokploy: true, coolify: true },
30+
{ feature: "Database deployment (Postgres, MySQL, Redis, etc.)", dokploy: true, coolify: true },
31+
{ feature: "Scheduled database backups (S3)", dokploy: true, coolify: true },
32+
{ feature: "Back up arbitrary Docker volumes, not just databases", dokploy: true, coolify: false },
33+
{ feature: "Preview deployments (review apps)", dokploy: true, coolify: true },
34+
{ feature: "API and CLI tools for automation", dokploy: true, coolify: true },
35+
{ feature: "Multi-server deployment", dokploy: true, coolify: true },
36+
{ feature: "Docker Swarm clustering", dokploy: true, coolify: "limited" },
37+
{ feature: "Cron jobs inside containers", dokploy: true, coolify: true },
38+
{ feature: "Cron jobs on your host machine", dokploy: true, coolify: false },
39+
{ feature: "Monitoring metrics (CPU, RAM, Disk)", dokploy: true, coolify: "limited" },
40+
{ feature: "Metrics enabled by default", dokploy: true, coolify: false },
41+
{ feature: "Automated alerts from metrics", dokploy: true, coolify: false },
42+
];
43+
44+
const whyChooseItems = [
45+
{
46+
icon: Zap,
47+
title: "Benefit from a fast, reliable setup",
48+
description:
49+
"Use a single command to deploy with Dokploy, which works seamlessly across firewalls, TailScale, and secure environments. Launch applications faster with Dokploy's optimized build system.",
50+
},
51+
{
52+
icon: Cpu,
53+
title: "Do more with less",
54+
description:
55+
"Keep your VPS fast and responsive with Dokploy's lightweight architecture, which uses minimal CPU and memory, even while idle. Automate builds, alerts, and scaling events effortlessly.",
56+
},
57+
{
58+
icon: Plug,
59+
title: "Integrate with your favorite platforms",
60+
description:
61+
"Connect Dokploy to GitHub, GitLab, and Bitbucket. Dokploy supports Docker, Compose, Nixpacks, and Buildpacks, and even lets you add APIs and use CLI automation.",
62+
},
63+
{
64+
icon: LayoutDashboard,
65+
title: "Experience an intuitive, polished UX",
66+
description:
67+
"Enjoy a clean, consistent UI in the cloud, powered by Next.js and TypeScript. Dokploy is the modern deployment dashboard, optimized for productivity and clarity, with smooth navigation and predictable save behavior.",
68+
},
69+
{
70+
icon: Bell,
71+
title: "Know what's happening before it's a problem",
72+
description:
73+
"Built-in metrics, automated alerting, and volume backups make Dokploy ideal for serious deployments. Monitor CPU, memory, and disk usage, automate notifications, and keep data safe with S3-compatible backups.",
74+
},
75+
];
76+
77+
const integrationRows = [
78+
{
79+
category: "Git providers",
80+
dokploy: "GitHub, GitLab, Bitbucket, Gitea, Git Generic",
81+
coolify: "GitHub, Git Generic",
82+
},
83+
{
84+
category: "Build and deployment systems",
85+
dokploy: "Docker, Docker Compose, Nixpacks, Heroku Buildpacks, Paketo Buildpacks, Railpack",
86+
coolify: "Docker, Docker Compose, Nixpacks",
87+
},
88+
{
89+
category: "Notifications and communication",
90+
dokploy: "Slack, Telegram, Discord, Lark, Email (SMTP), Resend, Gotify, Ntfy, Pushover, Webhook",
91+
coolify: "Slack, Discord, Telegram, Email (SMTP), Pushover, Resend, Teams",
92+
},
93+
];
94+
95+
export default function DokployVsCoolifyPage() {
96+
return (
97+
<div className="min-h-screen bg-background">
98+
{/* Hero Section */}
99+
<section className="relative overflow-hidden border-b border-border/30 bg-black py-20 sm:py-32">
100+
<AnimatedGridPattern
101+
numSquares={30}
102+
maxOpacity={0.1}
103+
height={40}
104+
width={40}
105+
duration={3}
106+
repeatDelay={1}
107+
className="[mask-image:radial-gradient(800px_circle_at_center,white,transparent)] absolute inset-x-0 inset-y-[-30%] h-[200%] skew-y-12"
108+
/>
109+
<Container className="relative z-10">
110+
<div className="mx-auto max-w-4xl text-center">
111+
<h1 className="font-display text-4xl tracking-tight text-white sm:text-5xl lg:text-6xl">
112+
Dokploy vs. Coolify
113+
</h1>
114+
<p className="mt-6 text-lg text-muted-foreground">
115+
If you're looking for a self-hosted, open deployment solution that
116+
lets you run applications on your own VPS or hardware, Dokploy and
117+
Coolify are the two leading options. But which should you choose?
118+
</p>
119+
120+
<div className="mt-16 grid gap-8 sm:grid-cols-2">
121+
<div className="rounded-xl border border-border/50 bg-card p-6 text-left">
122+
<h3 className="text-xl font-semibold text-white">Dokploy</h3>
123+
<p className="mt-3 text-sm text-muted-foreground">
124+
For a polished, intuitive, open deployment solution with
125+
powerful automation, AI, monitoring and integration features –
126+
designed for developers who want control without complexity –
127+
choose Dokploy.
128+
</p>
129+
</div>
130+
<div className="rounded-xl border border-border/50 bg-card p-6 text-left">
131+
<h3 className="text-xl font-semibold text-white">Coolify</h3>
132+
<p className="mt-3 text-sm text-muted-foreground">
133+
For an open source deployment tool that's geared toward indie
134+
devs and OSS hobbyists, with an accessible, less polished
135+
approach that suits individuals over businesses, choose
136+
Coolify.
137+
</p>
138+
</div>
139+
</div>
140+
141+
<Button className="mt-10 rounded-full" asChild>
142+
<Link
143+
href="https://app.dokploy.com/register"
144+
target="_blank"
145+
rel="noopener noreferrer"
146+
>
147+
Register now
148+
</Link>
149+
</Button>
150+
</div>
151+
</Container>
152+
</section>
153+
154+
{/* Dokploy vs Coolify at a glance */}
155+
<section className="border-b border-border/30 py-20 sm:py-32">
156+
<Container>
157+
<div className="mx-auto max-w-2xl text-center">
158+
<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
159+
Dokploy vs. Coolify at a glance
160+
</h2>
161+
<p className="mt-4 text-lg text-muted-foreground">
162+
Read our comprehensive Coolify vs. Dokploy features comparison
163+
before you make your decision.
164+
</p>
165+
</div>
166+
167+
<div className="mx-auto mt-12 max-w-5xl overflow-x-auto">
168+
<table className="w-full border-collapse">
169+
<thead>
170+
<tr className="border-b border-border">
171+
<th className="px-4 py-4 text-left font-semibold">Feature</th>
172+
<th className="px-4 py-4 text-center font-semibold">Dokploy</th>
173+
<th className="px-4 py-4 text-center font-semibold">Coolify</th>
174+
</tr>
175+
</thead>
176+
<tbody>
177+
{featureComparisonRows.map((row) => (
178+
<tr
179+
key={row.feature}
180+
className="border-b border-border/50 hover:bg-muted/30"
181+
>
182+
<td className="px-4 py-3 text-sm">{row.feature}</td>
183+
<td className="px-4 py-3 text-center">
184+
{row.dokploy ? (
185+
<Check className="mx-auto h-5 w-5 text-green-500" />
186+
) : (
187+
<X className="mx-auto h-5 w-5 text-muted-foreground/50" />
188+
)}
189+
</td>
190+
<td className="px-4 py-3 text-center">
191+
{row.coolify === true ? (
192+
<Check className="mx-auto h-5 w-5 text-green-500" />
193+
) : row.coolify === "limited" ? (
194+
<span className="text-xs text-amber-500">Limited</span>
195+
) : (
196+
<X className="mx-auto h-5 w-5 text-muted-foreground/50" />
197+
)}
198+
</td>
199+
</tr>
200+
))}
201+
</tbody>
202+
</table>
203+
</div>
204+
</Container>
205+
</section>
206+
207+
{/* Why you should choose Dokploy */}
208+
<section className="border-b border-border/30 bg-black py-20 sm:py-32">
209+
<Container>
210+
<div className="mx-auto max-w-2xl text-center">
211+
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
212+
Why you should choose Dokploy
213+
</h2>
214+
</div>
215+
216+
<div className="mx-auto mt-16 max-w-6xl space-y-20">
217+
{whyChooseItems.map((item, index) => (
218+
<div
219+
key={item.title}
220+
className={`flex flex-col gap-8 md:flex-row md:items-center ${
221+
index % 2 === 1 ? "md:flex-row-reverse" : ""
222+
}`}
223+
>
224+
<div className="flex-1">
225+
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-lg bg-primary/20 text-primary">
226+
<item.icon className="h-6 w-6" />
227+
</div>
228+
<h3 className="text-xl font-semibold text-white">
229+
{item.title}
230+
</h3>
231+
<p className="mt-3 text-muted-foreground">{item.description}</p>
232+
</div>
233+
<div className="flex-1">
234+
{index === 0 ? (
235+
<div className="relative aspect-video overflow-hidden rounded-xl border border-border/50">
236+
<Image
237+
src="/images/dokploy-deployment-log.png"
238+
alt="Dokploy deployment panel showing build and deployment logs"
239+
fill
240+
className="object-cover object-top"
241+
sizes="(max-width: 768px) 100vw, 50vw"
242+
/>
243+
</div>
244+
) : index === 1 ? (
245+
<div className="relative aspect-video overflow-hidden rounded-xl border border-border/50">
246+
<Image
247+
src="/images/dokploy-monitoring-dashboard.png"
248+
alt="Dokploy monitoring dashboard showing CPU, memory, disk and I/O metrics"
249+
fill
250+
className="object-cover object-top"
251+
sizes="(max-width: 768px) 100vw, 50vw"
252+
/>
253+
</div>
254+
) : index === 2 ? (
255+
<div className="relative aspect-video overflow-hidden rounded-xl border border-border/50">
256+
<Image
257+
src="/images/dokploy-provider-settings.png"
258+
alt="Dokploy deploy settings with GitHub, GitLab, Bitbucket and other providers"
259+
fill
260+
className="object-cover object-top"
261+
sizes="(max-width: 768px) 100vw, 50vw"
262+
/>
263+
</div>
264+
) : index === 3 ? (
265+
<div className="relative aspect-video overflow-hidden rounded-xl border border-border/50">
266+
<Image
267+
src="/images/dokploy-projects-dashboard.png"
268+
alt="Dokploy projects dashboard with services grid and environment selector"
269+
fill
270+
className="object-cover object-top"
271+
sizes="(max-width: 768px) 100vw, 50vw"
272+
/>
273+
</div>
274+
) : index === 4 ? (
275+
<div className="relative aspect-video overflow-hidden rounded-xl border border-border/50">
276+
<Image
277+
src="/images/dokploy-create-backup.png"
278+
alt="Dokploy Create Backup modal for database and volume backups"
279+
fill
280+
className="object-cover object-top"
281+
sizes="(max-width: 768px) 100vw, 50vw"
282+
/>
283+
</div>
284+
) : (
285+
<div className="aspect-video rounded-xl border border-border/50 bg-muted/30" />
286+
)}
287+
</div>
288+
</div>
289+
))}
290+
</div>
291+
</Container>
292+
</section>
293+
294+
{/* Dokploy integrates with the leading solutions */}
295+
<section className="border-b border-border/30 py-20 sm:py-32">
296+
<Container>
297+
<div className="mx-auto max-w-2xl text-center">
298+
<h2 className="font-display text-3xl tracking-tight sm:text-4xl">
299+
Dokploy integrates with the leading solutions
300+
</h2>
301+
</div>
302+
303+
<div className="mx-auto mt-12 max-w-4xl overflow-x-auto">
304+
<table className="w-full border-collapse">
305+
<thead>
306+
<tr className="border-b border-border">
307+
<th className="px-4 py-4 text-left font-semibold">Category</th>
308+
<th className="px-4 py-4 text-left font-semibold">Dokploy</th>
309+
<th className="px-4 py-4 text-left font-semibold">Coolify</th>
310+
</tr>
311+
</thead>
312+
<tbody>
313+
{integrationRows.map((row) => (
314+
<tr
315+
key={row.category}
316+
className="border-b border-border/50"
317+
>
318+
<td className="px-4 py-3 font-medium">{row.category}</td>
319+
<td className="px-4 py-3 text-sm text-muted-foreground">
320+
{row.dokploy}
321+
</td>
322+
<td className="px-4 py-3 text-sm text-muted-foreground">
323+
{row.coolify}
324+
</td>
325+
</tr>
326+
))}
327+
</tbody>
328+
</table>
329+
</div>
330+
</Container>
331+
</section>
332+
333+
{/* Why Dokploy is perfect for teams */}
334+
<section className="border-b border-border/30 bg-black py-20 sm:py-32">
335+
<Container>
336+
<div className="mx-auto max-w-3xl text-center">
337+
<h2 className="font-display text-3xl tracking-tight text-white sm:text-4xl">
338+
Why Dokploy is perfect for teams of any size
339+
</h2>
340+
<p className="mt-6 text-lg text-muted-foreground">
341+
Empower every team, from solo developers to enterprise engineering
342+
squads, with a deployment platform built for collaboration and
343+
control. Dokploy's organizational and project structuring features
344+
make it simple for you to manage users, permissions, and
345+
environments, while its automation and monitoring tools scale
346+
seamlessly as your team grows. Whether you're running one app or
347+
hundreds, Dokploy adapts to your needs without adding complexity.
348+
</p>
349+
</div>
350+
</Container>
351+
</section>
352+
353+
{/* Thousands have chosen Dokploy - Stats */}
354+
<ComparisonStats />
355+
356+
{/* Testimonials */}
357+
<Testimonials />
358+
359+
{/* Final CTA */}
360+
<CallToAction />
361+
</div>
362+
);
363+
}

‎apps/website/components/Footer.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export function Footer() {
4141
<div className="-my-1 flex flex-wrap justify-center gap-6">
4242
<NavLink href="/#features">Features</NavLink>
4343
<NavLink href="/#faqs">FAQ</NavLink>
44+
<NavLink href="/dokploy-vs-coolify">Dokploy vs. Coolify</NavLink>
4445
<NavLink
4546
href="https://docs.dokploy.com/docs/core"
4647
target="_blank"

0 commit comments

Comments
 (0)