shadcn Nepali Calendar – Native Bikram Sambat for shadcn/ui

shadcn Nepali Calendar brings first-class Bikram Sambat (BS) calendar support to the shadcn/ui ecosystem. Architected similarly to shadcn’s official Persian calendar adapter, it functions as a native React DayPicker DateLib adapter rather than an inflexible third-party widget.

Developers can install it directly into their repositories via the standard shadcn CLI:

pnpm dlx shadcn@latest add https://github.com/Sudan08/shadcn-nepali-calendar/nepali-calendar

💡 Key Design Decisions & Features

• Standard JavaScript Date API: selected and onSelect remain ordinary Gregorian JavaScript Date objects under the hood. Only the rendered grid cells, weekday labels, and navigation months display in Bikram Sambat, ensuring 100% interoperability with form libraries, date-fns, and backend APIs.
• Distributed as Source via shadcn Registry: shadcn add pulls the component and BS conversion math straight into your project’s codebase (lib/nepali-calendar-core/). There are zero runtime external npm dependencies required for Bikram Sambat calendar calculations.
• Independent Locale & Numeral Configurations: Independently toggle between Devanagari or English month/weekday names and Devanagari or Latin numerals.
• Full DayPicker Feature Parity: Because it extends the real DayPicker, all standard modes (single, multiple, range) and caption layouts (label, dropdown bounded between 2060–2090 BS) work out of the box.

💻 Usage Example

import { useState } from 'react';
import { NepaliCalendar } from '@/components/ui/nepali-calendar';

export function BookingPicker() {
  const [date, setDate] = useState<Date>();
  return <NepaliCalendar mode="single" selected={date} onSelect={setDate} />;
}

🛠️ Technology Stack

• Calendar Core: React DayPicker v9 with custom DateLib override and BS conversion engine.
• Component System: shadcn/ui + Radix UI primitives.
• Languages & Tooling: TypeScript, Tailwind CSS, Next.js for interactive documentation and live playground.

View Source on GitHub