Calendar

Installation

$ pnpm dlx shadcn@latest add https://react.uipkge.dev/r/react/calendar.json

$ npx shadcn@latest add https://react.uipkge.dev/r/react/calendar.json

$ yarn dlx shadcn@latest add https://react.uipkge.dev/r/react/calendar.json

$ bunx shadcn@latest add https://react.uipkge.dev/r/react/calendar.json

Examples

Dependencies

Used by

Files (2)

• components/ui/calendar/Calendar.tsx 3.8 kB

  'use client'
  
  import * as React from 'react'
  import { ChevronLeft, ChevronRight } from 'lucide-react'
  import { DayPicker } from 'react-day-picker'
  import { cn } from '@/lib/utils'
  import { buttonVariants } from '@/components/ui/button'
  
  export type CalendarProps = React.ComponentProps<typeof DayPicker>
  
  /**
   * Single-month calendar grid for date selection, built on react-day-picker v9.
   * This is the React mirror of the reka-ui-based Vue Calendar — the cell sizes,
   * selected / today / outside / range states, and outline nav chevrons are mapped
   * 1:1 from the Vue registry's Tailwind class strings via react-day-picker's
   * `classNames` map. Pair it with a Popover or use it inline.
   */
  function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
    return (
      <DayPicker
        data-uipkge=""
        data-slot="calendar"
        showOutsideDays={showOutsideDays}
        className={cn('p-3', className)}
        classNames={{
          months: 'mt-4 flex flex-col gap-y-4 sm:flex-row sm:gap-x-4 sm:gap-y-0',
          month: 'flex flex-col gap-4',
          // The Vue layout floats the nav across the top of the header. v9 renders
          // the caption + nav inline; we keep the caption centered and pin the nav
          // to the right so the chevrons sit at the inset-x edges like the Vue version.
          month_caption: 'relative flex h-9 items-center justify-center',
          caption_label: 'text-sm font-medium',
          nav: 'absolute inset-x-0 top-0 flex items-center justify-between gap-1',
          button_previous: cn(
            buttonVariants({ variant: 'outline' }),
            'size-9 bg-transparent p-0 opacity-70 hover:opacity-100 focus-visible:opacity-100',
          ),
          button_next: cn(
            buttonVariants({ variant: 'outline' }),
            'size-9 bg-transparent p-0 opacity-70 hover:opacity-100 focus-visible:opacity-100',
          ),
          month_grid: 'w-full border-collapse space-y-1',
          weekdays: 'flex',
          weekday: 'text-muted-foreground flex-1 rounded-md text-xs font-normal',
          week: 'mt-2 flex w-full',
          day: cn(
            'relative flex-1 p-0 text-center text-sm focus-within:relative focus-within:z-20',
            '[&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md',
            '[&:has([aria-selected].day-outside)]:bg-accent/50 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md',
          ),
          day_button: cn(
            buttonVariants({ variant: 'ghost' }),
            'size-9 cursor-pointer p-0 font-normal aria-selected:opacity-100',
          ),
          selected:
            'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground [&>button]:bg-primary [&>button]:text-primary-foreground [&>button:hover]:bg-primary [&>button:hover]:text-primary-foreground',
          today: '[&:not([aria-selected])]:bg-accent [&:not([aria-selected])]:text-accent-foreground',
          outside: 'day-outside text-muted-foreground aria-selected:text-muted-foreground',
          disabled: 'text-muted-foreground opacity-50',
          range_start: 'day-range-start rounded-l-md',
          range_end: 'day-range-end rounded-r-md',
          range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
          hidden: 'invisible',
          ...classNames,
        }}
        components={{
          Chevron: ({ orientation, className: chevronClassName, ...chevronProps }) =>
            orientation === 'left' ? (
              <ChevronLeft className={cn('size-4', chevronClassName)} aria-hidden="true" {...chevronProps} />
            ) : (
              <ChevronRight className={cn('size-4', chevronClassName)} aria-hidden="true" {...chevronProps} />
            ),
        }}
        {...props}
      />
    )
  }
  Calendar.displayName = 'Calendar'
  
  export { Calendar }

• components/ui/calendar/index.ts 0.1 kB

  export { Calendar, type CalendarProps } from './Calendar'

Raw manifest: https://react.uipkge.dev/r/react/calendar.json