hanko.io

An open-source UI element library is a collection of individual, ready-made interface pieces—buttons, cards, inputs, toggles, loaders—that you copy into your own project and adapt. A UI framework, by contrast, is a structured system of components, conventions, and often a theming layer that governs how your whole interface is built. The practical difference: an element library gives you a snippet; a framework gives you a way of working. If you need a polished button in ten minutes, reach for the element library. If you're building a 40-screen product with a team, you probably want the framework.

What "open-source UI element library" actually means

The term gets used loosely, so it helps to separate the parts:

• Open-source: the code is publicly available, and the license tells you what you may do with it—copy, modify, redistribute, or use commercially.
• UI element: a single, self-contained piece of interface, usually small enough to read in one sitting. A button with hover states, a pricing card, a search field.
• Library: a browsable, searchable collection of those elements, typically contributed by many different people.

On a site like Uiverse, elements are shared by a community and written in plain CSS or Tailwind. You find one you like, copy the markup and styles, paste them into your project, and adjust colors, spacing, and text to fit. There's no package to install and no build step required—which is exactly the appeal, and also the source of most of the confusion.

Element library vs. UI framework: the core differences

The table isn't a verdict. It's a map of trade-offs. Element libraries win on speed and freedom; frameworks win on consistency and maintenance.

Licensing and attribution: what to check before you paste

This is where people get into trouble, and it's worth slowing down for.

1. Find the license. Every element or collection should state one. Common open-source licenses include MIT, Apache-2.0, and BSD. Some projects use copyleft licenses like GPL, which can impose obligations if you redistribute your code.
2. Understand what the license permits. MIT and Apache-2.0 are permissive: you can typically use the code in commercial and closed-source projects. Copyleft licenses may require you to release derivative source under the same terms.
3. Check attribution requirements. Permissive licenses usually require you to keep the copyright notice and license text somewhere in your project. That's a real obligation, not a formality.
4. Look for per-element terms. On community sites, the site's overall terms and the individual contributor's stated wishes may differ. If a contributor asks for credit, honor it.
5. When in doubt, ask or avoid. If a snippet has no license at all, you don't have clear permission to reuse it. Treat "no license" as "not open source," even if the code is publicly visible.

This article is general information, not legal advice. For commercial products with real exposure, have someone qualified review the licenses you're relying on.

How to use a community element in your project: a practical workflow

Here's a repeatable process that avoids most of the usual mess.

1. Start from a real need, not a browsing session

Decide what you need first—"a compact primary button with a loading state"—then search. Browsing aimlessly produces a pile of pretty snippets that don't fit together.

2. Copy the smallest version that works

Take the markup and the styles. Strip anything you don't need: demo wrappers, extra animations, decorative layers. Less code means fewer surprises.

3. Convert it to your conventions

If your project uses design tokens or CSS variables, replace hard-coded values:

