v1.0.0-stable
Atomic Components
Beautifully crafted, high-density components built for the modern web. Designed to be copied, pasted, and extended.
Primary Button
The standard trigger for high-priority actions.
Native MegonCSS Code
<button class="btn-sm btn-primary px-4 rounded-md">Confirm Action</button>Input Field
A clean, atomic input field with labels.
Native MegonCSS Code
<div class="field-group"><label class="label m-b-xs">Email</label><input type="email" class="input border rounded p-x-sm h-8 w-full" placeholder="email@example.com"></div>Atomic Badge
Small indicators for status and metadata.
STABLEALPHA
Native MegonCSS Code
<span class="badge bg-surface border rounded-full px-2 py-0.5 text-[10px] font-bold">STATUS</span>Standard Alert
Informational banners for user feedback.
Update AvailableVersion 2.0 has been deployed.
Native MegonCSS Code
<div class="alert border rounded-lg p-md bg-surface flex gap-md items-start"><i data-lucide="info" class="w-4 h-4"></i><div class="flex col"><span class="text-xs font-bold">Title</span><span class="text-[11px]">Description...</span></div></div>Action Card
Dense content container for dashboard widgets.
Recent Activity
Your project pulse is stable.
Native MegonCSS Code
<div class="card border rounded-xl p-lg bg-white shadow-sm"><h3 class="text-sm font-bold m-b-sm">Title</h3><button class="btn-sm btn-primary">Action</button></div>Checkbox Group
Fully styled atomic selection controls.
Native MegonCSS Code
<div class="flex items-center gap-md"><input type="checkbox" class="checkbox"><label class="text-sm font-medium">Label</label></div>Want to add a component?
MegonCSS is built for developers, by developers. We are looking for contributors to help expand the library with more high-density, accessible elements.