UI Components

The @latch/ui package provides drop-in Web Components that work in any HTML page — no React, Vue, or build step required. Each component uses Shadow DOM for style isolation and CSS custom properties for theming.

Note

UI Components require the SDK to be initialized first. Call Latch.init() before using any component.

Installation

Initialize the SDK before importing the UI package. This ensures the branding configuration is fetched automatically when components load.

<script type="module">
  // 1. Initialize the SDK first
  const { init } = await import('@latch/sdk');
  init({
    apiKey: 'pk_...',
    apiUrl: 'https://your-latch-api',
  });

  // 2. Then import UI components — triggers branding fetch
  await import('@latch/ui');
</script>

Or import individual components:

import { LatchAuthModal, LatchUserMenu } from '@latch/ui';

Tip

Automatic branding: When @latch/ui is imported, it fetches your publication’s branding configuration from the API. Colors, logo, fonts, and custom text configured in Settings > Branding in the dashboard are applied automatically. See the Branding docs for details.

Components

<latch-login-form>

Standalone email + password login form.

<latch-login-form
  heading="Sign in"
  button-text="Sign in"
  show-register="true"
></latch-login-form>

Attribute	Default	Description
heading	"Sign in"	Form heading text
button-text	"Sign in"	Submit button label
show-register	"true"	Show “Create account” link

Event	Detail	Description
latch:login	{ customer }	Successful login
latch:login:error	{ error }	Login failure
latch:show-register	—	“Create account” link clicked

---

<latch-register-form>

Standalone registration form with optional name field.

<latch-register-form
  heading="Create account"
  show-name="true"
></latch-register-form>

Attribute	Default	Description
heading	"Create account"	Form heading
button-text	"Create account"	Submit button label
show-login	"true"	Show “Sign in” link
show-name	"true"	Show the optional name field

Event	Detail	Description
latch:register	{ customer }	Successful registration
latch:register:error	{ error }	Registration failure
latch:show-login	—	“Sign in” link clicked

---

<latch-auth-modal>

Combined login/register modal with tab switching. Show it by setting the open attribute or calling .show().

<latch-auth-modal id="auth"></latch-auth-modal>

<button onclick="document.getElementById('auth').show()">
  Sign in
</button>

Attribute	Default	Description
open	—	If present, the modal is visible
tab	"login"	Initial tab: "login" or "register"
heading	Auto	Heading (defaults based on active tab)
show-name	"true"	Show name field in register tab

Method	Description
.show(tab?)	Open the modal. Optionally set the starting tab.
.hide()	Close the modal.

Event	Detail	Description
latch:login	{ customer }	Successful login
latch:register	{ customer }	Successful registration
latch:auth-modal:close	—	Modal was closed

---

<latch-user-menu>

Shows a “Sign in” button when logged out, or a user dropdown with avatar and sign-out when logged in. Automatically updates when auth state changes.

<latch-user-menu
  login-text="Sign in"
  show-account-link="true"
></latch-user-menu>

Attribute	Default	Description
login-text	"Sign in"	Button text when logged out
show-account-link	"true"	Show “Account” link in dropdown
avatar	"true"	Show initials avatar

Event	Detail	Description
latch:show-login	—	Sign in button clicked
latch:show-account	—	Account link clicked
latch:logout	—	Logout completed

---

<latch-paywall-modal>

A styled paywall overlay. Trigger it from an access check result or manually.

<latch-paywall-modal
  message="Subscribe to continue reading"
  description="Get unlimited access to all content."
  cta-text="Subscribe"
  product-ids="prod-uuid-1,prod-uuid-2"
></latch-paywall-modal>

Attribute	Default	Description
open	—	If present, the modal is visible
message	"Subscribe to continue reading"	Paywall heading
description	"Get unlimited access..."	Secondary text
cta-text	"Subscribe"	CTA button label
dismiss-text	"Maybe later"	Dismiss button label
dismissible	"true"	Show dismiss button
lock-icon	"true"	Show lock icon
product-ids	—	Comma-separated product IDs
meter-remaining	—	If set, shows meter info

Event	Detail	Description
latch:subscribe	{ productIds }	CTA button clicked
latch:dismiss	—	Dismiss button clicked

---

<latch-pricing-table>

Fetches active products and prices from the API and renders a pricing grid. Each price has a checkout button that automatically redirects authenticated customers to Stripe Checkout.

<latch-pricing-table
  heading="Choose your plan"
  description="Cancel anytime. No commitment."
