EstávelFormuláriodesde v0.1.0
Calendar
Calendário para escolha de data.
Quando usar
Seleção de data única ou intervalo em formulários e filtros.
Playground
Ajuste props ou edite o código em tempo real (componentes compatíveis).
Controles interativos disponíveis em breve para este componente. Use os exemplos abaixo como referência.
Editor Sandpack disponível para: button, input, textarea, switch, skeleton, separator, label e spinner. Este componente usa apenas o preview interativo acima.
Exemplos
Variações comuns de uso.
Uso básico
import { Calendar } from "@/components/ui/calendar"
export function CalendarDemo() {
return <Calendar />
}API
Props principais documentadas para o time.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| className | string | — | Classes Tailwind para layout e espaçamento. |
| children | ReactNode | — | Conteúdo interno do componente. |
Instalação
pnpm dlx shadcn@latest add http://localhost:3000/r/calendar.jsonpnpm dlx shadcn@latest add @youxgroup/calendarDependências
npm: cn, react-day-picker@latest, date-fns, @hugeicons/react, @hugeicons/core-free-icons
Registry: @youxgroup/button