Things

The Date Picker component combines an input field with a calendar popup. Users can click the input or calendar icon to open a calendar and select a date. It features bold borders and shadows that match the Things design system. Built from scratch using React and native HTML elements. No dependencies on any UI library.

Quick Install

Install via shadcn/ui CLI

bash

npx shadcn@latest add https://things.marvlock.dev/registry/ui/date-picker.json

Usage

tsx

import {
  DatePicker,
  DatePickerInput,
  DatePickerContent,
} from "@/components/ui/date-picker"
import { useState } from "react"

function MyComponent() {
  const [date, setDate] = useState<Date | undefined>()

  return (
    <DatePicker value={date} onValueChange={setDate}>
      <DatePickerInput placeholder="Pick a date" />
      <DatePickerContent />
    </DatePicker>
  )
}

Date Picker

Quick Install

Usage

Examples