🎨
UI Knihovna
Kolekce nádherných, znovupoužitelných React komponent a CSS fragmentů vytvořená pomocí Tailwind CSS a Framer Motion.
Výběr data
Interaktivní kalendáře pro výběr data.
Základní kalendář
DatePicker.tsxLanguage: tsx
export function BasicDatePicker() {
return (
<div className="relative max-w-xs w-full">
<div className="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none text-muted">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2} className="w-5 h-5">
<path strokeLinecap="round" strokeLinejoin="round" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<input
type="date"
className="bg-surface border border-border text-foreground text-sm rounded-xl focus:ring-2 focus:ring-accent focus:border-accent block w-full pl-11 p-3.5 transition-shadow"
/>
</div>
);
}