feat: integrate shadcn/ui with Tailwind v4

src/login/pages/QrLoginShortStart.tsx

@@ -1,10 +1,11 @@
 import type { PageProps } from "keycloakify/login/pages/PageProps";
 import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 
-export default function QrLoginShortStart(
-    props: PageProps<Extract<KcContext, { pageId: "qr-login-short-start.ftl" }>, I18n>
-) {
+export default function QrLoginShortStart(props: PageProps<Extract<KcContext, { pageId: "qr-login-short-start.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
     const { msg, msgStr } = i18n;
 
@@ -21,11 +22,11 @@ export default function QrLoginShortStart(
                 <div className={classes?.kcFormGroupClass}>
                     <p className="kcQrShortCodeInfoClass">{msg("doShortCodeInfo")}</p>
 
-                    <label htmlFor="shortCode" className={classes?.kcLabelClass}>
+                    <Label htmlFor="shortCode" className={classes?.kcLabelClass}>
                         {msg("doShortCode")}
-                    </label>
+                    </Label>
 
-                    <input
+                    <Input
                         id="shortCode"
                         name="shortCode"
                         type="number"
@@ -41,11 +42,7 @@ export default function QrLoginShortStart(
                 </div>
 
                 <div className={classes?.kcFormGroupClass}>
-                    <input
-                        type="submit"
-                        value={msgStr("doSubmit")}
-                        className={`${classes?.kcButtonClass ?? ""} ${classes?.kcButtonPrimaryClass ?? ""}`}
-                    />
+                    <Button type="submit">{msgStr("doSubmit")}</Button>
                 </div>
             </form>
         </Template>