{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "calendar-19", "type": "registry:block", "author": "shadcn (https://ui.shadcn.com)", "description": "With presets", "dependencies": [ "date-fns" ], "registryDependencies": [ "calendar", "card", "input", "label" ], "files": [ { "path": "blocks/calendar-19.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { addDays } from \"date-fns\"\n\nimport { Button } from \"@/registry/default/ui/button\"\nimport { Calendar } from \"@/registry/default/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/default/ui/card\"\n\nexport default function Calendar19() {\n const [date, setDate] = React.useState(\n new Date(2025, 5, 12)\n )\n\n return (\n \n \n \n \n \n {[\n { label: \"Today\", value: 0 },\n { label: \"Tomorrow\", value: 1 },\n { label: \"In 3 days\", value: 3 },\n { label: \"In a week\", value: 7 },\n { label: \"In 2 weeks\", value: 14 },\n ].map((preset) => (\n {\n const newDate = addDays(new Date(), preset.value)\n setDate(newDate)\n }}\n >\n {preset.label}\n \n ))}\n \n \n )\n}\n", "type": "registry:component", "target": "" } ], "meta": { "iframeHeight": "600px", "container": "w-full bg-surface min-h-svh flex px-6 py-12 items-start justify-center min-w-0", "mobile": "component" }, "categories": [ "calendar", "date" ] }