Playground

Everything below runs the published bikram-sambat-react package. Pick the calendar or the date picker, change its props, and adjust the colors and sizes of the default stylesheet. The code underneath always reproduces what you see: the component with the props you changed, and a CSS rule with just the variables you edited.

import { useState } from "react";
import { NepaliCalendar, type BSDate } from "bikram-sambat-react";
import "bikram-sambat-react/styles.css";

export function MyDate() {
  const [date, setDate] = useState<BSDate>();
  return (
    <NepaliCalendar
      value={date}
      onChange={setDate}
    />
  );
}

A few things the playground doesn't cover, because they need your own code: classNames and unstyled for styling with your own classes or Tailwind, components for replacing parts, and renderDay for custom day content.