# Split with carousel

> The form beside a dark panel that walks through what you get.

URL: https://apogee.avaui.dev/docs/sign-up-pages/split-carousel
Last updated: 2026-10-15

The form beside a dark panel that walks through what you get.

Last updated October 15, 2026

Live example: https://apogee.avaui.dev/examples/sign-up/split-carousel

```astro
---
/**
 * Split with carousel: The form beside a dark panel that walks through what you get.
 *
 * @page sign-up
 */
import { Orbit, KeyRound } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Link from '@/components/apogee/Link/Link.astro'
import Carousel from '@/components/apogee/Carousel/Carousel.astro'
import Card from '@/components/apogee/Card/Card.astro'
import Stat from '@/components/apogee/Stat/Stat.astro'

const slides = [
  { title: 'Reports that build themselves', text: 'Product and growth numbers, sent to your inbox every Monday.', stats: [{ label: 'Reports sent', value: '1,204', change: '+31%', trend: 'up' as const }, { label: 'Open rate', value: '68%', change: '+4%', trend: 'up' as const }] },
  { title: 'See who stays', text: 'Retention by plan, cohort and channel, without a spreadsheet.', stats: [{ label: 'Retention', value: '91%', change: '+2%', trend: 'up' as const }, { label: 'Churn', value: '1.9%', change: '-0.4%', trend: 'down' as const }] },
  { title: 'Invite your whole team', text: 'Roles and seats, managed in one place.', stats: [{ label: 'Seats used', value: '38', change: '+6', trend: 'up' as const }, { label: 'Admins', value: '4' }] },
]
---

<AuthShell layout="split" heading="Sign up" description="Start your 30-day free trial." panelBackground="inverted">
  <a slot="brand" href="#" class="flex items-center gap-2 font-semibold">
    <FeaturedIcon theme="solid" color="primary" size="small"><Orbit /></FeaturedIcon>
    Example
  </a>

  <form method="post" class="flex flex-col gap-6">
    <div class="flex flex-col gap-5">
      <Input label="Name" name="name" placeholder="Enter your name" autocomplete="name" required />
      <Input label="Email" type="email" name="email" placeholder="Enter your email" autocomplete="email" required />
      <Input label="Password" type="password" name="password" placeholder="Create a password" autocomplete="new-password" minlength="8" hint="Must be at least 8 characters." required />
    </div>
    <div class="flex flex-col gap-4">
      <Button type="submit" size="large" fullWidth>Get started</Button>
      <Button href="#" variant="outline" color="neutral" size="large" fullWidth>
        <KeyRound slot="start" aria-hidden="true" />
        Sign up with SSO
      </Button>
    </div>
  </form>

  <p slot="footer" class="text-neutral-faded">
    Already have an account? <Link href="#" underline="hover" class="font-semibold">Log in</Link>
  </p>

  <p slot="legal">© Example 2026</p>

  <div slot="panel" class="flex w-full items-center justify-center px-16 py-16">
    <Carousel itemWidth="100%" dots controlsPosition="below" label="What you get" class="w-full max-w-md">
      {slides.map((s) => (
        <div class="flex flex-col items-center gap-10 text-center">
          <Card raised padding="large" class="w-full text-start">
            <div class="grid grid-cols-2 gap-6">
              {s.stats.map((st) => <Stat {...st} />)}
            </div>
          </Card>
          <div class="flex flex-col gap-2">
            <p class="text-xl font-semibold">{s.title}</p>
            <p class="opacity-80">{s.text}</p>
          </div>
        </div>
      ))}
    </Carousel>
  </div>
</AuthShell>
```

## Add

```sh
npx @ava-ui/apogee add sign-up/split-carousel
```

This copies the page to `src/components/apogee/pages/sign-up/` with everything it uses: AuthShell, Button, Card, Carousel, FeaturedIcon, Input, Link, Stat. Render it from one of your routes, or use **Copy code** above.

## Accessibility

-   The page heading is the `h1`; the fields carry visible labels and `autocomplete` hints (`new-password` for new passwords, so password managers offer to generate one).
-   The carousel has a name (“What you get”), and its arrows and dots sit in one row under the slides.
-   The SSO button is a link to your identity provider; swap its `href` for your own.

## 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)[

CardA surface container for grouped content. Compose freely inside — heading, text, button, an optional media block.

](https://apogee.avaui.dev/docs/card)[

CarouselA horizontal scroll-snap track for browsing slides. Native scroll and swipe work with zero JS; arrows, dots, and autoplay are progressive enhancement.

](https://apogee.avaui.dev/docs/carousel)[

StatDisplays a labelled metric with an optional trend indicator. For dashboards and summary rows.

](https://apogee.avaui.dev/docs/stat)