# Shadcn Basic Inline

> Basic date selector

- Type: example, free and open source (MIT)
- Component: [Date Selector](https://reui.io/components/date-selector.md)
- Page: https://reui.io/components/date-selector/c-date-selector-1
- Docs (Base UI): https://reui.io/docs/components/base/date-selector.md
- Docs (Radix UI): https://reui.io/docs/components/radix/date-selector.md
- MCP: `get_example("c-date-selector-1")`
- Registry item: https://reui.io/r/styles/base-nova/c-date-selector-1.json
- Uses: Card, Date Selector

## Best for

The whole selector laid inline in a Card with typed entry, and a JSON readout of the value under it

## Agent notes

- The `JSON.stringify` panel under the Card is a demo readout of `value`; remove it once `value` feeds your form

## When not to use

- A compact field that stays closed until a button opens it: use [Popover](https://reui.io/components/date-selector/c-date-selector-2.md) (`get_example("c-date-selector-2")`)

## Third-party libraries

- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started)

## Install

```bash
npx shadcn@latest add @reui/c-date-selector-1
```

## About Shadcn Date Selector

### When to use

- Report and list filters on a day, month, quarter, half year or year with is, before, after or between
- Due date fields opened from a button into a popover or dialog and committed on Apply
- Localized pickers with translated months, a regional date format and a Monday first week

### When not to use

- One day or a from and to span with no period tabs or operators: use [Calendar](https://reui.io/components/calendar.md) (`get_component("calendar")`)
- A date condition sitting beside other field conditions in one query bar: use [Filters](https://reui.io/components/filters.md) (`get_component("filters")`)
- A booking flow that pairs a day with time slots and a confirm step: use the [Schedule blocks](https://reui.io/blocks/application/schedule.md)

### Agent notes

- Period lists run from `minYear` 2015 to `maxYear` 2026 by default, so pass a later `maxYear` to offer next year; `yearRange` alone changes nothing
- `onChange` runs on mount and again whenever its identity changes, so pass a stable state setter, never an inline API call
- The text field takes typed input such as 2025, Q4 or a full date only when `inputHint` is set; without it the field is read only

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.