[email protected]

Shadcn UI Dark Mode Auth Form - Horizon AI Boilerplate

By vldmihalache

Free Shadcn UI Auth Form with @shadcn/ui button and inputs from Horizon AI Boilerplate (for dark mode)

Share

/r/n <div class=\"flex w-fit items-center lg:pl-0 lg:pt-0 xl:pt-0\">\r\n <svg\r\n stroke=\"currentColor\"\r\n fill=\"currentColor\"\r\n stroke-width=\"0\"\r\n viewBox=\"0 0 320 512\"\r\n class=\"mr-3 h-[13px] w-[8px] text-white\"\r\n height=\"1em\"\r\n width=\"1em\"\r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n >\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-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 >\r\n <p class=\"text-[32px] font-bold text-white\">Sign In<\/p>\r\n <p class=\"mb-2.5 mt-2.5 font-normal text-zinc-400\">\r\n Enter your email and password to sign in!\r\n <\/p>\r\n <div class=\"mt-8\">\r\n <form class=\"pb-2\">\r\n <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-zinc-800 bg-none hover:bg-accent hover:text-accent-foreground h-10 px-4 w-full text-white py-6\"\r\n type=\"submit\"\r\n >\r\n <span class=\"mr-2\"\r\n ><svg\r\n stroke=\"currentColor\"\r\n fill=\"currentColor\"\r\n stroke-width=\"0\"\r\n version=\"1.1\"\r\n x=\"0px\"\r\n y=\"0px\"\r\n viewBox=\"0 0 48 48\"\r\n enable-background=\"new 0 0 48 48\"\r\n class=\"h-5 w-5\"\r\n height=\"1em\"\r\n width=\"1em\"\r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n >\r\n <path\r\n fill=\"#FFC107\"\r\n 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\"\r\n ><\/path>\r\n <path\r\n fill=\"#FF3D00\"\r\n 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\"\r\n ><\/path>\r\n <path\r\n fill=\"#4CAF50\"\r\n 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\"\r\n ><\/path>\r\n <path\r\n fill=\"#1976D2\"\r\n 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><\/svg><\/span\r\n ><span>Google<\/span>\r\n <\/button>\r\n <\/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-800\"><\/div>\r\n <div class=\"grow border-t border-zinc-800\"><\/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\">\r\n <label class=\"text-white\" for=\"email\">Email<\/label\r\n ><input\r\n class=\"mr-2.5 mb-2 h-full min-h-[44px] w-full rounded-lg border bg-zinc-950 text-white border-zinc-800 px-4 py-3 text-sm font-medium 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\"\r\n placeholder=\"name@example.com\"\r\n type=\"email\"\r\n autocapitalize=\"none\"\r\n autocomplete=\"email\"\r\n autocorrect=\"off\"\r\n name=\"email\"\r\n \/><label\r\n class=\"text-zinc-950 mt-2 dark:text-white\"\r\n for=\"password\"\r\n >Password<\/label\r\n ><input\r\n id=\"password\"\r\n placeholder=\"Password\"\r\n 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 bg-zinc-950 text-white border-zinc-800 px-4 py-3 text-sm font-medium 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\"\r\n \/>\r\n <\/div>\r\n <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-white text-zinc-950 hover:bg-white\/90 active:bg-white\/80 flex w-full max-w-full mt-6 items-center justify-center rounded-lg px-4 py-4 text-base font-medium\"\r\n type=\"submit\"\r\n >\r\n Sign in\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <p>\r\n <a\r\n href=https://www.creative-tim.com/"//dashboard//signin//forgot_password/"/r/n class=\"font-medium text-white text-sm\"\r\n >Forgot your password?<\/a\r\n >\r\n <\/p>\r\n <p>\r\n <a\r\n href=https://www.creative-tim.com/"//dashboard//signin//email_signin/"/r/n class=\"font-medium text-white text-sm\"\r\n >Sign in via magic link<\/a\r\n >\r\n <\/p>\r\n <p>\r\n <a\r\n href=https://www.creative-tim.com/"//dashboard//signin//signup/"/r/n class=\"font-medium text-white text-sm\"\r\n >Don't have an account? Sign up<\/a\r\n >\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"font-normal text-white mt-20 mx-auto w-max\">\r\n Auth component for dark mode from\r\n <a\r\n href=https://www.creative-tim.com/"https:////horizon-ui.com//shadcn-ui?ref=twcomponents\%22\r\n target=\"_blank\"\r\n class=\"text-brand-500 font-bold\"\r\n >Horizon AI Boilerplate<\/a\r\n >\r\n <\/p>\r\n <\/div>\r\n <\/body>\r\n<\/html>","author_type":"App\\User","author_id":11240,"collection_id":4,"fork_id":null,"votes":1,"score":"5.0","visits":2574,"popularity":234,"slug":"shadcn-ui-dark-mode-auth-form-horizon-ai-boilerplate","approved":1,"created_at":"2024-09-18T00:00:00.000000Z","updated_at":"2025-06-18T13:00:10.000000Z","downloads":73,"code_views":926,"center":false,"notified":0,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":12668,"model_type":"App\\Component","model_id":7172,"collection_name":"preview","name":"temp14496","file_name":"temp14496.png","mime_type":"image\/png","disk":"public","size":33348,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp14496___media_library_original_1280_957.png","temp14496___media_library_original_1070_800.png","temp14496___media_library_original_895_669.png","temp14496___media_library_original_749_560.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvTUtyQWxXUHpJeWM4anRRQkFRUjFvQWRRQVVBZEQ0ZDhJYWw0aGpack9CcFFQU2dDUHhCNFExTHcrQTE1QVl3ZldnU01LZ1lVQWRMNFo4ZmFsNFZpWkxOOW9hZ0NMeEY0MzFMeE9BTHlYZUIwcEFjL1RBLy85az0iPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":1,"created_at":"2024-09-18T12:28:16.000000Z","updated_at":"2024-09-18T12:28:17.000000Z","conversions_disk":"public","uuid":"7cad4618-0c87-4dc9-b6cd-466fe09520da","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/12668\/temp14496.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":7172,"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":7172,"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":7172,"user_id":11240}}]}" :edit="false"> Full screen Preview

vldmihalache

42 components Profile On

Shadcn UI Dark Mode Auth Form - Horizon AI Boilerplate

Community Rate

Related components