Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/danielitoCode/compose_svelted/llms.txt

Use this file to discover all available pages before exploring further.

These examples demonstrate two production-ready login screen patterns built entirely with Compose Svelted components. The Simple Login follows a clean Material-style card layout centred on the viewport, while the Rich Login layers a full-screen background image behind a translucent overlay and a frosted-glass card — both using the same declarative component model.
The simple login screen uses a minimal set of components to produce a focused, accessible form. A Box centres everything on screen, a Surface provides the card background, and a Column stacks the header, form fields, and action button with consistent spacing.
<script>
  import {
    Alignment,
    Arrangement,
    Box,
    Button,
    ColorScheme,
    Column,
    Icon,
    Modifier,
    Row,
    Surface,
    Text,
    TextField,
    TextStyle,
  } from "@danielito1996/compose-svelted";

  let name = "";
  let pass = "";
</script>

<Box
  contentAlignment={Alignment.Center}
  modifier={Modifier.fillMaxSize().background(ColorScheme.Background)}
>
  <Surface color={ColorScheme.Surface}>
    <Column
      horizontalAlignment={Alignment.CenterVertically}
      verticalArrangement={Arrangement.spacedBy(20)}
      modifier={Modifier.padding(32)}
    >
      <!-- Header -->
      <Column
        horizontalAlignment={Alignment.CenterVertically}
        verticalArrangement={Arrangement.spacedBy(8)}
      >
        <Text textStyle={TextStyle.HeadlineMedium}>Bienvenido 👋</Text>
        <Text textStyle={TextStyle.BodyMedium}>
          Accede a tu cuenta para continuar
        </Text>
      </Column>

      <!-- Form -->
      <Column
        verticalArrangement={Arrangement.spacedBy(16)}
        modifier={Modifier.fillMaxWidth()}
      >
        <TextField
          value={name}
          onValueChange={value => (name = value)}
          label="Email"
        />
        <TextField
          value={pass}
          onValueChange={value => (pass = value)}
          label="Contraseña"
        />
      </Column>

      <!-- Action -->
      <Button modifier={Modifier.fillMaxWidth()}>
        <Row
          horizontalArrangement={Arrangement.spacedBy(10)}
          verticalAlignment={Alignment.CenterVertically}
        >
          <Icon
            painter="https://cdn.jsdelivr.net/npm/@mdi/svg/svg/login.svg"
            tint={ColorScheme.OnPrimary}
            modifier={Modifier.size(18)}
          />
          <Text color={ColorScheme.OnPrimary}>Iniciar sesión</Text>
        </Row>
      </Button>

      <!-- Footer -->
      <Text textStyle={TextStyle.BodyMedium}>
        compose-svelted · UI declarativa
      </Text>
    </Column>
  </Surface>
</Box>
How each piece fits together:
ComponentRole
Box with contentAlignment={Alignment.Center}Full-screen centering container; fills the viewport and places its single child in the exact middle
Modifier.fillMaxSize().background(ColorScheme.Background)Stretches the Box to the full viewport and paints it with the active theme’s background colour
SurfaceElevated card that inherits ColorScheme.Surface; provides the card’s background and Material elevation
Column with Arrangement.spacedBy(20)Stacks header, form, and button vertically with 20 px gaps between each group
TextField with onValueChangeControlled text input — each keystroke calls the handler and updates the bound $state variable
Button + Row insideThe action button uses an inner Row to align an Icon and Text side by side with a 10 px gap
Both screens are taken directly from the Compose Svelted playground and represent real-world usage patterns. You can find the originals at playground/src/samples/CustomLogin.svelte and playground/src/samples/ProfesionalLogin.svelte in the repository.
Wrap the Surface card in AnimatedVisibility to animate it appearing when the page loads. Import fadeIn and fadeOut alongside AnimatedVisibility and bind the visible prop to a boolean — set it to true so the enter animation plays immediately on mount:
<script>
  import {
    AnimatedVisibility,
    fadeIn,
    fadeOut,
  } from "@danielito1996/compose-svelted";

  let showLogin = true;
</script>

<AnimatedVisibility visible={showLogin} enter={fadeIn()} exit={fadeOut()}>
  <Surface ...>
    <!-- form fields -->
  </Surface>
</AnimatedVisibility>
See ProfesionalLoginWithAnimation.svelte in the playground for a complete working example.

Build docs developers (and LLMs) love

Get started for freeTalk to us