Components / Calendar
Calendar
A date field component that allows users to enter and edit date.
Mo
Tu
We
Th
Fr
Sa
Su
<Calendar /> <!-- Calendar Component -->
<div class="w-full max-w-[320px] bg-white rounded-2xl border border-slate-200 p-4 shadow-sm">
<!-- Header -->
<div class="flex items-center justify-between mb-4 px-2">
<h2 class="font-serif text-lg font-medium text-slate-900">January 2026</h2>
<div class="flex items-center gap-1">
<button class="p-1.5 text-slate-400 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
<button class="p-1.5 text-slate-400 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M9 5l7 7-7 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</button>
</div>
</div>
<!-- Weekdays -->
<div class="grid grid-cols-7 mb-2 text-center text-[11px] font-mono font-medium text-slate-400 uppercase tracking-widest">
<div>Mo</div><div>Tu</div><div>We</div><div>Th</div><div>Fr</div><div>Sa</div><div>Su</div>
</div>
<!-- Grid -->
<div class="grid grid-cols-7 gap-1 text-center font-sans text-sm">
<!-- Empty Slots -->
<div class="w-9 h-9"></div>
<!-- Date Button -->
<button class="w-9 h-9 flex items-center justify-center rounded-full transition-all text-slate-700 hover:bg-slate-100">1</button>
<!-- Selected Date -->
<button class="w-9 h-9 flex items-center justify-center rounded-full bg-slate-900 text-white shadow-md scale-105">24</button>
</div>
</div>