Shadcn UI Auth Form - Horizon AI Boilerplate

Free Shadcn UI Authentication Form from Horizon AI Boilerplate

Share

/r/n <div class=\"flex w-fit items-center lg:pl-0 lg:pt-0 xl:pt-0\"><svg stroke=\"currentColor\"\r\n fill=\"currentColor\" stroke-width=\"0\" viewBox=\"0 0 320 512\"\r\n class=\"mr-3 h-[13px] w-[8px] text-zinc-950 dark:text-white\" height=\"1em\" width=\"1em\"\r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path\r\n d=\"M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z\">\r\n <\/path>\r\n <\/svg>\r\n <p class=\"ml-0 text-sm text-zinc-950 dark:text-white\">Back to the website<\/p>\r\n <\/div>\r\n <\/a> \r\n <div\r\n class=\"my-auto mb-auto mt-8 flex flex-col md:mt-[70px] w-[350px] max-w-[450px] mx-auto md:max-w-[450px] lg:mt-[130px] lg:max-w-[450px]\">\r\n <p class=\"text-[32px] font-bold text-zinc-950 dark:text-white\">Sign In<\/p>\r\n <p class=\"mb-2.5 mt-2.5 font-normal text-zinc-950 dark:text-zinc-400\">Enter your email and password\r\n to sign\r\n in!<\/p>\r\n <div class=\"mt-8\">\r\n <form class=\"pb-2\"><input type=\"hidden\" name=\"provider\" value=\"google\"><button\r\n class=\"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 w-full text-zinc-950 py-6 dark:text-white\"\r\n type=\"submit\"><span class=\"mr-2\"><svg stroke=\"currentColor\" fill=\"currentColor\"\r\n stroke-width=\"0\" version=\"1.1\" x=\"0px\" y=\"0px\" viewBox=\"0 0 48 48\"\r\n enable-background=\"new 0 0 48 48\" class=\"h-5 w-5\" height=\"1em\" width=\"1em\"\r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path fill=\"#FFC107\" d=\"M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12\r\nc0-6.627,5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24\r\nc0,11.045,8.955,20,20,20c11.045,0,20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z\"><\/path>\r\n <path fill=\"#FF3D00\" d=\"M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657\r\nC34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z\"><\/path>\r\n <path fill=\"#4CAF50\" d=\"M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36\r\nc-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z\"><\/path>\r\n <path fill=\"#1976D2\" d=\"M43.611,20.083H42V20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571\r\nc0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z\">\r\n <\/path>\r\n <\/svg><\/span><span>Google<\/span><\/button><\/form>\r\n <\/div>\r\n <div class=\"relative my-4\">\r\n <div class=\"relative flex items-center py-1\">\r\n <div class=\"grow border-t border-zinc-200 dark:border-zinc-700\"><\/div>\r\n <div class=\"grow border-t border-zinc-200 dark:border-zinc-700\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <form novalidate=\"\" class=\"mb-4\">\r\n <div class=\"grid gap-2\">\r\n <div class=\"grid gap-1\"><label class=\"text-zinc-950 dark:text-white\"\r\n for=\"email\">Email<\/label><input\r\n class=\"mr-2.5 mb-2 h-full min-h-[44px] w-full rounded-lg border border-zinc-200 bg-white px-4 py-3 text-sm font-medium text-zinc-950 placeholder:text-zinc-400 focus:outline-0 dark:border-zinc-800 dark:bg-transparent dark:text-white dark:placeholder:text-zinc-400\"\r\n id=\"email\" placeholder=\"name@example.com\" type=\"email\" autocapitalize=\"none\"\r\n autocomplete=\"email\" autocorrect=\"off\" name=\"email\"><label\r\n class=\"text-zinc-950 mt-2 dark:text-white\" for=\"password\">Password<\/label><input\r\n id=\"password\" placeholder=\"Password\" type=\"password\"\r\n autocomplete=\"current-password\"\r\n class=\"mr-2.5 mb-2 h-full min-h-[44px] w-full rounded-lg border border-zinc-200 bg-white px-4 py-3 text-sm font-medium text-zinc-950 placeholder:text-zinc-400 focus:outline-0 dark:border-zinc-800 dark:bg-transparent dark:text-white dark:placeholder:text-zinc-400\"\r\n name=\"password\"><\/div><button\r\n class=\"whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary\/90 mt-2 flex h-[unset] w-full items-center justify-center rounded-lg px-4 py-4 text-sm font-medium\"\r\n type=\"submit\">Sign in<\/button>\r\n <\/div>\r\n <\/form>\r\n <p><a href=https://www.creative-tim.com/"//dashboard//signin//forgot_password/"/r/n class=\"font-medium text-zinc-950 dark:text-white text-sm\">Forgot your password?<\/a><\/p>\r\n <p><a href=https://www.creative-tim.com/"//dashboard//signin//email_signin/"/r/n class=\"font-medium text-zinc-950 dark:text-white text-sm\">Sign in via magic link<\/a><\/p>\r\n <p><a href=https://www.creative-tim.com/"//dashboard//signin//signup/"/r/n class=\"font-medium text-zinc-950 dark:text-white text-sm\">Don't\r\n have an account? Sign up<\/a><\/p>\r\n <\/div>\r\n <\/div> \r\n <\/div>\r\n\r\n <p class=\"font-normal text-zinc-950 mt-20 mx-auto w-max\">Auth Form from <a\r\n href=https://www.creative-tim.com/"https:////horizon-ui.com//shadcn-ui?ref=twcomponents\%22 target=\"_blank\"\r\n class=\"text-brand-500 font-bold\">Horizon AI Boilerplate<\/a>\r\n <\/p>\r\n <\/div>\r\n<\/body>\r\n\r\n<\/html>","author_type":"App\\User","author_id":11240,"collection_id":4,"fork_id":null,"votes":1,"score":"5.0","visits":133,"popularity":350,"slug":"shadcn-ui-auth-form-horizon-ai-boilerplate","approved":1,"created_at":"2024-09-10T00:00:00.000000Z","updated_at":"2024-09-19T05:13:35.000000Z","downloads":2,"code_views":52,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":12629,"model_type":"App\\Component","model_id":7152,"collection_name":"preview","name":"temp54337","file_name":"temp54337.png","mime_type":"image\/png","disk":"public","size":33904,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp54337___media_library_original_1280_957.png","temp54337___media_library_original_1070_800.png","temp54337___media_library_original_895_669.png","temp54337___media_library_original_749_560.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvVkZ4bWdEUHVKSklwUnRHVm9Bc3d5bHdPS0FMQTZVQUI2VUFjRDQzK0lDZUZMbEVlM2ViUDkwWm9BbjhHZVBWOFV1Vlcya2h4M1lZb0E3Y2RLQUE5S0FNMiswRzAxSncxeENzaEhxS0FKYlBTTGF4L3dCVENzZis2TVVBWFJ3S0FQL1oiPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":4,"created_at":"2024-09-10T18:01:17.000000Z","updated_at":"2024-09-10T18:01:18.000000Z","conversions_disk":"public","uuid":"1beab7f9-3fcb-4cbe-a336-59fa97206f61","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/12629\/temp54337.png","preview_url":""}],"author":{"id":11240,"name":"vldmihalache","slug":"vldmihalache","bio":"Co-founder and CTO of Horizon UI.\r\nhttps:\/\/horizon-ui.com","avatar":"\/storage\/avatars\/6GqYXtE71l3147PGI8ZciCj48iGIsrjaOWkPJKWq.jpg","header":null,"created_at":"2023-03-01T10:21:52.000000Z","updated_at":"2023-03-01T12:58:58.000000Z"},"tags":[{"id":2,"name":{"en":"Forms"},"description":"Get started with our 100+ forms examples that are ready to be used in your Tailwind project. From Sign up, Sign in, to subscribe forms we got anything you need.","meta_description":"Get started with our 100+ forms examples that are ready to be used in your Tailwind project. From Sign up, Sign in, to subscribe forms we got anything you need.","slug":{"en":"forms"},"type":null,"order_column":5,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:08:37.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":7152,"tag_id":2}},{"id":9,"name":{"en":"Logins"},"description":"Improve your authentication process with these examples of Login components and pages. They are ready-to-use directly in your Tailwind CSS project.","meta_description":"Improve your authentication process with these examples of Login components and pages. They are ready-to-use directly in your Tailwind CSS project.","slug":{"en":"logins"},"type":null,"order_column":7,"created_at":"2020-09-29T11:19:46.000000Z","updated_at":"2022-08-01T16:22:17.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":7152,"tag_id":9}}],"fork":null,"favorites":[{"id":11240,"name":"vldmihalache","slug":"vldmihalache","bio":"Co-founder and CTO of Horizon UI.\r\nhttps:\/\/horizon-ui.com","avatar":"\/storage\/avatars\/6GqYXtE71l3147PGI8ZciCj48iGIsrjaOWkPJKWq.jpg","header":null,"created_at":"2023-03-01T10:21:52.000000Z","updated_at":"2023-03-01T12:58:58.000000Z","pivot":{"component_id":7152,"user_id":11240}},{"id":11242,"name":"fredycraciun","slug":"fredycraciun","bio":"Co-founder and Creator of Horizon UI.\r\nWeb designer & developer.\r\nhttps:\/\/horizon-ui.com","avatar":"https:\/\/pbs.twimg.com\/profile_images\/1611026227258691588\/NvSKzaF1_normal.jpg","header":null,"created_at":"2023-03-01T12:25:14.000000Z","updated_at":"2023-03-01T12:55:22.000000Z","pivot":{"component_id":7152,"user_id":11242}}]}" :edit="false"> Full screen Preview

vldmihalache

30 components Profile On

Shadcn UI Auth Form - Horizon AI Boilerplate

Community Rate

Related components