舉例 Radix、Headless UI，為什麼無樣式元件這麼熱門？

為了避免重複造輪子，使用包裝好 UI 來節省開發時間與精力是再正常不過的事，通常元件庫包括了樣式、邏輯、UX、適用性、裝置兼容……等各方面的考量，我們可以很輕易的使用現成的 UI Pattern ，專注於解決真正重要的商業問題，像是 Bootstrap、chakra、MUI 都是老牌常見的元件庫。

那麼普通的元件庫就能滿足需求，無樣式元件又在解決什麼問題？

客製化是最大的問題。普通元件庫預設一定的風格樣式，並且修改它們並不容易，近乎把設計抉擇都交給第三方雖然很穩定但也缺少彈性，無樣式元件出現便是主要於解決這個問題。Radix、Headless UI ……等無樣式元件有趣的地方在於將樣式的決定權歸還給開發者，並打理在這之外 UI 會遇上的問題。

在各種無樣式元件上建構元件庫可以參考看看 Shadcn🔗。

我們常常低估一款 UI 製作所需要留意的細節與心力，Next.js Conf 2021 Pedro Duarte🔗 提到光是 Radix 的 Dropdown Menu 就花費了極大的心力來製作：

• 2000+ 小時
• 6 個月
• 50 次審核
• 1000 以上 commit