UI Library

Overview

@authrim/sveltekit/ui provides 30+ pre-built Svelte components for building authentication UIs. All components are:

• Themeable — CSS custom properties (--authrim-*)
• Accessible — ARIA roles, focus management, keyboard navigation
• Dark mode ready — Light/dark themes via [data-theme="dark"]
• Zero dependencies — Pure Svelte, no external UI library required

import { Button, Input, Card, EmailCodeForm } from '@authrim/sveltekit/ui';
import '@authrim/sveltekit/ui/styles'; // Theme CSS

Note

SDK internal components use Svelte 4 syntax (export let, <slot>, on:event). They work unchanged in Svelte 5 projects. When using these components from Svelte 5, you can use either on:click or onclick — both work.

Component Catalog

Shared Components

Component	Props	Description
Button	variant, size, loading, disabled, fullWidth, type	Primary action button with variants and loading spinner
Input	type, size, value, placeholder, error, errorMessage, label, required	Text input with label, error state, and validation
Card	padding, bordered, shadow, hoverable	Container with header/footer slots
Dialog	open, title, closeOnOverlay, closeOnEscape	Modal dialog with focus trap and overlay
Badge	variant, dot	Status indicator with color variants
Spinner	size	Loading spinner animation
Alert	variant, title, dismissible	Alert message (success/error/warning/info)
LanguageSwitcher	locales, currentLocale	Language selection dropdown
CountdownTimer	expiresAt, size, showIcon, warnAt, criticalAt	Countdown display

Helper Components

Component	Props	Description
AuthError	message, dismissible	Error display with dismiss button and role="alert"
OTPInput	length, value, disabled, error, autoFocus	Segmented code input with paste support and auto-advance
ResendCodeButton	remainingTime, text, loading, disabled	Resend button with countdown timer

Form Components

Component	Props	Description
EmailCodeForm	step, email, maskedEmail, loading, error, resendRemainingTime	Two-step email + code form
SocialLoginButtons	providers, layout, loading, loadingProvider, compact	Provider buttons with icons
PasskeyConditionalInput	value, placeholder, disabled, size, label, showPasskeyHint	Username input with WebAuthn autofill affordance
UserCodeInput	value, disabled, placeholder, label, hint	Device-flow user-code input
QRCodeDisplay	data, imageUrl, size, label, caption	QR code display wrapper
ClientInfo	client, trustedLabel, privacyPolicyLabel, termsLabel	OAuth client metadata display
ConsentScopesList	scopes, labelMap	OAuth scope display list
OrgSelector	organizations, selectedOrgId, label, primaryLabel	Consent organization selector
CIBARequestCard	request, loading, approveLabel, denyLabel	Single CIBA approval card

Passkey Management

Component	Props	Description
PasskeyList	passkeys, loading, deletingId	List of registered passkeys with delete
PasskeyRegisterButton	loading, disabled, variant, size, fullWidth	Register new passkey button
PasskeyDeleteButton	credentialId, loading	Delete passkey confirmation button

Session Management

Component	Props	Description
SessionList	sessions, currentSessionId, loading, revokingId	Active session list with revoke
SessionRevokeButton	sessionId, loading	Revoke session button
SessionExpiryIndicator	expiresAt	Session expiry indicator

Account Management

Component	Props	Description
LinkedAccountsList	accounts, loading	Linked social accounts
LinkAccountButton	provider, loading	Link new social account
UnlinkAccountButton	accountId, provider, loading	Unlink social account

Key Components in Detail

Button

<script lang="ts">
  import { Button } from '@authrim/sveltekit/ui';
</script>

<Button variant="primary" size="md" loading={false} onclick={handleClick}>
  Sign In
</Button>

<Button variant="outline" fullWidth>
  Continue with Email
</Button>

<Button variant="destructive" size="sm">
  Delete Account
</Button>

Variants: primary, secondary, outline, ghost, destructive

Sizes: sm (34px), md (42px), lg (50px)

Input

<script lang="ts">
  import { Input } from '@authrim/sveltekit/ui';
  let email = $state('');
</script>

<Input
  type="email"
  label="Email address"
  placeholder="[email protected]"
  bind:value={email}
  required
  error={!email.includes('@')}
  errorMessage="Invalid email address"
/>

OTPInput

<script lang="ts">
  import { OTPInput } from '@authrim/sveltekit/ui';
</script>

<OTPInput
  length={6}
  autoFocus
  on:complete={(e) => verifyCode(e.detail.value)}
  on:input={(e) => console.log('Current:', e.detail.value)}
/>

Features: Auto-advance between digits, paste support, arrow key navigation, shake animation on error.

EmailCodeForm

