AuthSplit

Two-pane auth layout: the aside prop holds the brand panel, the logo prop the mark, and the default slot is the form.

Jump to API reference

Import

Vue
import { UiAuthSplit } from '@ziyarago/ui/vue'

Sign in

ZiyaraGo

Welcome back

Sign in to manage your Umrah groups.

Form goes here
Vue
<UiAuthSplit
  title="Welcome back"
  subtitle="Sign in to manage your Umrah groups."
  aside="Plan every journey with ZiyaraGo"
  logo="ZiyaraGo"
>
  Form goes here
</UiAuthSplit>

API reference

Two-column sign-in layout with a brand panel on the left and the form on the right.

Props

PropType and valuesDefaultDescription
titlerequiredstring—Form heading.
subtitlestring—Text under the heading.
logoVNode—Logo node above the heading.
asideVNode—Content of the left brand panel (hidden on narrow screens).

Slots

Vue: named slots. React: a prop with the same name; default is children.

defaultForm content under the heading. React passes it as children.

Notes

  • logo and aside are props in both Vue and React (pass a VNode / element).