Day 23 - Animate UI Hexagon Background

前言

#

六邊形，不只是蜂巢的專利！🐝 在 Animate UI – Hexagon Background 裡，它搖身一變成為超酷的背景神器。 只要幾行指令，就能讓你的頁面多一點科技感、幾何感，還帶點動畫的魔法。 準備好了嗎？讓我們一起進入這個充滿六邊形的宇宙！

Hexagon Background

#

1. 使用 Shadcn CLI 加入 Hexagon Background

   npx shadcn@latest add @animate-ui/components-backgrounds-hexagon
   

2. Import 元件並將元件放在想要的位置上

   import { HexagonBackground } from '@/components/animate-ui/components/backgrounds/hexagon';
   

   <HexagonBackground>...</>
   

3. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   HexagonBackgroundProps

   #

   參數	參數型態	說明
   hexagonSize?	number	六邊形的大小（px），建議設定大於 50，預設為 75
   hexagonMargin?	number	六邊形之間的間距（px），預設為 3
   className	string	自訂樣式的 class 名稱，可參考 Tailwind CSS

小結

#

在這篇文章中，我們一起學會如何透過 shadcn CLI 安裝並使用 Animate UI – Hexagon Background，不論是想讓頁面更有科技感，還是想加點設計師風格的幾何節奏，這個元件都能幫你做到。

Reference

#

• Animate UI Hexagon Background