2.3

frontend/package.json

@@ -53,6 +53,8 @@
     "react-toastify": "^11.0.2",
     "swr": "^1.3.0",
     "uuid": "^9.0.0"
+    "@shadcn/ui": "^0.1.0",
+
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.7",

frontend/src/components/BaseButton.tsx

@@ -4,6 +4,8 @@ import { getButtonColor } from '../colors';
 import BaseIcon from './BaseIcon';
 import type { ColorButtonKey } from '../interfaces';
 import { useAppSelector } from '../stores/hooks';
+import ShadcnButtonWrapper from './ShadcnButton';
+
 
 type Props = {
   label?: string;
@@ -84,23 +86,17 @@ export default function BaseButton({
     </>
   );
 
-  if (href && !disabled) {
+return (
-    return (
+  <ShadcnButtonWrapper
-      <Link href={href} target={target} className={componentClassString}>
+    href={href}
-        {componentChildren}
+    target={target}
-      </Link>
+    type={type ?? 'button'}
-    );
+    disabled={disabled}
-  }
+    onClick={onClick}
+    className={componentClassString}
+  >
+    {componentChildren}
+  </ShadcnButtonWrapper>
+);
 
-  return React.createElement(
-    asAnchor ? 'a' : 'button',
-    {
-      className: componentClassString,
-      type: type ?? 'button',
-      target,
-      disabled,
-      onClick,
-    },
-    componentChildren,
-  );
 }

frontend/src/components/ShadcnButton.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Button as ShadcnButton } from '@shadcn/ui';
+
+interface ButtonProps extends React.ComponentProps<typeof ShadcnButton> {}
+
+const ShadcnButtonWrapper: React.FC<ButtonProps> = (props) => {
+  return <ShadcnButton {...props} />;
+};
+
+export default ShadcnButtonWrapper;

frontend/tailwind.config.js

@@ -72,6 +72,8 @@ module.exports = {
   plugins: [
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),
+    require('@shadcn/ui'),
+
     plugin(function ({ matchUtilities, theme }) {
       matchUtilities(
         {