></latch-pricing-table>

Attribute	Default	Description
heading	"Choose your plan"	Section heading
description	—	Subheading text
columns	"auto"	Grid columns: "auto", "1", "2", "3"
show-free	"false"	Show free-tier prices

Event	Detail	Description
latch:checkout	{ priceId, productId, productName }	A price was selected
latch:pricing:loaded	{ products }	Products loaded from API
latch:pricing:error	{ error }	Failed to load products

Tip

The pricing table uses GET /api/v1/products/public with the publishable key. Only active products with active prices are shown. Internal fields like Stripe IDs are never exposed.

---

<latch-account-panel>

Shows the logged-in customer’s profile, subscription status, and a “Manage subscription” button that opens the Stripe Customer Portal. When logged out, shows a sign-in prompt.

<latch-account-panel heading="Your account"></latch-account-panel>

Attribute	Default	Description
heading	"Your account"	Panel heading
show-portal	"true"	Show “Manage subscription” button

Event	Detail	Description
latch:show-login	—	Sign in prompt clicked
latch:logout	—	Logout completed

Theming

All components support theming via CSS custom properties. Set them on the component element or any ancestor:

/* Override on a specific component */
latch-auth-modal {
  --latch-primary: #e74c3c;
  --latch-primary-hover: #c0392b;
  --latch-radius: 16px;
}

/* Override globally */
:root {
  --latch-primary: #2ecc71;
  --latch-font: 'Georgia', serif;
}

Available CSS custom properties

Property	Default	Description
--latch-primary	#6C5CE7	Primary brand color
--latch-primary-hover	#5A4BD1	Primary hover color
--latch-primary-text	#ffffff	Text color on primary backgrounds
--latch-bg	#ffffff	Component background
--latch-bg-secondary	#f8f9fa	Secondary background
--latch-bg-hover	#f1f3f5	Hover background
--latch-text	#0f172a	Primary text color
--latch-text-secondary	#64748b	Secondary text color
--latch-text-muted	#94a3b8	Muted text color
--latch-border	#e2e8f0	Border color
--latch-border-focus	#6C5CE7	Focus ring color
--latch-error	#ef4444	Error color
--latch-success	#22c55e	Success color
--latch-radius	8px	Border radius
--latch-radius-lg	12px	Large border radius
--latch-font	system-ui	Font family
--latch-shadow	—	Box shadow
--latch-overlay	rgba(0,0,0,0.5)	Modal overlay color

Full example

A complete publisher page with auth, paywalls, and pricing:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Publication</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 800px; margin: 0 auto; padding: 24px; }
    header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
    /* Theme the components to match your brand */
    :root { --latch-primary: #2563eb; }
  </style>
</head>
<body>
  <header>
    <h1>My Publication</h1>
    <latch-user-menu></latch-user-menu>
  </header>

  <!-- Auth modal (hidden by default) -->
  <latch-auth-modal id="auth-modal"></latch-auth-modal>

  <!-- Article content -->
  <article>
    <h2>Premium Article Title</h2>
    <p>Article content goes here...</p>
  </article>

  <!-- Pricing section -->
  <latch-pricing-table heading="Subscribe today"></latch-pricing-table>

  <!-- Account section -->
  <latch-account-panel></latch-account-panel>

  <script type="module">
    import { init, checkAccess, onAuthChange } from '@latch/sdk';
    import '@latch/ui';

    init({ apiKey: 'pk_...', apiUrl: 'https://your-api' });

    // Wire up user menu -> auth modal
    document.addEventListener('latch:show-login', () => {
      document.getElementById('auth-modal').show('login');
    });

    // Re-check access after login
    document.addEventListener('latch:login', async () => {
      const result = await checkAccess();
      if (!result.granted) {
        // Show paywall or redirect
      }
    });

    // Wire up pricing table -> auth modal (if not logged in)
    document.addEventListener('latch:checkout', (e) => {
      // If not authenticated, the pricing table won't auto-redirect.
      // Open the auth modal so the customer can log in first.
      const { isAuthenticated } = await import('@latch/sdk');
      if (!isAuthenticated()) {
        document.getElementById('auth-modal').show('register');
      }
    });
  </script>
</body>
</html>

Browser support

The components use Web Components (Custom Elements v1 + Shadow DOM v1), supported in all modern browsers:

• Chrome/Edge 54+
• Firefox 63+
• Safari 10.1+

No polyfills are needed for any browser released after 2018.