# Date picker: Narrow container

> The trigger never grows past its container. Long labels truncate instead of wrapping.

Example: https://hextaui.com/docs/date-picker/examples/narrow
Component docs: https://hextaui.com/docs/date-picker.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/date-picker-narrow.json
```

This adds `components/examples/date-picker/narrow.tsx` with the Date picker component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/date-picker/narrow.tsx"
import { DateRangePicker } from "@/components/ui/date-picker"

export function DatePickerNarrow() {
  return (
    <div className="w-40">
      <DateRangePicker
        defaultValue={{
          from: new Date(2026, 0, 28),
          to: new Date(2026, 11, 3),
        }}
      />
    </div>
  )
}
```

## Props in this example

### DateRangePicker

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` | `{ from: Date; to?: Date } \| null` | `null` |  |

## More Date picker examples

- [Controlled](https://hextaui.com/docs/date-picker/examples/controlled.md)
- [Range](https://hextaui.com/docs/date-picker/examples/range.md)
- [Disabled days](https://hextaui.com/docs/date-picker/examples/disabled-days.md)
- [Month and year dropdowns](https://hextaui.com/docs/date-picker/examples/dropdowns.md)
- [In a form](https://hextaui.com/docs/date-picker/examples/form.md)
- [Disabled](https://hextaui.com/docs/date-picker/examples/disabled.md)
- [Inside a sheet](https://hextaui.com/docs/date-picker/examples/in-sheet.md)
- [Right to left](https://hextaui.com/docs/date-picker/examples/rtl.md)