AuthShowcase Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Sign-in with a media panel. variant picks the look: photo (dark card, floating avatars), light (gradient card, proof pill, glass caption) or tint (coloured panel). Fill the default slot with the form.

Jump to API reference

Import

Vue
import { UiAuthShowcase } from '@ziyarago/ui-pro/vue'

photo

Glad you are back

Plan every journey with ZiyaraGo

AKDROHDesign is intelligence made visible

Get started

Sign in to your account

Form goes here
Vue
<UiAuthShowcase
  variant="photo"
  title="Get started"
  subtitle="Sign in to your account"
  headline="Glad you are back"
  caption="Plan every journey with ZiyaraGo"
  quote="Design is intelligence made visible"
  :people="[{ name: 'Aziz Karimov' }, { name: 'Dilnoza Rahimova' }, { name: 'Omar Hassan' }]"
>
  Form goes here
</UiAuthShowcase>

light

Welcome to ZiyaraGo

Sign in to manage your groups.

Form goes here
AKDROH
Join 20k+ usersSee our happy customers
UmrahHajj

Guiding every pilgrim step by step.

Vue
<UiAuthShowcase
  variant="light"
  title="Welcome to ZiyaraGo"
  subtitle="Sign in to manage your groups."
  caption="Guiding every pilgrim step by step."
  :chips="['Umrah', 'Hajj']"
  proof="Join 20k+ users"
  proof-hint="See our happy customers"
  :people="[{ name: 'Aziz Karimov' }, { name: 'Dilnoza Rahimova' }, { name: 'Omar Hassan' }]"
>
  Form goes here
</UiAuthShowcase>

tint

Welcome back

Sign in with your work email.

Form goes here
AKDROH
Join 20k+ usersOur happy customers

Everything for your pilgrims in one place

Creating

Bookings, rooms and payments, synced.

Vue
<UiAuthShowcase
  variant="tint"
  title="Welcome back"
  subtitle="Sign in with your work email."
  headline="Everything for your pilgrims in one place"
  caption="Bookings, rooms and payments, synced."
  :chips="['Creating']"
  proof="Join 20k+ users"
  proof-hint="Our happy customers"
  :people="[{ name: 'Aziz Karimov' }, { name: 'Dilnoza Rahimova' }, { name: 'Omar Hassan' }]"
>
  Form goes here
</UiAuthShowcase>

API reference

Sign-in layout with a media panel: dark photo card with floating avatars, light gradient card with a social-proof pill, or a tinted panel with a glass caption. The default slot is the form.

Props

PropType and valuesDefaultDescription
variantphotolighttint'photo''photo': one framed card, media on the left. 'light': gradient form card, proof pill below, glass caption on the media. 'tint': like light, with a coloured panel, a heading on the media and cyan accent.
titlerequiredstring—Form heading.
subtitlestring—Text under the heading.
logoVNode—Logo node above the heading.
footerVNode—Content under the fields, for example "No account? Sign up".
imagestring—URL of the media image. Without it the panel shows an accent gradient.
headlinestring—Large text on the media panel (photo and tint).
captionstring—Small text on the media panel (photo) or inside the glass bar (light, tint).
quotestring—Line at the bottom of the media panel; photo only.
chipsstring[]—Pill labels inside the glass bar; light and tint.
people{ name: string; src?: string }[]—Avatars: floating on the photo, stacked in the proof pill.
proofstring—Social-proof title, e.g. "Join 20k+ users"; light and tint. Shows the pill under the form.
proofHintstring—Second line of the proof pill.

Slots

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

defaultForm fields and buttons. React passes them as children.

Notes

  • logo, footer, image, people are props in both Vue and React. The media panel is hidden below the form on narrow screens (stacks under it).