1"use strict";(self.webpackChunkdocumentation=self.webpackChunkdocumentation||[]).push([[2946],{58860:(e,n,t)=>{t.d(n,{xA:()=>p,yg:()=>g});var r=t(37953);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function a(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?o(Object(t),!0).forEach((function(n){i(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):o(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function s(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var c=r.createContext({}),l=function(e){var n=r.useContext(c),t=n;return e&&(t="function"==typeof e?e(n):a(a({},n),e)),t},p=function(e){var n=l(e.components);return r.createElement(c.Provider,{value:n},e.children)},u="mdxType",d={inlineCode:"code",wrapper:function(e){var n=e.children;return r.createElement(r.Fragment,{},n)}},m=r.forwardRef((function(e,n){var t=e.components,i=e.mdxType,o=e.originalType,c=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=l(t),m=i,g=u["".concat(c,".").concat(m)]||u[m]||d[m]||o;return t?r.createElement(g,a(a({ref:n},p),{},{components:t})):r.createElement(g,a({ref:n},p))}));function g(e,n){var t=arguments,i=n&&n.mdxType;if("string"==typeof e||i){var o=t.length,a=new Array(o);a[0]=m;var s={};for(var c in n)hasOwnProperty.call(n,c)&&(s[c]=n[c]);s.originalType=e,s[u]="string"==typeof e?e:i,a[1]=s;for(var l=2;l<o;l++)a[l]=t[l];return r.createElement.apply(null,a)}return r.createElement.apply(null,t)}m.displayName="MDXCreateElement"},79633:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>p,contentTitle:()=>c,default:()=>y,frontMatter:()=>s,metadata:()=>l,toc:()=>u});t(37953);var r=t(58860);function i(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function o(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))})),e}function a(e,n){if(null==e)return{};var t,r,i=function(e,n){if(null==e)return{};var t,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||(i[t]=e[t]);return i}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)t=o[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}const s={title:"shadcn/ui Sign In Form Component | UI Component in Refine v5",display_title:"<SignInForm />",sidebar_label:"<SignInForm />",description:"Implement Sign In Form in Refine v5. Learn the key steps. Learn integrate Radix UI, Tailwind CSS for polished admin UIs. Hands-on examples included.",source:"https://github.com/refinedev/refine/tree/main/packages/refine-ui/registry/new-york/refine-ui/form/sign-in-form.tsx"},c=void 0,l={unversionedId:"ui-integrations/shadcn/components/sign-in-form/index",id:"ui-integrations/shadcn/components/sign-in-form/index",title:"shadcn/ui Sign In Form Component | UI Component in Refine v5",description:"Implement Sign In Form in Refine v5. Learn the key steps. Learn integrate Radix UI, Tailwind CSS for polished admin UIs. Hands-on examples included.",source:"@site/docs/ui-integrations/shadcn/components/sign-in-form/index.md",sourceDirName:"ui-integrations/shadcn/components/sign-in-form",slug:"/ui-integrations/shadcn/components/sign-in-form/",permalink:"/core/docs/ui-integrations/shadcn/components/sign-in-form/",draft:!1,editUrl:"https://github.com/refinedev/refine/tree/main/documentation/docs/ui-integrations/shadcn/components/sign-in-form/index.md",tags:[],version:"current",lastUpdatedBy:"Alican Erdurmaz",lastUpdatedAt:1768983368,formattedLastUpdatedAt:"Jan 21, 2026",frontMatter:{title:"shadcn/ui Sign In Form Component | UI Component in Refine v5",display_title:"<SignInForm />",sidebar_label:"<SignInForm />",description:"Implement Sign In Form in Refine v5. Learn the key steps. Learn integrate Radix UI, Tailwind CSS for polished admin UIs. Hands-on examples included.",source:"https://github.com/refinedev/refine/tree/main/packages/refine-ui/registry/new-yor
1k/refine-ui/form/sign-in-form.tsx"},sidebar:"mainSidebar",previous:{title:"Auth Forms",permalink:"/core/docs/ui-integrations/shadcn/components/auth-forms"},next:{title:"<SignUpForm />",permalink:"/core/docs/ui-integrations/shadcn/components/sign-up-form/"}},p={},u=[{value:"Installation",id:"installation",level:2},{value:"Usage",id:"usage",level:2},{value:"Requirements",id:"requirements",level:2}],d=(m="DocThumbsUpDownFeedbackWidget",function(e){return console.warn("Component "+m+" was not imported, exported, or provided by MDXProvider as global scope"),(0,r.yg)("div",e)});var m;const g={toc:u},f="wrapper";function y(e){var{components:n}=e,t=a(e,["components"]);return(0,r.yg)(f,o(function(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{},r=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),r.forEach((function(n){i(e,n,t[n])}))}return e}({},g,t),{components:n,mdxType:"MDXLayout"}),(0,r.yg)("p",null,"The ",(0,r.yg)("inlineCode",{parentName:"p"},"SignInForm")," component provides a ready-to-use sign-in interface for Refine applications. It handles user authentication through email/password and can be extended for social logins."),(0,r.yg)("h2",{id:"installation"},"Installation"),(0,r.yg)(d,{id:"installation",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"Add the sign-in form to your project:"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-bash"},"npx shadcn@latest add https://ui.refine.dev/r/sign-in-form.json\n")),(0,r.yg)("p",null,"This installs the complete sign-in form with email and password input components.")),(0,r.yg)("h2",{id:"usage"},"Usage"),(0,r.yg)(d,{id:"usage",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"The ",(0,r.yg)("inlineCode",{parentName:"p"},"SignInForm")," is typically used on a dedicated login page. It relies on Refine's ",(0,r.yg)("inlineCode",{parentName:"p"},"useLogin")," hook and ",(0,r.yg)("inlineCode",{parentName:"p"},"authProvider")," for its functionality."),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'import { SignInForm } from "@/components/refine-ui/form/sign-in-form";\nimport { cn } from "@/lib/utils";\n\nexport default function LoginPage() {\n return (\n <div\n className={cn(\n "flex",\n "items-center",\n "justify-center",\n "h-screen",\n "w-screen",\n )}\n >\n <SignInForm />\n </div>\n );\n}\n')),(0,r.yg)("p",null,"The form automatically handles user authentication through your ",(0,r.yg)("inlineCode",{parentName:"p"},"authProvider"),". It includes email and password fields, along with client-side validation.")),(0,r.yg)("h2",{id:"requirements"},"Requirements"),(0,r.yg)(d,{id:"requirements",mdxType:"DocThumbsUpDownFeedbackWidget"},(0,r.yg)("p",null,"To use the sign-in form, you need to configure an ",(0,r.yg)("inlineCode",{parentName:"p"},"authProvider")," with a ",(0,r.yg)("inlineCode",{parentName:"p"},"login")," method:"),(0,r.yg)("pre",null,(0,r.yg)("code",{parentName:"pre",className:"language-tsx"},'import { AuthProvider } from "@refinedev/core";\nconst authProvider: AuthProvider = {\n login: async ({ email, password }) => {\n // Your authentication logic here\n const response = await fetch("/api/login", {\n method: "POST",\n headers: { "Content-Type": "application/json" },\n body: JSON.stringify({ email, password }),\n });\n\n if (response.ok) {\n return { success: true };\n }\n\n return { success: false, error: new Error("Invalid credentials") };\n },\n // Other authProvider methods...\n};\n'))))}y.isMDXComponent=!0}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.