Preview

Conversion surface

Signup forms that sell while they capture.

Split-Screen Signup compositions use Grid, Input, Button, Marquee, Link, and Checkbox for conversion-optimized registration pages.

2

form variants

3

proof modules

2

auth methods

Default

Email signup

Clean form with validation, terms checkbox, and rotating testimonial strip.

Google SSO

SSO button prominence with email fallback and trust badge row.

Optimized for: Trial conversion, product-led growth, and enterprise signup funnels.
Best paired with: Logo clouds, testimonial sections, and pricing tables.

Included patterns

• 50/50 grid layout

• Rotating social proof marquee

• Form validation states

• Terms and privacy checkbox

Variants

Email signup

Left: email/password form. Right: rotating social proof marquee.

Google SSO variant

SSO-first layout with email fallback and trust indicators.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Badge, Button, Card, Container, DescriptionList, Fieldset, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Marketing</Badge>
    <Heading level={1}>Signup forms that sell while they capture.</Heading>
    <Text as="p">Split-Screen Signup compositions use Grid, Input, Button, Marquee, Link, and Checkbox for conversion-optimized registration pages.</Text>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Use signup starter</Button>
        <Button variant="outline">See auth patterns</Button>
    </Stack>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">form variants</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">proof modules</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">auth methods</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Grid columns={2} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">Default</Badge>
            <Heading level={3}>Email signup</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Clean form with validation, terms checkbox, and rotating testimonial strip.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Google SSO</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">SSO button prominence with email fallback and trust badge row.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Optimized for</DescriptionList.Term>
        <DescriptionList.Description>Trial conversion, product-led growth, and enterprise signup funnels.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Best paired with</DescriptionList.Term>
        <DescriptionList.Description>Logo clouds, testimonial sections, and pricing tables.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• 50/50 grid layout</Text>
        <Text as="p">• Rotating social proof marquee</Text>
        <Text as="p">• Form validation states</Text>
        <Text as="p">• Terms and privacy checkbox</Text>
      </Fieldset.Content>
    </Fieldset.Root>
  </Stack>
</Container>