# Sign up pages > Whole sign up pages built on the AuthShell section, from a centred form to multi-step flows with a progress sidebar. URL: https://apogee.avaui.dev/docs/sign-up-pages Last updated: 2026-10-15 Whole sign up pages built on the AuthShell section, from a centred form to multi-step flows with a progress sidebar. Last updated October 15, 2026 Each example is a complete page. The frame comes from the [AuthShell](https://apogee.avaui.dev/docs/sections/auth-shell) section; the form inside is plain composition, because it posts to your own backend. New passwords use [PasswordChecklist](https://apogee.avaui.dev/docs/password-checklist), and multi-step flows show their place with [Steps](https://apogee.avaui.dev/docs/steps) or [ProgressIndicator](https://apogee.avaui.dev/docs/progress-indicator). ```sh npx @ava-ui/apogee add sign-up/simple ``` `npx @ava-ui/apogee list` shows every page. [ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__simple.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__simple.dark.webp) SimpleA centred form with a sign up / log in switch and live password checks. ](https://apogee.avaui.dev/docs/sign-up-pages/simple)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__sso-first.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__sso-first.dark.webp) SSO firstSingle sign-on leads; email is the fallback under an "or" divider. ](https://apogee.avaui.dev/docs/sign-up-pages/sso-first)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__header-navigation.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__header-navigation.dark.webp) Header navigationA top bar carries the logo and the log in link; the form sits below it. ](https://apogee.avaui.dev/docs/sign-up-pages/header-navigation)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__card-separated.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__card-separated.dark.webp) Card separatedThe heading sits on a grey page and the form in its own raised card. ](https://apogee.avaui.dev/docs/sign-up-pages/card-separated)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__card-combined.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__card-combined.dark.webp) Card combinedOne card holds the logo, the heading and the form. ](https://apogee.avaui.dev/docs/sign-up-pages/card-combined)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__progress.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__progress.dark.webp) ProgressThe password step of a sign up flow, with the steps below: down the page on phones, across from md. ](https://apogee.avaui.dev/docs/sign-up-pages/progress)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__progress-icons.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__progress-icons.dark.webp) Progress with iconsThe password step, with an icon and a short line for each step below. ](https://apogee.avaui.dev/docs/sign-up-pages/progress-icons)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__progress-numbers.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__progress-numbers.dark.webp) Progress with numbersThe password step, with numbered steps joined by a line below. ](https://apogee.avaui.dev/docs/sign-up-pages/progress-numbers)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-mockup.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-mockup.dark.webp) Split with mockupThe form beside a product screen built from the components. ](https://apogee.avaui.dev/docs/sign-up-pages/split-mockup)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-mockup-quote.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-mockup-quote.dark.webp) Split with mockup and quoteA customer quote above the product screen. ](https://apogee.avaui.dev/docs/sign-up-pages/split-mockup-quote)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-carousel.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-carousel.dark.webp) Split with carouselThe form beside a dark panel that walks through what you get. ](https://apogee.avaui.dev/docs/sign-up-pages/split-carousel)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-image.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-image.dark.webp) Split with imageThe form beside a full-height photo. ](https://apogee.avaui.dev/docs/sign-up-pages/split-image)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-photo-quote.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-photo-quote.dark.webp) Split with photo and quoteReviews rotate over a photo, on a dark scrim. ](https://apogee.avaui.dev/docs/sign-up-pages/split-photo-quote)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-photo-quote-glass.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-photo-quote-glass.dark.webp) Split with photo and glass cardSSO first, beside reviews that rotate in a frosted card over a photo. ](https://apogee.avaui.dev/docs/sign-up-pages/split-photo-quote-glass)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-app-mockup.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-app-mockup.dark.webp) Split with app mockupThe form beside a phone screen built from the components. ](https://apogee.avaui.dev/docs/sign-up-pages/split-app-mockup)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-pitch.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-pitch.dark.webp) Split with pitchThe form beside a portrait, a short pitch and social proof. ](https://apogee.avaui.dev/docs/sign-up-pages/split-pitch)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-image-background.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-image-background.dark.webp) Split with image backgroundThe form beside a photo under a brand tint, with a pitch and social proof. ](https://apogee.avaui.dev/docs/sign-up-pages/split-image-background)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-quote-carousel.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__split-quote-carousel.dark.webp) Split with quote carouselCustomer quotes rotate in the panel, with dots and arrows underneath. ](https://apogee.avaui.dev/docs/sign-up-pages/split-quote-carousel)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__sidebar-progress.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__sidebar-progress.dark.webp) Sidebar progressA side column holds the logo and the steps with icons; the password step fills the rest. ](https://apogee.avaui.dev/docs/sign-up-pages/sidebar-progress)[ ![](https://apogee.avaui.dev/thumbs/sign-up-pages__sidebar-progress-numbers.light.webp)![](https://apogee.avaui.dev/thumbs/sign-up-pages__sidebar-progress-numbers.dark.webp) Sidebar progress with numbersA tinted side column with numbered steps; a segmented bar under the form. ](https://apogee.avaui.dev/docs/sign-up-pages/sidebar-progress-numbers) ## Related [ Auth shellThe frame of a log in, sign up or recovery page; brand mark, heading and your form, centred, in a card, beside a panel, or beside a step sidebar. ](https://apogee.avaui.dev/docs/sections/auth-shell)[ PasswordChecklistThe rules a new password must meet, ticked off as the user types. ](https://apogee.avaui.dev/docs/password-checklist)[ StepsA vertical progress list for onboarding, checkout, and wizard flows. ](https://apogee.avaui.dev/docs/steps)