Компоненты/Вход с кошельком

Вход с кошельком

29 сентября 2026

Выезжающая панель входа: соцсети, вкладки почты, телефона и ключа доступа, ввод кода и выбор кошелька, а высота плавно подстраивается под каждый экран.

Установка

npm install clsx lucide-react motion tailwind-merge vaul
pnpm add clsx lucide-react motion tailwind-merge vaul
yarn add clsx lucide-react motion tailwind-merge vaul
bun add clsx lucide-react motion tailwind-merge vaul

Файлы

wallet-sign-in.tsx
НазадКарточки кошелькаДалееЦиферблат

Кнопка «Войти» открывает выезжающую снизу панель. На первом экране — вход через соцсети, вкладки почты, телефона и ключа доступа с подсвеченной плашкой активной вкладки и кнопка подключения кошелька.

После ввода почты или телефона панель переходит к вводу шестизначного кода, для ключа доступа показывается кнопка с бегущей по контуру подсветкой, а экран кошелька предлагает список популярных кошельков. При каждой смене экрана высота панели плавно подстраивается под содержимое.

Вручную

Скопируйте эти файлы в components/wallet-sign-in/:

Общие помощники положите в lib/ проекта:

Проверьте алиас путей. Импорты в коде выше записаны как @/components/... и @/lib/.... Нужен алиас "@/*" на папку, где лежат components/ и lib/, в tsconfig.json — или поправьте импорты под свои пути.

Использование

import { WalletSignIn } from "@/components/wallet-sign-in/wallet-sign-in";

export function Login() {
return (
  <div className="h-[720px]">
    <WalletSignIn triggerLabel="Войти" defaultMethod="Phone" />
  </div>
);
}

Пропсы

Пропс
Описание
hint?

Подсказка над кнопкой

Тип string·По умолчанию "Нажмите, чтобы войти"

triggerLabel?

Текст кнопки, открывающей панель

Тип string·По умолчанию "Войти"

defaultOpen?

Открыть панель сразу

Тип boolean·По умолчанию false

defaultMethod?

Вкладка, выбранная при открытии

Тип "Email" | "Phone" | "Passkey"·По умолчанию "Email"

email?

Пример почты в поле и на экране кода

Тип string·По умолчанию "you@astra.ru"

phone?

Пример телефона в поле и на экране кода

Тип string·По умолчанию "+7 (900) 123-45-67"

accent?

Цвет кнопок подтверждения и кошелька

Тип string·По умолчанию цвет бренда

className?

Классы корневого блока

Тип string