# @nextui-org/date-input

> A date input allows users to enter and edit date and time values using a keyboard.

Latest version **2.3.8** (published 2025-01-05) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @nextui-org/date-input
pnpm add @nextui-org/date-input
yarn add @nextui-org/date-input
bun add @nextui-org/date-input
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.3.8 |
| Published | 2025-01-05 |
| First published | 2024-04-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 133 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 30991 |
| Author | Junior Garcia |
| Maintainers | juniorgarciadev |
| Keywords | date-field |

## Links

- npm: https://www.npmjs.com/package/@nextui-org/date-input
- Repository: https://github.com/nextui-org/nextui
- Homepage: https://nextui.org
- Issues: https://github.com/nextui-org/nextui/issues
- npm.io page: https://npm.io/package/@nextui-org/date-input

## Dependencies (10)

- [@nextui-org/form](https://npm.io/package/@nextui-org/form.md) 2.1.8
- [@react-aria/i18n](https://npm.io/package/@react-aria/i18n.md) 3.12.4
- [@react-aria/utils](https://npm.io/package/@react-aria/utils.md) 3.26.0
- [@react-types/shared](https://npm.io/package/@react-types/shared.md) 3.26.0
- [@react-aria/datepicker](https://npm.io/package/@react-aria/datepicker.md) 3.12.0
- [@internationalized/date](https://npm.io/package/@internationalized/date.md) 3.6.0
- [@nextui-org/react-utils](https://npm.io/package/@nextui-org/react-utils.md) 2.1.3
- [@react-types/datepicker](https://npm.io/package/@react-types/datepicker.md) 3.9.0
- [@nextui-org/shared-utils](https://npm.io/package/@nextui-org/shared-utils.md) 2.1.2
- [@react-stately/datepicker](https://npm.io/package/@react-stately/datepicker.md) 3.11.0

## Recent versions

- 2.3.8 (latest) — 2025-01-05
- 0.0.0-canary-20250105124413 (canary) — 2025-01-05
- 2.2.0-beta.9 (beta) — 2024-11-28
- 0.0.0-dev-v2-20240418192457 (dev-v2) — 2024-04-18
- 0.0.0-canary-20250105123759 — 2025-01-05
- 0.0.0-canary-20250105105357 — 2025-01-05
- 0.0.0-canary-20250104022216 — 2025-01-04
- 0.0.0-canary-20250103215428 — 2025-01-03
- 0.0.0-canary-20250103161322 — 2025-01-03
- 0.0.0-canary-20250103144655 — 2025-01-03
- 0.0.0-canary-20250103144031 — 2025-01-03
- 0.0.0-canary-20250103142904 — 2025-01-03
- 0.0.0-canary-20250102192808 — 2025-01-02
- 0.0.0-canary-20250102192155 — 2025-01-02
- 0.0.0-canary-20250102191541 — 2025-01-02
- … 162 more at https://npm.io/package/@nextui-org/date-input/versions

## README

<p align="center">
  <a href="https://heroui.com">
      <img 
        alt="HeroUI v3 logo" 
        width="100%" 
        src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/docs/heroui-og_2x.jpg"
      />
  </a>
</p>
<p align="center">
  <a href="https://github.com/heroui-inc/heroui/blob/main/LICENSE">
    <img src="https://img.shields.io/badge/license-Apache--2.0-blue?style=flat" alt="License">
  </a>
  <a href="https://www.npmjs.com/package/@heroui/react">
    <img src="https://img.shields.io/npm/dm/@heroui/react.svg?style=flat-round" alt="npm downloads">
  </a>
</p>

## Why HeroUI?

HeroUI (previously NextUI) is a production-ready React component library that combines the accessibility rigor of [React Aria](https://react-spectrum.adobe.com/react-aria/) with the utility-first styling of [Tailwind CSS v4](https://tailwindcss.com/). It ships a clean compound component API (`Card.Header`, `Card.Content`, `Select.Item`, …), requires no `<Provider>` wrapper, and works out of the box with React 19 and Next.js.

- **Accessible by default** — Built on React Aria for WCAG-compliant keyboard, focus, and screen-reader behavior
- **Tailwind CSS v4** — Modern engine, no CSS-in-JS runtime, smaller output, faster builds
- **Compound components** — Composable API (`Card.Header`, `Card.Content`) instead of deeply nested props
- **Zero boilerplate** — No Provider wrapper needed (unlike Chakra, MUI)
- **AI-native** — MCP server, `llms.txt`, and agent skills so AI assistants understand your components
- **Battle-tested** — Previously known as NextUI, trusted by thousands of production apps

## Packages

| Package | Description |
|---|---|
| [`@heroui/react`](https://www.npmjs.com/package/@heroui/react) | Full component bundle |
| [`@heroui/styles`](https://www.npmjs.com/package/@heroui/styles) | Styles / theme only |
| Individual packages | e.g. `@heroui/button`, `@heroui/modal` — tree-shakeable per-component imports |

## Getting Started

Visit [heroui.com/docs/react/getting-started/quick-start](https://heroui.com/docs/react/getting-started/quick-start) to get started with HeroUI.

```bash
npm install @heroui/styles @heroui/react
```

## Who Is This For?

HeroUI is a good fit if you are building:

- **SaaS applications** — forms, tables, overlays, and notifications out of the box
- **Dashboards & admin panels** — data-dense layouts with consistent design tokens
- **E-commerce storefronts** — performant, accessible, SEO-friendly components
- **Marketing sites & landing pages** — polished UI without a heavyweight runtime
- **Any React / Next.js project** that values design quality and accessibility

## AI-Powered Development

HeroUI is built for the AI-assisted development workflow.

| Tool | What it does |
|---|---|
| **MCP Server** (`@heroui/react-mcp`) | Components that understand your theme — install the server in Cursor, Claude Code, Windsurf, or any MCP-compatible editor |
| **llms.txt** | Available at [heroui.com/llms.txt](https://heroui.com/llms.txt) — structured context for LLMs about every component |
| **Agent Skills** | Run `npx heroui-cli agents-md` to install skills for Cursor, Claude Code, and more |

Works with **Cursor**, **Claude Code**, **Windsurf**, **GitHub Copilot**, and any tool that supports MCP or `llms.txt`.

## Compared To

| Library | How HeroUI differs |
|---|---|
| **shadcn/ui** | HeroUI is batteries-included with a consistent design system; shadcn is copy-paste-customize |
| **MUI** | HeroUI is lighter, Tailwind-native, no CSS-in-JS runtime overhead |
| **Chakra UI** | HeroUI uses React Aria (stronger a11y primitives) and Tailwind v4 (better perf) |
| **Mantine** | HeroUI has AI tooling (MCP, llms.txt), Tailwind-first styling |

## Documentation

- **Latest (v3)**: [heroui.com](https://heroui.com)
- **v2**: [v2.heroui.com](https://v2.heroui.com)

## Storybook

Visit [storybook-v3.heroui.com](https://storybook-v3.heroui.com/) to view the storybook for all components.

## Roadmap

Visit [herouiv3.featurebase.app/roadmap](https://herouiv3.featurebase.app/roadmap) to view the roadmap for HeroUI v3.

## Figma

Visit the [HeroUI Figma Kit (v3)](https://www.figma.com/community/file/1546526812159103429/heroui-figma-kit-v3) to view the design kit.

## Community

We're excited to see the community adopt HeroUI, raise issues, and provide feedback.
Whether it's a feature request, bug report, or a project to showcase, please get involved!

- [Discord](https://discord.gg/9b6yyZKmH4)
- [X](https://x.com/hero_ui)
- [GitHub Discussions](https://github.com/heroui-inc/heroui/discussions)

## Contributing

Contributions are always welcome!

See [CONTRIBUTING.md](https://github.com/heroui-inc/heroui/blob/main/CONTRIBUTING.md) for ways to get started.

Please adhere to this project's [CODE_OF_CONDUCT](https://github.com/heroui-inc/heroui/blob/main/CODE_OF_CONDUCT.md).

## License

[Apache-2.0](https://www.apache.org/licenses/LICENSE-2.0)

---
_Source: https://npm.io/package/@nextui-org/date-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._