# useToday: Date bounds

> Disable past days and anything more than 30 days out. Until today is known, nothing is disabled, so the server HTML matches the first client render.

Example: https://hextaui.com/docs/use-today/examples/bounds
Component docs: https://hextaui.com/docs/use-today.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/use-today-bounds.json
```

This adds `components/examples/use-today/bounds.tsx` with the useToday component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/use-today/bounds.tsx"
"use client"

import { addDays } from "date-fns"

import { Calendar } from "@/components/ui/calendar"
import { useToday } from "@/hooks/use-today"

export function UseTodayBounds() {
  const today = useToday()

  return (
    <Calendar
      mode="single"
      disabled={today ? [{ before: today }, { after: addDays(today, 30) }] : []}
    />
  )
}
```