๐ŸŽจ

UI Library

A collection of beautiful, reusable React components and CSS snippets built with Tailwind CSS and Framer Motion.

Date Pickers

Interactive calendars for date selection.

Basic Calendar

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> ); }