shadcn/uiのCalendarコンポーネントの表示がおかしい

Question

実現したいこと

shadcn/uiでCalendarコンポーネントを想定通りに表示する

前提

JavaScript+Next.jsで勤怠管理アプリを作成しています。
shadcn/uiのDate Pickerを実装途中にCalendarが思ったように表示されていないことに気づきました。
↓実際の様子

該当のソースコード

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
    Card,
    CardContent,
    CardFooter,
    CardHeader,
    CardTitle,
    CardDescription
} from "@/components/ui/card";
import { Calendar } from "@/components/ui/calendar";
import { Calendar as CalendarIcon } from "lucide-react";
import { format } from "date-fns";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { cn } from "@/lib/utils";
import { useRouter } from "next/router";
import React, { useState, useEffect } from "react";
import LoadingProgress from "./../../components/Progress";
import ja from 'date-fns/locale/ja';

export default function Register() {
    // 関数部分
    return (
        <div className="flex flex-col justify-center items-center min-h-screen bg-gray-100">
            <Card className="w-[320px] bg-white p-4 rounded-lg shadow-md">
                <CardHeader className="pb-2">
                    <CardTitle className="justify-center">
                        {user?.name}
                    </CardTitle>
                    <CardDescription>
                        開始時刻、終了時刻を指定してください
                    </CardDescription>
                </CardHeader>
                <CardContent>
                    {/* TODO: Calendarから日付を取得する */}
                    <div className="flex flex-col space-y-1.5">
                        <Label htmlFor="date">日付</Label>
                        <Popover>
                            <PopoverTrigger asChild>
                                <Button variant="outline" className={cn("w-[280px] justify-start text-left font-normal", !date && "text-muted-foreground")}>
                                    <CalendarIcon className="mr-2 h-4 w-4" />
                                    {date ? format(date, "PPP(E)", { locale:ja }) : "日付を選択して下さい"}
                                </Button>
                            </PopoverTrigger>
                            <PopoverContent className="w-[300px] p-0">
                                <Calendar
                                className="rounded-md border"
                                mode="single"
                                selected={date}
                                onSelect={handleDateChange}
                                initialFocus
                            />
                            </PopoverContent>
                        </Popover>
                    </div>
                    <div className="flex flex-col space-y-1.5">
                        <Label htmlFor="start">開始時刻</Label>
                        <Input
                            type="time"
                            value={start}
                            onChange={(e) => setStart(e.target.value)}
                        />
                    </div>
                    <div className="flex flex-col space-y-1.5">
                        <Label htmlFor="end">終了時刻</Label>
                        <Input
                            type="time"
                            value={end}
                            onChange={(e) => setEnd(e.target.value)}
                        />
                    </div>
                    {/* TODO: toastを使った登録完了通知、punchOut使用しない */}
                    <CardFooter className="justify-center pt-4 pb-2">
                        <Button className="mr-4 pr-4" onClick={handleSubmit}>登録</Button>
                        <Button className="ml-4 pl-4"
                            onClick={() =>
                                router.push('./../attendChoice')
                            }
                        >
                            戻る
                        </Button>
                    </CardFooter>
                </CardContent>
            </Card>
        </div>
    );
}

試したこと

新規プロジェクトで同じコードを実装したところ、公式ページ通りの表示になりました。
また、依存関係が原因である可能性があったのでnode_modulesとpackage-lock.jsonの再インストールを行いました。

Answer 1

shadcn/uiのComponentsを入れていたディレクトリがtailwind.config.jsで含まれていませんでした。
Componentsを追加するときにエイリアス等の設定がうまく行っておらず~/@/components/uiと~/src/componentsがの両方が存在していたことが原因だと思われます。