Vue login blocks.

The 100 login blocks are sign-in and sign-up screens: email and password, social and SSO providers, passwordless, two-factor, passkeys, recovery and device checks. They are UI and state only: nothing is signed in and no session is kept, and each result says so.

They are grouped into 16 kinds: Centered form, Split with a panel, Social proof, Step by step, SSO and providers, Passwordless, and more. The later groups cover security steps such as risk checks, sessions and devices, network rules and workspace choice.

Centered Sign In Login is the classic form with Google and GitHub rows. Social Buttons Login leads with providers and a Last used badge. Magic Link Login and Passkey Login drop the password. Two-Factor Authenticator Login and OTP Verification Login handle codes. Enterprise SSO Login and SAML Redirect Login are for company sign-in. Forgot Password Login is the recovery page.

A comment describes the page, then typed constants hold the product name, providers and copy, a small function checks the fields, and the component renders them with the shared Field, Input and Button. The provider logos are lettermark placeholders.

The submit handler checks the fields, then waits a moment. A comment in it says to send the email and password to your auth endpoint there. Call your auth library's sign-in function (Auth.js, Better Auth, Clerk, Supabase or your own API), and turn its error into the form's error state or the signed-in result.

A provider row sets a state that says where a real one would go. A comment there says a real row redirects to the provider (OAuth or OpenID Connect) and back, so call your library's social sign-in with the provider id. Replace the lettermark tile with the provider's official logo, under its brand terms.

Each field is checked by a function that returns a message per field, such as Enter your email address. Messages show under the field, focus goes to the first problem, and the demo's result is announced. Add rules to that function, or replace it with a schema, and keep the focus move.

Passkey Login shows a chooser and says no WebAuthn call is made. Where its comment says so, call navigator.credentials.get() to sign in, and navigator.credentials.create() on your registration page, with the challenge from your server.

Two-Factor Authenticator Login and OTP Verification Login check a typed demo code (OTP Verification Login counts tries and locks after the third). A comment marks where to send the code to your auth endpoint. Verify it there, set the wrong, locked or signed-in state from the response, and never keep the correct code in the client.

This page lists 100 of the category's 100 login blocks for Vue. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Vue login blocks are the React ones ported to Vue, on Ark UI's Vue primitives. They keep the layout, the copy and the theme tokens, and install with shadcn-vue (/r/vue/login-account-locked.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Vue needs vue @ark-ui/vue lucide-vue-next installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn-vue@latest add` with the block's registry URL, such as /r/vue/login-account-locked.json for Account Locked Login. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 16 kinds of login block, led by sso and providers (10), centered form (9), split with a panel (9) and codes and approvals (8), and sort by popular or name. A good first look: Account Locked Login, Alert Banner Login and App Download Login. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a login block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the layouts, sign-in methods and security kinds.

Open its page and use the full-screen viewer (/view/login/vue/account-locked) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each login block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the login blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 login blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a login block, read it with get_block and install it on your Vue stack.

Pass `category: "login"` to search_blocks to search only the 100 login blocks, or to list_blocks for the 16 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "login", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.