TypeScript · 7956 bytes Raw Blame History
1 "use client";
2
3 const Check = () => <span className="text-green-500">&#10003;</span>;
4 const Cross = () => <span className="text-surface-400">&mdash;</span>;
5 const Partial = () => <span className="text-yellow-500">~</span>;
6
7 interface WM {
8 name: string;
9 platform: string;
10 language: string;
11 config: string;
12 bsp: React.ReactNode;
13 floating: React.ReactNode;
14 ipc: React.ReactNode;
15 hotReload: React.ReactNode;
16 multiMonitor: React.ReactNode;
17 scratchpads: React.ReactNode;
18 borders: React.ReactNode;
19 gaps: React.ReactNode;
20 mouseSupport: React.ReactNode;
21 windowRules: React.ReactNode;
22 events: React.ReactNode;
23 }
24
25 const wms: WM[] = [
26 {
27 name: "tarmac",
28 platform: "macOS",
29 language: "Rust",
30 config: "Lua",
31 bsp: <Check />,
32 floating: <Check />,
33 ipc: <Check />,
34 hotReload: <Check />,
35 multiMonitor: <Check />,
36 scratchpads: <Check />,
37 borders: <Check />,
38 gaps: <Check />,
39 mouseSupport: <Check />,
40 windowRules: <Check />,
41 events: <Check />,
42 },
43 {
44 name: "yabai",
45 platform: "macOS",
46 language: "C",
47 config: "Shell",
48 bsp: <Check />,
49 floating: <Check />,
50 ipc: <Check />,
51 hotReload: <Check />,
52 multiMonitor: <Check />,
53 scratchpads: <Cross />,
54 borders: <Partial />,
55 gaps: <Check />,
56 mouseSupport: <Check />,
57 windowRules: <Check />,
58 events: <Check />,
59 },
60 {
61 name: "AeroSpace",
62 platform: "macOS",
63 language: "Swift",
64 config: "TOML",
65 bsp: <Check />,
66 floating: <Check />,
67 ipc: <Check />,
68 hotReload: <Check />,
69 multiMonitor: <Check />,
70 scratchpads: <Cross />,
71 borders: <Cross />,
72 gaps: <Check />,
73 mouseSupport: <Partial />,
74 windowRules: <Check />,
75 events: <Partial />,
76 },
77 {
78 name: "i3",
79 platform: "Linux (X11)",
80 language: "C",
81 config: "Custom",
82 bsp: <Partial />,
83 floating: <Check />,
84 ipc: <Check />,
85 hotReload: <Check />,
86 multiMonitor: <Check />,
87 scratchpads: <Check />,
88 borders: <Check />,
89 gaps: <Partial />,
90 mouseSupport: <Check />,
91 windowRules: <Check />,
92 events: <Check />,
93 },
94 {
95 name: "sway",
96 platform: "Linux (Wayland)",
97 language: "C",
98 config: "i3-compat",
99 bsp: <Partial />,
100 floating: <Check />,
101 ipc: <Check />,
102 hotReload: <Check />,
103 multiMonitor: <Check />,
104 scratchpads: <Check />,
105 borders: <Check />,
106 gaps: <Check />,
107 mouseSupport: <Check />,
108 windowRules: <Check />,
109 events: <Check />,
110 },
111 {
112 name: "Hyprland",
113 platform: "Linux (Wayland)",
114 language: "C++",
115 config: "Custom",
116 bsp: <Check />,
117 floating: <Check />,
118 ipc: <Check />,
119 hotReload: <Check />,
120 multiMonitor: <Check />,
121 scratchpads: <Check />,
122 borders: <Check />,
123 gaps: <Check />,
124 mouseSupport: <Check />,
125 windowRules: <Check />,
126 events: <Check />,
127 },
128 {
129 name: "bspwm",
130 platform: "Linux (X11)",
131 language: "C",
132 config: "Shell",
133 bsp: <Check />,
134 floating: <Check />,
135 ipc: <Check />,
136 hotReload: <Check />,
137 multiMonitor: <Check />,
138 scratchpads: <Check />,
139 borders: <Check />,
140 gaps: <Check />,
141 mouseSupport: <Check />,
142 windowRules: <Check />,
143 events: <Check />,
144 },
145 {
146 name: "dwm",
147 platform: "Linux (X11)",
148 language: "C",
149 config: "C (recompile)",
150 bsp: <Cross />,
151 floating: <Check />,
152 ipc: <Cross />,
153 hotReload: <Cross />,
154 multiMonitor: <Check />,
155 scratchpads: <Partial />,
156 borders: <Check />,
157 gaps: <Partial />,
158 mouseSupport: <Partial />,
159 windowRules: <Partial />,
160 events: <Cross />,
161 },
162 ];
163
164 export default function ComparisonTable() {
165 return (
166 <div className="overflow-x-auto">
167 <table className="min-w-full text-sm">
168 <thead>
169 <tr className="bg-surface-100 dark:bg-surface-800">
170 <th className="px-3 py-2 text-left font-semibold border border-surface-200 dark:border-surface-700">WM</th>
171 <th className="px-3 py-2 text-left font-semibold border border-surface-200 dark:border-surface-700">Platform</th>
172 <th className="px-3 py-2 text-left font-semibold border border-surface-200 dark:border-surface-700">Config</th>
173 <th className="px-3 py-2 text-center font-semibold border border-surface-200 dark:border-surface-700">BSP</th>
174 <th className="px-3 py-2 text-center font-semibold border border-surface-200 dark:border-surface-700">Float</th>
175 <th className="px-3 py-2 text-center font-semibold border border-surface-200 dark:border-surface-700">IPC</th>
176 <th className="px-3 py-2 text-center font-semibold border border-surface-200 dark:border-surface-700">Hot Reload</th>
177 <th className="px-3 py-2 text-center font-semibold border border-surface-200 dark:border-surface-700">Multi-Mon</th>
178 <th className="px-3 py-2 text-center font-semibold border border-surface-200 dark:border-surface-700">Scratchpads</th>
179 <th className="px-3 py-2 text-center font-semibold border border-surface-200 dark:border-surface-700">Borders</th>
180 <th className="px-3 py-2 text-center font-semibold border border-surface-200 dark:border-surface-700">Gaps</th>
181 <th className="px-3 py-2 text-center font-semibold border border-surface-200 dark:border-surface-700">Mouse</th>
182 <th className="px-3 py-2 text-center font-semibold border border-surface-200 dark:border-surface-700">Rules</th>
183 <th className="px-3 py-2 text-center font-semibold border border-surface-200 dark:border-surface-700">Events</th>
184 </tr>
185 </thead>
186 <tbody>
187 {wms.map((wm) => (
188 <tr
189 key={wm.name}
190 className={wm.name === "tarmac" ? "bg-accent/10 font-medium" : ""}
191 >
192 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 font-medium">{wm.name}</td>
193 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-surface-600 dark:text-surface-400">{wm.platform}</td>
194 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-surface-600 dark:text-surface-400">{wm.config}</td>
195 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-center">{wm.bsp}</td>
196 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-center">{wm.floating}</td>
197 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-center">{wm.ipc}</td>
198 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-center">{wm.hotReload}</td>
199 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-center">{wm.multiMonitor}</td>
200 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-center">{wm.scratchpads}</td>
201 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-center">{wm.borders}</td>
202 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-center">{wm.gaps}</td>
203 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-center">{wm.mouseSupport}</td>
204 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-center">{wm.windowRules}</td>
205 <td className="px-3 py-2 border border-surface-200 dark:border-surface-700 text-center">{wm.events}</td>
206 </tr>
207 ))}
208 </tbody>
209 </table>
210 <p className="text-xs text-surface-500 mt-2">
211 &#10003; = supported &nbsp; ~ = partial/patch &nbsp; &mdash; = not available.
212 Data based on published documentation as of March 2026. Entries like &ldquo;partial&rdquo; for dwm reflect features that require patches.
213 </p>
214 </div>
215 );
216 }