コンテンツにスキップ
Authrim

UIライブラリ

概要

@authrim/sveltekit/ui は認証UIを構築するための30以上のプリビルドSvelteコンポーネントを提供します。すべてのコンポーネントは：

  • テーマ対応 — CSSカスタムプロパティ（--authrim-*）
  • アクセシブル — ARIAロール、フォーカス管理、キーボードナビゲーション
  • ダークモード対応 — [data-theme="dark"] でライト/ダークテーマ
  • 依存関係なし — 純粋なSvelte、外部UIライブラリ不要
import { Button, Input, Card, EmailCodeForm } from '@authrim/sveltekit/ui';
import '@authrim/sveltekit/ui/styles'; // テーマCSS

コンポーネントカタログ

共通コンポーネント

コンポーネントProps説明
Buttonvariant, size, loading, disabled, fullWidth, typeバリアントとローディングスピナー付きアクションボタン
Inputtype, size, value, placeholder, error, errorMessage, label, requiredラベル、エラー状態、バリデーション付きテキスト入力
Cardpadding, bordered, shadow, hoverableヘッダー/フッタースロット付きコンテナ
Dialogopen, title, closeOnOverlay, closeOnEscapeフォーカストラップとオーバーレイ付きモーダルダイアログ
Badgevariant, dotカラーバリアント付きステータスインジケーター
Spinnersizeローディングスピナーアニメーション
Alertvariant, dismissibleアラートメッセージ（success/error/warning/info）
LanguageSwitcherlanguages, current言語選択ドロップダウン
CountdownTimerseconds, formatカウントダウン表示

ヘルパーコンポーネント

コンポーネントProps説明
AuthErrormessage, dismissiblerole="alert" 付きエラー表示（閉じるボタン付き）
OTPInputlength, value, disabled, error, autoFocusペースト対応・自動進行の分割コード入力
ResendCodeButtonremainingTime, text, loading, disabledカウントダウンタイマー付き再送信ボタン
Dividertextオプションテキスト付き区切り線

フォームコンポーネント

コンポーネントProps説明
EmailCodeFormstep, email, maskedEmail, loading, error, resendRemainingTime2ステップのメール＋コードフォーム
SocialLoginButtonsproviders, layout, loading, loadingProvider, compactアイコン付きプロバイダーボタン
PasskeyLoginButtonloading, disabledPasskeyサインインボタン
PasskeySignUpFormloading, errorPasskey登録フォーム
SignUpFormstep, loading, errorマルチメソッドサインアップフォーム
ConsentScopesListscopesOAuthスコープ表示リスト
ConsentFormclientInfo, scopes, loading完全な同意フォーム
DeviceFlowFormloading, errorデバイスコード入力フォーム

Passkey管理

コンポーネントProps説明
PasskeyListpasskeys, loading, deletingId削除機能付き登録済みPasskey一覧
PasskeyItempasskey, deleting単一Passkey表示
AddPasskeyButtonloading新規Passkey登録ボタン

セッション管理

コンポーネントProps説明
SessionListsessions, currentSessionId, loading, revokingId取消機能付きアクティブセッション一覧
SessionItemsession, isCurrent, revoking単一セッション表示
RevokeSessionButtonsessionId, loadingセッション取消ボタン

アカウント管理

コンポーネントProps説明
LinkedAccountsListaccounts, loading連携ソーシャルアカウント
LinkAccountButtonprovider, loading新規ソーシャルアカウント連携
UnlinkAccountButtonaccountId, loadingソーシャルアカウント連携解除

主要コンポーネントの詳細

Button

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


<Button variant="primary" size="md" loading={false} onclick={handleClick}>
  サインイン
</Button>


<Button variant="outline" fullWidth>
  メールで続行
</Button>


<Button variant="destructive" size="sm">
  アカウント削除
</Button>

バリアント: primary, secondary, outline, ghost, destructive

サイズ: sm（34px）、md（42px）、lg（50px）

Input

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


<Input
  type="email"
  label="メールアドレス"
  placeholder="[email protected]"
  bind:value={email}
  required
  error={!email.includes('@')}
  errorMessage="無効なメールアドレスです"
/>

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('現在値:', e.detail.value)}
/>

機能: 数字間の自動進行、ペースト対応、矢印キーナビゲーション、エラー時のシェイクアニメーション。

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)}
/>

レイアウト: vertical（縦並び）、horizontal（横並び）、grid（自動配置）

組み込みアイコン: Google、Apple、Microsoft、GitHub、Facebook — 各ブランドカラー付き。

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)}
/>

カスタマイズ

1. CSSカスタムプロパティ

テーマ変数をオーバーライドして外観を変更：

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

2. class prop

すべてのコンポーネントは class propを受け付けます：

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


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

3. スロット

内部セクションをスロットで置き換え：

<Card>
  {#snippet header()}
    <h2>カスタムヘッダー</h2>
  {/snippet}


  <p>カード本文</p>


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

テーマリファレンス

テーマCSSをインポートしてデフォルトスタイルを適用：

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

カラートークン

トークンライトダーク用途
--authrim-color-primary#4f46e5#818cf8プライマリアクション
--authrim-color-accent#f43f5e#fb7185アクセント/ハイライト
--authrim-color-success#059669#34d399成功状態
--authrim-color-warning#d97706#fbbf24警告状態
--authrim-color-error#e11d48#fb7185エラー状態
--authrim-color-info#0891b2#22d3ee情報状態
--authrim-color-bg#ffffff#09090b背景
--authrim-color-text#09090b#fafafaテキスト
--authrim-color-border#e4e4e7#27272aボーダー

レイアウトトークン

トークン値用途
--authrim-radius-sm6px小さい要素
--authrim-radius-md10pxボタン、入力
--authrim-radius-lg14pxカード
--authrim-radius-xl20px大きいコンテナ
--authrim-shadow-sm微妙カード、入力
--authrim-shadow-md中程度ダイアログ
--authrim-shadow-lg目立つドロップダウン

タイポグラフィトークン

トークン値
--authrim-font-sans'DM Sans', system-ui, sans-serif
--authrim-font-mono'JetBrains Mono', monospace
--authrim-text-sm0.875rem
--authrim-text-base1rem
--authrim-text-lg1.125rem

ダークモード

ダークモードは [data-theme="dark"] または prefers-color-scheme: dark で有効化：

<!-- 手動トグル -->
<html data-theme="dark">
/* 自動検知（デフォルト動作） */
@media (prefers-color-scheme: dark) {
  :root { /* ダークトークンが自動適用 */ }
}

次のステップ