{"slug":"date-picker","name":"Date Picker","aliases":["datepicker","calendar picker","datetime picker","date select","date dialog"],"states":["closed","open","hover","focus","disabled"],"ariaPattern":null,"checklist":["Calendar grid — A month view with days arranged in a weekly grid, navigable forward and backward by month, as the primary date selection surface","Text input alongside — A free-text date field paired with the calendar, so users who know the date can type it rather than relying on clicking only","Date range selection (if applicable) — The ability to select a start and end date, with the range highlighted across the calendar grid and both values independently editable","Disabled dates — Past dates, unavailable dates, or out-of-range dates visually distinct from selectable ones","Today shortcut — A clearly labelled button or link to jump to today's date","Locale and format — The calendar respecting regional conventions e.g. week starting on Monday or Sunday, date format in the text input matching the user's locale (DD/MM or MM/DD)","Time selection (if applicable) — When a time is also required, a time picker integrated with or accessible directly from the date picker (not a separate, disconnected control)"],"checklistSource":"checklist.design","resourceCount":74,"resources":[{"id":"ark-ui","name":"Ark UI","page":"https://index.chele.bi/r/ark-ui/","tier":"S","summary":"Headless component library from the Chakra UI team: 45+ unstyled, accessible components with one API across React, Vue, Solid and Svelte, driven by Zag.js state machines. You write the CSS. MIT licensed, with an llms.txt and an MCP server.","framework":["react","vue","solid","svelte"],"license":["mit"],"install":"npm install @ark-ui/react"},{"id":"astryx","name":"Astryx","page":"https://index.chele.bi/r/astryx/","tier":"S","summary":"Meta's open-source design system: 150+ React components and hooks built on StyleX, seven theme packages, ready-to-ship page templates, and a CLI that gives coding agents component props, variants and templates. Requires React 19; MIT.","framework":["react","next"],"license":["mit"],"install":"npm install @astryxdesign/core @stylexjs/stylex @astryxdesign/theme-neutral @astryxdesign/cli && npx astryx init"},{"id":"chakra-ui","name":"Chakra UI","page":"https://index.chele.bi/r/chakra-ui/","tier":"S","summary":"React component system built on Ark UI and Zag.js with a token-based styling engine and dark mode. About 114 documented components, installed from npm with a CLI snippet command. Official MCP server and llms.txt. MIT core; paid Pro pages and templates.","framework":["react","next","remix"],"license":["mit","commercial"],"install":"npm i @chakra-ui/react @emotion/react && npx @chakra-ui/cli snippet add"},{"id":"cloudflare-kumo","name":"Kumo","page":"https://index.chele.bi/r/cloudflare-kumo/","tier":"S","summary":"Cloudflare's React component library, built on Base UI with a Tailwind v4 semantic-token system and automatic dark mode. Ships 44 components, ECharts-backed charts, installable blocks, a kumo CLI that lists component docs, a Figma plugin and an agent guide.","framework":["react"],"license":["mit"],"install":"pnpm add @cloudflare/kumo"},{"id":"component-gallery","name":"The Component Gallery","page":"https://index.chele.bi/r/component-gallery/","tier":"S","summary":"Reference that indexes about 60 UI component types and links each to about 2,670 implementations across 95 public design systems, with the alternative names each system uses. A naming and prior-art lookup, not installable code.","framework":["react","web-components"],"license":[],"install":null},{"id":"coss-ui","name":"Coss UI","page":"https://index.chele.bi/r/coss-ui/","tier":"S","summary":"Cal.com's React component library built on Base UI and styled with Tailwind CSS v4. Source is installed through the shadcn CLI under the @coss namespace. Ships about 60 primitives, hooks, a Chat UI, a Radix migration guide, an Agent Skill and llms.txt.","framework":["react","next"],"license":["agpl"],"install":"pnpm dlx shadcn@latest add @coss/ui"},{"id":"gpui-component","name":"GPUI Component","page":"https://index.chele.bi/r/gpui-component/","tier":"S","summary":"Rust component library for GPUI, the framework behind Zed, from Longbridge. Ships more than 60 components with a themeable token system, virtualized tables and lists, a code editor with LSP, charts, and a Dock layout. The GitHub page calls it GPUI Kit.","framework":["rust-gpui"],"license":["apache-2.0"],"install":"gpui-component = { git = \"https://github.com/longbridge/gpui-component\" }"},{"id":"heroui","name":"HeroUI (formerly NextUI)","page":"https://index.chele.bi/r/heroui/","tier":"S","summary":"Open-source React component library for web and React Native, previously NextUI. Combines React Aria Components with Tailwind CSS v4 and ships compound components, an MCP server, llms.txt, AGENTS.md and agent skills. Core packages are free.","framework":["react","next","react-native"],"license":["mit","apache-2.0"],"install":"npm i @heroui/styles @heroui/react"},{"id":"heroui-pro","name":"HeroUI Pro","page":"https://index.chele.bi/r/heroui-pro/","tier":"S","summary":"Paid commercial layer on open-source HeroUI: 65 React web and 47 React Native components, premium themes, Figma libraries and 6 full-page templates. Adds DataGrid, Kanban, charts, a rich text editor and an AI chat set, with a CLI, two MCP servers and agent skills.","framework":["react","next","react-native"],"license":["commercial","proprietary"],"install":"npx heroui-pro@latest login && npx heroui-pro@latest install"},{"id":"intent-ui","name":"Intent UI","page":"https://index.chele.bi/r/intent-ui/","tier":"S","summary":"MIT React Aria Components library with 80+ accessible components, distributed through the shadcn CLI under @intentui and styled with Tailwind. Free starter kits cover Next.js, Laravel, TanStack Router and Vite; 507 blocks, 542 patterns and 16 templates are sold separately.","framework":["react","next","remix","astro"],"license":["mit","commercial"],"install":"npx shadcn@latest init @intentui/theme-default && npx shadcn@latest add @intentui/combo-box"},{"id":"mantine","name":"Mantine","page":"https://index.chele.bi/r/mantine/","tier":"S","summary":"React component library with 100+ components and 70+ hooks, styled with CSS modules and CSS variables with no runtime CSS-in-JS. Separate packages cover forms, dates, charts, rich text, notifications, carousel and a Spotlight command palette. MIT licensed, dark mode built in.","framework":["react","next","remix"],"license":["mit"],"install":"npm install @mantine/core @mantine/hooks"},{"id":"material-design-3","name":"Material Design 3","page":"https://index.chele.bi/r/material-design-3/","tier":"S","summary":"Google's Material Design 3 documentation: foundations, styles, design tokens and specification pages for 39 components, with implementation guides for Jetpack Compose, MDC-Android, Flutter and the Web. Includes the M3 Expressive update and a Figma design kit.","framework":["kotlin-compose","flutter","web-components"],"license":["apache-2.0","cc-by","trademark-restricted"],"install":null},{"id":"mui","name":"MUI","page":"https://index.chele.bi/r/mui/","tier":"S","summary":"MUI is the umbrella for Material UI, a 67-component MIT React library implementing Material Design, and MUI X with Data Grid, Date and Time Pickers, Charts and Tree View. Eight free page templates ship in the docs; MUI X Pro and Premium are paid.","framework":["react","next"],"license":["mit","commercial"],"install":"npm install @mui/material @emotion/react @emotion/styled"},{"id":"namethatui","name":"NameThatUI","page":"https://index.chele.bi/r/namethatui/","tier":"S","summary":"Reference site that maps vague descriptions of web and macOS UI elements to canonical names, anatomy, common misnomers, and API symbols in CSS, Tailwind, SwiftUI, AppKit and Electron. Every entry has paste-ready build and debug prompts; the site serves llms.txt.","framework":["vanilla","swiftui"],"license":[],"install":null},{"id":"react-aria","name":"React Aria","page":"https://index.chele.bi/r/react-aria/","tier":"S","summary":"Adobe's library of 50+ unstyled React components and matching hooks that supply ARIA roles, focus management, keyboard and pointer interaction, internationalization and RTL. Ships no styles; works with Tailwind, vanilla CSS, CSS Modules or CSS-in-JS. Apache-2.0.","framework":["react","next"],"license":["apache-2.0"],"install":"npm install react-aria-components"},{"id":"reui","name":"ReUI","page":"https://index.chele.bi/r/reui/","tier":"S","summary":"A shadcn/ui registry of 1,264 free component examples and 27 in-house primitives such as Data Grid, Gantt, Kanban, and Event Calendar in Radix UI and Base UI versions, plus paid pro blocks, templates, and icons. Hosted MCP server and agent skills.","framework":["react","next","astro","vue"],"license":["mit","commercial"],"install":"npx shadcn@latest add @reui/c-button-10"},{"id":"shadcn-ui","name":"shadcn/ui","page":"https://index.chele.bi/r/shadcn-ui/","tier":"S","summary":"Official shadcn/ui site and registry: 64 documented React components as copy-in source, styled with Tailwind CSS variables on Radix primitives, plus blocks for dashboard, sidebar, login, and signup. Installed with the shadcn CLI. MIT licensed.","framework":["react","next","remix","astro","vanilla"],"license":["mit"],"install":"pnpm dlx shadcn@latest add [component]"},{"id":"shadcn-ui-github","name":"shadcn/ui (GitHub)","page":"https://index.chele.bi/r/shadcn-ui-github/","tier":"S","summary":"Upstream monorepo of shadcn/ui: component sources, the shadcn CLI, the registry schema, and templates and skills directories. Components are React on Radix and Tailwind, copied into your repo as code.","framework":["react","next","remix","astro","vanilla"],"license":["mit"],"install":"pnpm dlx shadcn@latest init"},{"id":"untitled-ui","name":"Untitled UI","page":"https://index.chele.bi/r/untitled-ui/","tier":"S","summary":"A paired Figma UI kit and React component library built on React Aria, Tailwind CSS v4 and TypeScript. The React source is MIT-licensed and installed with a CLI; PRO tiers add components and page examples. A hosted MCP server lets coding agents search components.","framework":["react","next","vanilla"],"license":["mit","commercial"],"install":"npx untitledui@latest init --nextjs"},{"id":"ux-patterns-for-developers","name":"UX Patterns for Devs","page":"https://index.chele.bi/r/ux-patterns-for-developers/","tier":"S","summary":"Documentation of 92 UX interface patterns in 11 categories, each with usage guidance, anti-patterns and accessibility requirements. It is framework-agnostic prose, not a component package; a hosted MCP server with 11 tools and llms.txt let agents query it.","framework":["vanilla","react","vue","svelte","angular"],"license":["mit","commercial"],"install":"claude mcp add --transport http ux-patterns https://mcp.uxpatterns.dev"},{"id":"21st-dev","name":"21st.dev","page":"https://index.chele.bi/r/21st-dev/","tier":"A","summary":"Community shadcn-format registry of 12,000+ React and Tailwind components, templates, themes and shaders, with a first-party 21st MCP and CLI that search the registry and install into an editor; copying code needs a paid plan beyond a small free quota.","framework":["react","next"],"license":["mit"],"install":"npx shadcn@latest add \"https://21st.dev/r/<author>/<component>\""},{"id":"8bitcn-ui","name":"8bitcn/ui","page":"https://index.chele.bi/r/8bitcn-ui/","tier":"A","summary":"Pixel-art restyle of shadcn/ui shipped as a shadcn registry: 57 components and 44 blocks covering the shadcn primitives plus game pieces such as health and XP bars, quest logs, save slots, leaderboards and playable 404 pages. MIT licensed and free.","framework":["react","next"],"license":["mit"],"install":"pnpm dlx shadcn@latest add @8bitcn/button"},{"id":"alignui","name":"AlignUI","page":"https://index.chele.bi/r/alignui/","tier":"A","summary":"AlignUI is a commercial React and Tailwind design system with a code-synced Figma library. A free base tier has about 49 components; PRO tiers add blocks, sectoral templates and the Figma file. A small MIT CLI scaffolds Tailwind v4.1 with AlignUI tokens.","framework":["react","next","remix"],"license":["commercial"],"install":"npx @alignui/cli tailwind"},{"id":"ant-design","name":"Ant Design","page":"https://index.chele.bi/r/ant-design/","tier":"A","summary":"Ant Group's enterprise design language and its React component library, antd. Docs list 73 components for dense admin consoles, with a written design spec, TypeScript types, ConfigProvider theming with design tokens, and llms.txt files for agents. MIT licensed.","framework":["react","next"],"license":["mit"],"install":"npm install antd"},{"id":"appica-ui","name":"Appica UI","page":"https://index.chele.bi/r/appica-ui/","tier":"A","summary":"React component library of 70+ components built on Base UI, styled with Tailwind v4 and CSS variables, animated with Motion. MIT licensed, installed as @appica/ui-react, with a free Figma file and llms.txt plus markdown docs for coding agents. Requires React 19.","framework":["react","next"],"license":["mit"],"install":"pnpm add @appica/ui-react"}],"itemCount":37,"items":[{"resource":"8bitcn-ui","name":"8-bit Date Picker","install":"npx shadcn@latest add https://www.8bitcn.com/r/date-picker.json"},{"resource":"arc-ui","name":"Date picker","install":"npx shadcn@latest add https://uiarc.dev/r/date-picker.json"},{"resource":"boardui","name":"Date Picker","install":"npx shadcn@latest add https://www.boardui.com/r/date-picker.json"},{"resource":"hextaui","name":"Date picker","install":"npx shadcn@latest add https://hextaui.com/r/date-picker.json"},{"resource":"intent-ui","name":"date-picker","install":"npx shadcn@latest add https://intentui.com/r/date-picker.json"},{"resource":"intent-ui","name":"Date Picker Controlled","install":"npx shadcn@latest add https://intentui.com/r/date-picker-controlled-example.json"},{"resource":"intent-ui","name":"Date Picker Custom Validation","install":"npx shadcn@latest add https://intentui.com/r/date-picker-custom-validation-example.json"},{"resource":"intent-ui","name":"Date Picker Disabled","install":"npx shadcn@latest add https://intentui.com/r/date-picker-disabled-example.json"},{"resource":"intent-ui","name":"Date Picker","install":"npx shadcn@latest add https://intentui.com/r/date-picker-example.json"},{"resource":"intent-ui","name":"Date Picker Required","install":"npx shadcn@latest add https://intentui.com/r/date-picker-required-example.json"},{"resource":"spectrum-ui","name":"Datetime Picker and Time Input","install":"npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-and-time-input.json"},{"resource":"spectrum-ui","name":"Datetime Picker Calendar Settings","install":"npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-calendar-settings.json"},{"resource":"spectrum-ui","name":"Datetime Picker Demo","install":"npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-demo.json"},{"resource":"spectrum-ui","name":"Datetime Picker Disabled","install":"npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-disabled.json"},{"resource":"spectrum-ui","name":"Datetime Picker Display Format","install":"npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-display-format.json"},{"resource":"spectrum-ui","name":"Datetime Picker Form","install":"npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-form.json"},{"resource":"spectrum-ui","name":"Datetime Picker Granularity","install":"npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-granularity.json"},{"resource":"spectrum-ui","name":"Datetime Picker Hour","install":"npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-hour-cycle.json"},{"resource":"spectrum-ui","name":"Datetime Picker Locale","install":"npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-locale.json"},{"resource":"spectrum-ui","name":"Datetime Picker Placeholder","install":"npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-placeholder.json"},{"resource":"spectrum-ui","name":"Datetime Picker Ref","install":"npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-ref.json"},{"resource":"spectrum-ui","name":"Datetime Year Range","install":"npx shadcn@latest add https://ui.spectrumhq.in/r/datetime-picker-year-range.json"},{"resource":"termcn","name":"Date Picker","install":"npx shadcn@latest add https://www.termcn.dev/r/ink/date-picker.json"},{"resource":"termcn","name":"Date Picker","install":"npx shadcn@latest add https://www.termcn.dev/r/opentui/date-picker.json"},{"resource":"watermelon-ui","name":"DatePicker 1","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-1.json"},{"resource":"watermelon-ui","name":"DatePicker 10","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-10.json"},{"resource":"watermelon-ui","name":"DatePicker 11","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-11.json"},{"resource":"watermelon-ui","name":"DatePicker 12","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-12.json"},{"resource":"watermelon-ui","name":"DatePicker 13","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-13.json"},{"resource":"watermelon-ui","name":"DatePicker 2","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-2.json"},{"resource":"watermelon-ui","name":"DatePicker 3","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-3.json"},{"resource":"watermelon-ui","name":"DatePicker 4","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-4.json"},{"resource":"watermelon-ui","name":"DatePicker 5","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-5.json"},{"resource":"watermelon-ui","name":"DatePicker 6","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-6.json"},{"resource":"watermelon-ui","name":"DatePicker 7","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-7.json"},{"resource":"watermelon-ui","name":"DatePicker 8","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-8.json"},{"resource":"watermelon-ui","name":"DatePicker 9","install":"npx shadcn@latest add https://registry.watermelon.sh/r/date-picker-9.json"}]}