Hero Ui

DatePicker

Forms 466

About

Composable date picker built on React Aria DatePicker with DateField and Calendar composition.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds DatePicker to your project and fits it to your theme.

Code

How DatePicker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { DatePicker } from "@/components/ui/heroui-date-picker";

export default function DefaultDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <DatePicker label="Date" />
    </div>
  );
}

export { DefaultDemo };

More by Hero Ui

View all
  • Chip

    Chip

    441
  •  The Pagination

    The Pagination

    361
  • HeroUI Table

    HeroUI Table

    106
  • HeroUI Color Picker

    HeroUI Color Picker

    106
  • Skeleton

    Skeleton

    105
  • HeroUI Disclosure Group

    HeroUI Disclosure Group

    94
  • HeroUI AlertDialog

    HeroUI AlertDialog

    80
  • ComboBox

    ComboBox

    75

More in Forms

View all
  • Premium Auth

    Premium Auth

    519
  • Contact Card

    Contact Card

    1K
  • Form

    Form

    16
  • Authentication Card

    Authentication Card

    49
  • Book A Demo 1

    Book A Demo 1

    72
  • Book A Demo 4

    Book A Demo 4

    55
  • Login Form

    Login Form

    7
  • Login Card

    Login Card

    26