AtomicX是為可組合性而生的
HTML/CSS框架

讓你不需要用React或Vue就能寫出組件，輕鬆玩轉畫面。

快速上手查看 GitHub

為什麼選擇 atomicX？

一個現代化、輕量且極具擴展性的解決方案。

共用邏輯

省去框架的包袱，直接使用HTML當作元件，可以快速切版。

學習曲線低

設計簡潔明瞭，沒有要讓你寫到JS，直接使用HTML即可。

直觀的 API

通過@export:來共用元素、@use:來引用元素、@macro:來定義原生元素、@micro:來定義復用元素。

輕量無依賴

核心程式碼極致輕量，沒有任何外部依賴，為您的專案帶來最小的體積負擔。

框架無關

可以輕鬆整合到 React, Vue, Svelte 或任何您喜愛的 HTML 專案中。

切版優先

為切版提供一流的支援，讓您專注於畫面邏輯，而非框架本身。

高效簡單

當你寫HTML的時候同時也在建構組件，不需要學習新的語法。



<div class="@macro:Card bg-white p-4 rounded-lg shadow">
  <h3>產品標題</h3>
  <p>產品描述</p>
  <img src="placeholder.jpg" alt="產品圖片" />
  <a href="#" class="text-blue-500">詳細資訊</a>
</div>


<Card
  h3="{超值商品}"
  p="{限時特價中！} text-red-500 font-bold"
  img="{product1.jpg}"
  a="{/product/1} 立即購買 text-white bg-blue-500 px-4 py-2 rounded"
  el-3="hover:bg-blue-600 transition-colors"
></Card>


<div class="@macro:MediaObject flex gap-4 p-4 bg-gray-100 rounded-lg">
  <img src="avatar-placeholder.jpg" class="w-16 h-16 rounded-full" />
  <div class="flex-1">
    <h4 class="font-bold">用戶名稱</h4>
    <p>用戶評論內容...</p>
  </div>
</div>


<MediaObject
  img="{user-avatar.jpg}"
  h4="{張小明}"
  p="{這個商品真的很好用，強烈推薦！} text-gray-700"
  el-0="w-20 h-20" 
  el-2="text-lg font-semibold text-blue-600" 
></MediaObject>


<script src="https://cdn.jsdelivr.net/gh/Jeffrey0117/atomicX/atomicX.js"></script>

AtomicX是為可組合性而生的 HTML/CSS框架