<script lang="ts">
  import { EmailCodeForm } from '@authrim/sveltekit/ui';

  let step: 'email' | 'code' = $state('email');
  let email = $state('');
  let loading = $state(false);
</script>

<EmailCodeForm
  {step}
  {email}
  {loading}
  on:submit-email={(e) => sendCode(e.detail.email)}
  on:submit-code={(e) => verifyCode(e.detail.code)}
  on:back={() => { step = 'email'; }}
  on:resend={() => resendCode()}
  on:dismiss-error={() => { error = ''; }}
/>

SocialLoginButtons

<script lang="ts">
  import { SocialLoginButtons } from '@authrim/sveltekit/ui';
</script>

<SocialLoginButtons
  providers={['google', 'github', 'apple']}
  layout="vertical"
  on:click={(e) => auth.social.loginWithPopup(e.detail.provider)}
/>

Layouts: vertical (stacked), horizontal (row), grid (auto-fit)

Built-in icons: Google, Apple, Microsoft, GitHub, Facebook — each with branded colors.

PasskeyList

<script lang="ts">
  import { PasskeyList } from '@authrim/sveltekit/ui';
</script>

<PasskeyList
  passkeys={[
    { credentialId: 'abc', name: 'MacBook Pro', deviceType: 'platform',
      createdAt: new Date('2024-01-15'), lastUsedAt: new Date('2024-06-01') },
  ]}
  on:delete={(e) => deletePasskey(e.detail.credentialId)}
/>

SessionList

<script lang="ts">
  import { SessionList } from '@authrim/sveltekit/ui';
</script>

<SessionList
  sessions={[
    { sessionId: 'sess_1', browser: 'Chrome', os: 'macOS',
      lastActiveAt: new Date(), isCurrent: true },
    { sessionId: 'sess_2', browser: 'Safari', os: 'iOS',
      lastActiveAt: new Date('2024-05-20') },
  ]}
  currentSessionId="sess_1"
  on:revoke={(e) => revokeSession(e.detail.sessionId)}
/>

Customization

1. CSS Custom Properties

Override theme variables to change the look:

:root {
  --authrim-color-primary: #0066cc;
  --authrim-color-primary-hover: #0052a3;
  --authrim-radius-md: 8px;
  --authrim-font-sans: 'Inter', sans-serif;
}

2. Class Prop

Every component accepts a class prop:

<Button class="my-custom-button" variant="primary">
  Submit
</Button>

<style>
  :global(.my-custom-button) {
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
</style>

3. Slots

Replace internal sections with slots:

<Card>
  {#snippet header()}
    <h2>Custom Header</h2>
  {/snippet}

  <p>Card body content</p>

  {#snippet footer()}
    <Button>Save</Button>
  {/snippet}
</Card>

Svelte 4

In Svelte 4, use named slots:

<Card>
  <h2 slot="header">Custom Header</h2>
  <p>Card body content</p>
  <Button slot="footer">Save</Button>
</Card>

Theme Reference

Import the theme CSS to get the default styling:

import '@authrim/sveltekit/ui/styles';

Color Tokens

Token	Light	Dark	Purpose
--authrim-color-primary	#4f46e5	#818cf8	Primary actions
--authrim-color-accent	#f43f5e	#fb7185	Accent/highlight
--authrim-color-success	#059669	#34d399	Success states
--authrim-color-warning	#d97706	#fbbf24	Warning states
--authrim-color-error	#e11d48	#fb7185	Error states
--authrim-color-info	#0891b2	#22d3ee	Info states
--authrim-color-bg	#ffffff	#09090b	Background
--authrim-color-text	#09090b	#fafafa	Text
--authrim-color-border	#e4e4e7	#27272a	Borders

Layout Tokens

Token	Value	Purpose
--authrim-radius-sm	6px	Small elements
--authrim-radius-md	10px	Buttons, inputs
--authrim-radius-lg	14px	Cards
--authrim-radius-xl	20px	Large containers
--authrim-shadow-sm	subtle	Cards, inputs
--authrim-shadow-md	moderate	Dialogs
--authrim-shadow-lg	prominent	Dropdowns

Typography Tokens

Token	Value
--authrim-font-sans	'DM Sans', system-ui, sans-serif
--authrim-font-mono	'JetBrains Mono', monospace
--authrim-text-sm	0.875rem
--authrim-text-base	1rem
--authrim-text-lg	1.125rem

Dark Mode

Dark mode activates via [data-theme="dark"] or prefers-color-scheme: dark:

<!-- Manual toggle -->
<html data-theme="dark">

/* Auto-detection (default behavior) */
@media (prefers-color-scheme: dark) {
  :root { /* dark tokens applied automatically */ }
}

Next Steps

• Page Templates — Full-page layouts using these components
• Components — Core auth components (AuthProvider, etc.)
• Configuration — Advanced customization options