104Get started
HextaUI

Date picker: Narrow container

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

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>
  )
}

Add this example

This adds the example as components/examples/date-picker/narrow.tsx, together with the Date picker component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/date-picker-narrow.json

To add only the component, follow the Date picker installation.

Props in this example

The Date picker props this example sets, from the API reference.

DateRangePicker

PropTypeDefault
defaultValue
{ from: Date; to?: Date } | nullnull

Every prop is in the Date picker API reference.

More Date picker examples

See them all, with keyboard support and accessibility notes, on the Date picker page.

Related components