Studio Kit

Data Input

Calendar

Date picker sobre react-day-picker, estilizado com os tokens da marca e o buttonVariants do kit. Suporta os modos single, multiple e range.

npx shadcn add @studio/calendar

Baseado em react-day-picker — acessível por teclado e leitores de tela.

Junho 2026
Dom
Seg
Ter
Qua
Qui
Sex
Sáb
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4

Demo estática. Em produção usa react-day-picker (modos single / multiple / range) estilizado com buttonVariants e os tokens da marca.

Props

Prop Tipo Descrição
mode 'single'|'multiple'|'range' Estratégia de seleção
selected Date | Date[] | DateRange Valor selecionado (modo controlado)
onSelect (value) => void Callback ao selecionar
showOutsideDays boolean Exibe dias dos meses vizinhos
disabled Matcher | Matcher[] Dias não selecionáveis