time-slot-picker

Selectable grid of available time slots for booking.

Source code

No interactive demo is registered for this component yet — the source is shown directly.

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

interface TimeSlot {
  time: string
  available: boolean
}

function TimeSlotPicker({
  slots,
  selected,
  onSelect,
  className,
  ...props
}: {
  slots: TimeSlot[]
  selected?: string
  onSelect: (time: string) => void
} & Omit<React.ComponentProps<"div">, "onSelect">) {
  return (
    <div
      data-slot="time-slot-picker" data-portal="https://design.nyuchi.com/components/time-slot-picker"
      className={cn("focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:border-ring outline-none "grid grid-cols-3 gap-2 sm:grid-cols-4", className)}
      role="listbox"
      aria-label="Available time slots"
      {...props}
    >
      {slots.map((slot) => {
        const isSelected = slot.time === selected
        return (
          <button
            key={slot.time}
            type="button"
            role="option"
            aria-selected={isSelected}
            disabled={!slot.available}
            onClick={() => slot.available && onSelect(slot.time)}
            className={cn("focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:border-ring outline-none 
              "inline-flex h-10 items-center justify-center rounded-[var(--radius-lg,14px)] text-sm font-medium tabular-nums transition-colors",
              isSelected
                ? "bg-[var(--color-primary, var(--color-cobalt, #00B0FF))] text-white"
                : slot.available
                  ? "border border-border bg-input/30 text-foreground hover:bg-input/50"
                  : "cursor-not-allowed bg-muted text-muted-foreground opacity-50"
            )}
          >
            {slot.time}
          </button>
        )
      })}
    </div>
  )
}

export { TimeSlotPicker, type TimeSlot }

Variants & props

The variants, sizes, and props surfaced by the registry. Each is sourced from the Supabase component_docs table.

API tester

Hit the registry API live and see the JSON the shadcn CLI consumes when it installs this component.

GET/api/v1/ui/time-slot-picker

Install

npx shadcn@latest add https://mzizi.dev/api/v1/ui/time-slot-picker

Source path

components/ui/time-slot-picker.tsx

Source code

No interactive demo is registered for this component yet — the source is shown directly.

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

interface TimeSlot {
  time: string
  available: boolean
}

function TimeSlotPicker({
  slots,
  selected,
  onSelect,
  className,
  ...props
}: {
  slots: TimeSlot[]
  selected?: string
  onSelect: (time: string) => void
} & Omit<React.ComponentProps<"div">, "onSelect">) {
  return (
    <div
      data-slot="time-slot-picker" data-portal="https://design.nyuchi.com/components/time-slot-picker"
      className={cn("focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:border-ring outline-none "grid grid-cols-3 gap-2 sm:grid-cols-4", className)}
      role="listbox"
      aria-label="Available time slots"
      {...props}
    >
      {slots.map((slot) => {
        const isSelected = slot.time === selected
        return (
          <button
            key={slot.time}
            type="button"
            role="option"
            aria-selected={isSelected}
            disabled={!slot.available}
            onClick={() => slot.available && onSelect(slot.time)}
            className={cn("focus-visible:ring-ring/50 focus-visible:ring-[3px] focus-visible:border-ring outline-none 
              "inline-flex h-10 items-center justify-center rounded-[var(--radius-lg,14px)] text-sm font-medium tabular-nums transition-colors",
              isSelected
                ? "bg-[var(--color-primary, var(--color-cobalt, #00B0FF))] text-white"
                : slot.available
                  ? "border border-border bg-input/30 text-foreground hover:bg-input/50"
                  : "cursor-not-allowed bg-muted text-muted-foreground opacity-50"
            )}
          >
            {slot.time}
          </button>
        )
      })}
    </div>
  )
}

export { TimeSlotPicker, type TimeSlot }