Account blocks for every framework.

100 sections for the account area inside a signed-in app: sign-in methods, sessions and devices, profile, connected apps, API keys, notifications, privacy, data export and deletion. The gallery sorts them into 14 groups: Sign-in methods, Sessions and devices, Profile, Verification, Connected apps, Shared access, Organizations, Keys and tokens, Preferences, Notifications, Billing, Standing and rewards, Privacy and consent, Your data.

For two-factor use Two-Factor Methods Account and Backup Codes Account. For signed-in sessions use Devices Account and Activity Log Account. For keys use API Keys Account, for a password Change Password Account, and for the way out Data Export Requests Account and Danger Zone Account.

No. They are the interface only: each block keeps its state in the page, and its status line says that nothing was registered, saved or sent in this demo. Your auth backend does the real work, and the places to call it are the handlers behind the buttons.

They ask before they act and offer a way back. Devices Account asks in an alert dialog that says how many sessions end, Connected Accounts Account blocks unlinking your only way in, and both end on a line with Undo. Keep that pattern when you call your server: confirm first, then offer to reverse it while you can.

API Keys Account makes its example key in the browser with crypto.getRandomValues, which is only for the demo. Create the key on your server when the Roll key button is pressed, store only a hash, return the secret once, and show it in the same read-only field. The grace period choices (not at all, 1 hour, 24 hours, 7 days) are for you to enforce.

Two-Factor Methods Account draws a QR code from an otpauth URI (SETUP_URI) with a made-up secret, and its Test step accepts a fixed demo code. Generate a secret per user on your server, build the URI from it, and verify the typed code there before marking the method as set up.

Change Password Account checks the three fields in the page and accepts any current password of 8 or more characters. Replace that check with a call to your server in its submit handler, and send the three boxes that say what the change ends (other sessions, an app password, trusted devices) along with the new password.

Danger Zone Account unlocks Delete only when the account email is typed in, then schedules the erasure GRACE_DAYS (30) days out with an Undo. Keep the typed-email gate, replace the EMAIL constant with the signed-in user's, and have your server record the date and cancel it if the user presses Undo.

Avatar Upload Account checks that the file is a PNG, JPEG or WebP under 2 MB, then shows it from an object URL in the tab and releases the URL when the page closes. Send the File to your storage after that check, and store the returned address on the user.

This page lists 100 of the category's 100 account blocks for React on Base UI. 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 account blocks here are written on Base UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/account-2fa.json). The other bases are one picker away from /account-block.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Base UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/account-2fa.json for Two-Factor Methods Account. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Two-Factor Methods Account brings Alert Dialog, Badge, Button, Copy Button, Field, Guides, Input, Input Group, Input OTP, QR Code and Shine Button, installed before it. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of account block, led by sessions and devices (12), sign-in methods (10), privacy and consent (9) and keys and tokens (8), and sort by popular or name. A good first look: Two-Factor Methods Account, Access Tokens Account and Assistive Sign-in Profiles Account. 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 account 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 security, identity and access kinds.

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

Each account block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Base 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 account 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 account 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 account block, read it with get_block and install it on your React on Base UI stack.

Pass `category: "account"` to search_blocks to search only the 100 account blocks, or to list_blocks for the 14 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", "account", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.