近年來，開發人員處理 UI 庫的方式發生了明顯的轉變，不再透過 npm 套件安裝整個元件庫，而是直接將程式碼複製並貼上到他們的程式碼庫中。

這種趨勢在 Shadcn/UI 中得到了極大的普及，該庫為開發人員提供了現成的、可自訂的元件，這些元件可以直接複製到專案中以實現最大的靈活性。

為什麼複製對於複雜組件更勝一籌

複製貼上方法很出色，特別是對於複雜的 UI 元素，例如身份驗證頁面、詳細的儀表板或複雜的資料視覺化。這些組件需要微調定制，而這很難透過不可變的 npm 套件來實現。

這種方法允許開發人員利用現代前端框架的可組合性和聲明性本質，從而更好地控制組件的每個部分。

Bit Platform 上的互動式 shadcnui 圖表

透過將程式碼嵌入您的專案中，您可以為人工智慧助理提供特定的、有形的上下文。從那裡，您可以要求它進行增量調整，例如調整樣式、添加輔助功能或更改佈局。

位元元件：可以直接編輯的套件

Bit 在 Web 開發世界中引入了一個新實體：Bit 元件。簡而言之，Bit 元件可以被認為是一個超級套件。您可以共用它、安裝它、複製它，甚至可以獨立於任何特定專案設定進行協作。

為了簡單起見，我們可以將 UI 元件分成兩組：設計系統元件和區塊元件。在設計系統中，像 Card 這樣的基本元件是基本構建塊。同時，區塊組件（例如 MediaCard）由設計系統元素組成，但提供更高級的功能。

選擇 1：使用設計系統組件進行組合

在建立新元件時，第一個選項是根據您的設計系統進行組合。例如，要建立自訂卡片，您可能需要組合卡片、按鈕和版面等元件。

在 Bit 平台上共用基於 MUI 的元件

這些元件可以透過 npm、pnpm、yarn 或 Bit 的安裝方式安裝在您的專案中：

npm i @bitdesign/material-ui.surfaces.card bitdesign.material-ui/inputs/button @bitdesign/material-ui.data-display.typography

選擇 2：使用區塊組件

選擇預先建置區塊元件時，除了簡單安裝之外，您還有多種靈活的選擇。

最簡單的途徑是直接安裝元件包並使用其API。如果該元件開箱即用地滿足您的需求或只需要進行細微的調整，那麼這種方法效果很好。

對於需要進行大量更改的場景，Bit 的 fork 命令可讓您將元件的完整程式碼複製到您的專案中。這包括原始檔案、依賴項和配置（包括元件的開發工具）。

https://bit.cloud/learnbit-react/material-ui-blocks/content/media-card

例如，要複製 MediaCard 元件及其配置，我們將執行 bit fork 並將其元件 ID（而不是套件名稱）作為參數傳遞：

bit fork learnbit-react.material-ui-blocks/content/media-card

值得注意的是，Bit還提供了bit導入命令，它允許您對元件進行更改並發布新版本。此選項要求您具有修改元件的適當權限（與 bit fork 命令不同，該命令不會影響原始元件）。

彈出依賴項的來源文件

當衍生具有依賴項的元件時，Bit 會自動安裝它們以方便使用。但是，如果您需要直接存取依賴項的原始程式碼，您也可以分叉這些依賴項。

例如，如果您想複製 Button 元件，您也可以從 Bit 平台上您團隊的集合中 fork 它：

bit fork bitdesign.material-ui/inputs/button