/* Before: hard-coded */
.button { background: #4f46e5; border-radius: 8px; }

/* After: token-based */
.button { background: var(--color-primary); border-radius: var(--radius-md); }

This one step is what keeps a copied element from looking like a foreign object in your UI.

4. Check accessibility before you ship

Community elements vary widely here. Verify at minimum:

• Keyboard focus is visible and the element is reachable by Tab.
• Color contrast meets WCAG AA (4.5:1 for normal text).
• Interactive elements use semantic HTML (<button>, not a clickable <div>).
• Form inputs have associated labels.
• Motion respects prefers-reduced-motion.

5. Test in context

Paste it into a real page with real content. Long labels, small screens, and dark mode break more copied elements than anything else.

6. Note where it came from

Keep a short comment or an internal credits file: source, license, date. Future you—and your legal reviewer—will be grateful.

Where element libraries genuinely shine

• Prototypes and demos: you need something clickable today, not a design system.
• Landing pages and marketing sites: a handful of distinctive elements, each custom.
• Filling gaps: your framework lacks one specific component, and you don't want to build it from scratch.
• Learning: reading well-made CSS is one of the fastest ways to improve.
• Small projects: a personal site doesn't need a theming architecture.

Where they fall short

• Consistency at scale: ten elements from ten contributors rarely look like one product.
• Maintenance: you own every copy. When your design changes, you edit each one.
• Accessibility debt: you inherit whatever the contributor did or didn't do.
• No upstream fixes: a bug fixed in the original won't reach your copy.
• Integration friction: different naming conventions, different units, different assumptions about resets.

When to choose which

Choose an element library when the scope is small, the timeline is short, or you need a few distinctive pieces rather than a whole system.

Choose a framework or design system when multiple people build multiple screens over months, when consistency is a product requirement, or when accessibility and theming need to be guaranteed rather than checked.

A hybrid works well for many teams: adopt a framework for the structural components—forms, navigation, layout—and borrow individual elements for the places where you want personality. Just route every borrowed element through the same token and accessibility checks, so it lands as part of your system rather than beside it.

The short version: open-source UI element libraries are a fast, flexible way to get good-looking interface pieces into a project. They are not a substitute for a design system, and the license and accessibility details are the part worth reading carefully.

Hanko positions itself as an open-source, privacy-first authentication and user management platform for modern apps, and explicitly markets itself as a developer-friendly alternative to Auth0, Clerk, Firebase Auth, AWS Cognito, and Keycloak. The practical difference it emphasizes is control: you can move between self-hosted and Hanko Cloud at any time, with no vendor lock-in, and you keep full control over your data. If your selection criteria are "open source, data ownership, and the ability to leave without a rewrite," Hanko is built around exactly those. If you need a mature managed ecosystem with the broadest integration catalog, the incumbents still have more surface area to check.

The comparison at a glance

The table reflects how Hanko describes itself. Treat the incumbent column as directional rather than a feature-by-feature audit — verify each capability against the specific vendor's current docs before deciding.

Where Hanko's differences actually matter

Open source and data ownership

Hanko's core claim is that it is open source and privacy-first, with full control over your data. For teams in regulated industries, or teams whose customers ask where identity data lives, that is a structural difference rather than a feature checkbox. With most managed identity providers, your user records live in the vendor's cloud; with Hanko, self-hosting puts them in your infrastructure.

No lock-in, and switching between self-hosted and cloud

The stated ability to "move between self-hosted and Hanko Cloud anytime" is the most concrete anti-lock-in argument. It means the deployment decision is not permanent: you can start on Hanko Cloud and migrate to self-hosted (or the reverse) without changing your auth model. Compare that to a managed-only provider, where leaving means exporting users and re-integrating a different SDK.

Modern authentication methods

Hanko supports passkeys, 2FA, and SSO. The product surface shown in its own UI flows includes:

• Passcode login — enter a code sent to your email address, with a resend option.
• Login method selection — password, passcode, or passkey.
• MFA setup — security keys or an authenticator app, with a skip option.
• Account creation — email, or continue with Google.
• Sign in — the standard entry point.

These are the flows your users actually see, which makes them a fair proxy for what "supported" means in practice.

How to choose

Use the following conditions rather than a single winner:

• Choose Hanko if open source, data control, and avoiding lock-in are your top criteria, and you want the option to self-host or use the cloud without committing permanently.
• Choose a managed incumbent if you want the largest integration ecosystem and are comfortable with identity data living in a vendor cloud.
• Choose Keycloak if you specifically want an open-source, self-hosted option and are prepared to operate it yourself — it is the closest philosophical match to Hanko in this list, but Hanko's differentiator is the cloud/self-hosted portability and its modern passkey-first flows.

What to verify before committing

Hanko's own page states "Try Hanko for free" with "No credit card required," and links to a pricing page. Pricing tiers, limits, and any paid-plan terms are not specified in the material available here, so check the pricing page directly for current numbers.

Before deciding, confirm:

1. Which auth methods you need (passkeys, 2FA, SSO) and whether Hanko's flows cover your exact requirements.
2. Your deployment target — self-hosted, Hanko Cloud, or both over time.
3. Migration path: how you would export users and move off, and how you would move between self-hosted and cloud.
4. Current pricing and any usage limits on the pricing page.

The honest summary: Hanko competes on openness, data control, and portability rather than on having the largest ecosystem. If those three things are your selection criteria, it is a direct fit; if ecosystem breadth is, compare carefully against the specific incumbent you are considering.

Hanko supports password, one-time passcode, and passkey login, plus multi-factor authentication (MFA) with security keys or an authenticator app. Account creation accepts email or Google sign-in. These methods are delivered as embeddable UI components driven by flow-state actions, so you can pick the combination that matches your app's login requirements.

Login methods

The sign-in flow presents a method selection screen ("Select login method") with three options:

The passcode screen shows the expected interaction directly: a passcode input, a continue action, and a "Send new code" fallback. The passkey path is triggered by a WebAuthn request-options action, which is what initiates the device's native passkey ceremony.

Multi-factor authentication

MFA is offered as an additional step after the primary login. The setup screen explains the purpose plainly: it adds a step so that even if a password or email account is compromised, the account stays protected. Two second factors are available:

• Security keys — hardware-backed WebAuthn credentials
• Authenticator app — an OTP secret enrolled into a TOTP app

The MFA screen also includes a Skip option, so MFA enrollment is not forced at that point in the flow.

Registration and account creation

The create-account screen asks for an email address and offers a Continue with Google alternative. Existing users are routed to login from the same screen. This means a new user can start with either an email-based flow or a Google account, and the email path then connects to whichever login method they choose.

How these methods are wired into your app

Hanko exposes these flows as components with named actions rather than fixed pages. The evidence shows the pattern:

• A passcode verification action runs with the entered code: flowstate.actions.verify_passcode.run({ code: passcode })
• Method selection dispatches to distinct actions, e.g. continue_to_password_login, continue_to_passcode_confirmation, and webauthn_generate_request_options
• MFA setup dispatches to continue_to_security_key_creation or continue_to_otp_secret_creation, with skip as the opt-out

Because each step is an action, you can present the methods you want and omit the rest, rather than being locked into one login screen.

What this means for your decision

If your requirement is a modern, phishing-resistant login, the passkey and security-key paths cover it. If you need a low-friction option for users without passkeys, passcode and password are available. If you need a second factor for sensitive accounts, MFA with authenticator apps or security keys is supported, and you can leave it optional.

One caveat: the page evidence describes the available methods and their flow actions, but it does not state default policies such as whether MFA can be enforced for all users or how method availability is configured per project. Confirm those specifics against Hanko's documentation before committing to a rollout plan.

Yes. Hanko is described as an open-source, privacy-first authentication and user management platform, and its own materials state that you can "move between self-hosted and Hanko Cloud anytime" with "no lock-in." That combination — open source plus a stated ability to migrate between deployment models — is the core of its anti-lock-in positioning. The practical caveat: "no lock-in" is a vendor claim, so the real answer depends on how much operational work you're willing to take on and how you verify the migration path yourself.

What Hanko actually is

Hanko is an authentication and user management platform for modern apps. Its site positions it as a developer-friendly alternative to Auth0, Clerk, Firebase Auth, AWS Cognito, and Keycloak. The stated design goals are:

• Open source — the code is available, which is what makes self-hosting possible in the first place.
• Privacy-first — you retain control over your data rather than handing it to a third party by default.
• Built to scale — intended for production apps, not just demos.
• Full control over your data — the recurring theme across its messaging.

The tagline "Modern Authentication. On Your Terms." and the phrase "fully yours" reinforce that the value proposition is control, not just feature count.

Self-hosting: what it means here

Self-hosting means running the authentication stack on infrastructure you control, so user records, credentials, and session data stay in your environment. For Hanko, the relevant facts from its own materials are:

• It is open source, which is the prerequisite for self-hosting.
• The site explicitly supports moving between self-hosted and Hanko Cloud.
• Data control is framed as a first-class feature, not an add-on.

Who should care about self-hosting

If none of those apply and you'd rather not run auth infrastructure, Hanko Cloud is the managed counterpart — and the stated ability to move between the two is what's meant to prevent you from being stuck either way.

Does it avoid vendor lock-in?

The claim is explicit: "No lock-in. Just auth how it should be." Two mechanisms support it:

1. Open source — you can run the software yourself, so you are not dependent on the vendor continuing to exist or continuing to offer acceptable terms.
2. Portability between self-hosted and cloud — the site says you can move between the two "anytime," which is the migration path that lock-in usually removes.

How to treat this claim

"No lock-in" is a marketing statement, and the honest way to evaluate it is to test the exit before you commit:

• Confirm the license terms and what they permit for your use case.
• Verify the migration path between self-hosted and cloud in the docs, not just the homepage.
• Check whether your user data and configuration export cleanly.
• Decide in advance which deployment model you'd fall back to.

If those checks pass for your team, the lock-in risk is materially lower than with a closed-source auth provider. If you can't verify them, treat the claim as unproven for your purposes.

What you get in the product

Beyond deployment flexibility, Hanko covers the authentication methods modern apps expect. From its own interface flows, the supported methods include:

• Passkeys (WebAuthn) — the site leads with passkey support and a Passkey API.
• Passcodes — one-time codes sent to email.
• Password login.
• MFA — with security keys or an authenticator app.
• SSO — listed among the methods it helps you integrate.
• Social sign-in — the account creation flow shows "Continue with Google."

The UI flows shown on the site (enter passcode, select login method, set up MFA, create account, sign in) are built from components you can wire into your own app, which is consistent with the "developer-friendly" positioning.

How to decide

Choose self-hosted Hanko if you have data residency or compliance constraints, want to own the auth layer, or want to avoid per-user pricing exposure — and you have the engineering capacity to run and maintain it.

Choose Hanko Cloud if you want the same platform without operating it yourself, and you're comfortable relying on the stated ability to migrate to self-hosting later.

Look elsewhere if you need a fully managed, zero-ops auth service with no self-hosting option at all, or if you can't verify the migration and export paths for your specific requirements.

The deciding factor isn't the feature list — it's whether you can actually exercise the exit. Open source makes that possible in principle; the migration path makes it possible in practice. Verify both against your own stack before committing.

Hanko is an open-source authentication and user management platform for modern applications. It gives developers a way to add passkeys, multi-factor authentication (MFA), SSO, and other login methods to an app while keeping control over user data. It is positioned as a developer-friendly alternative to Auth0, Clerk, Firebase Auth, AWS Cognito, or Keycloak, and it supports moving between self-hosted and Hanko Cloud deployments without vendor lock-in.

What problem Hanko solves

Most apps need the same core auth capabilities: account creation, sign-in, session handling, and stronger security options like MFA. Building these from scratch is slow and easy to get wrong, while adopting a hosted auth provider can mean handing over user data and accepting long-term lock-in.

Hanko targets that trade-off. It provides ready-made authentication flows and a user management layer, but keeps the deployment model flexible. According to its site, it is "open source, privacy-first, and built to scale," with "full control over your data."

Core capabilities

Based on the product pages and interface examples, Hanko covers:

• Multiple login methods — password, passcode (a one-time code sent to email), and passkey (WebAuthn).
• MFA setup — users can protect accounts with security keys or an authenticator app, or skip the step.
• Account creation and sign-in — email-based registration, plus "Continue with Google" as a social option.
• User management — the platform handles users alongside authentication, not just login.
• SSO — listed among the supported methods in the product description.

The interface examples show these as discrete, composable steps. For instance, a "Select login method" screen offers Password, Passcode, and Passkey as separate actions, and an MFA screen offers Security Keys, Authenticator app, or Skip.

How it fits into an app

Hanko exposes authentication as flows that your frontend can call. The page evidence shows component-style markup where a button triggers an action, such as verifying a passcode:

<button onSubmit={() => flowstate.actions.verify_passcode.run({ code: passcode })}>
  Continue
</button>

This suggests the model: you render your own UI, and Hanko handles the underlying auth logic and state. That is different from a drop-in hosted login page — it gives you control over the look and feel while Hanko manages the security-critical parts.

Self-hosted vs. Hanko Cloud

Hanko's stated design allows you to "move between self-hosted and Hanko Cloud anytime." In practice this means:

The key claim is that neither choice traps you. If you start self-hosted and later want managed infrastructure, or the reverse, the platform is built to allow that switch.

Who Hanko is for

Hanko suits developers and teams who:

• Want passkeys, MFA, and SSO without building them from scratch.
• Care about data ownership and avoiding vendor lock-in.
• Prefer to control their own UI rather than use a fully hosted login page.
• Are evaluating Auth0, Clerk, Firebase Auth, AWS Cognito, or Keycloak as alternatives.

It is less relevant if you want a completely no-code auth solution or have no interest in managing any part of the authentication stack.

Trying it

The site offers a free trial with no credit card required, and a "Talk to us" option for teams that want to discuss their setup. Pricing details are available on the pricing page; the free-trial note does not by itself confirm what paid tiers include, so check that page for current terms.