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.

In this guide you will build a simple login form — a Column layout containing a headline, a body label, an email TextField, a password TextField, and a Button that handles the submit action. Along the way you will see how Modifier chains work, how Text text-style tokens map to Material 3 typography, and how every part of the UI composes from the same small set of primitives imported from a single package. Before continuing, make sure you have completed the Installation steps and that your app is wrapped with ComposeTheme and AppRoot.
1

Create the app shell

Every Compose Svelted screen lives inside ComposeTheme and AppRoot. If you have already added these to your root App.svelte, create a new component file for the login screen — for example, LoginScreen.svelte. Start with the script block and import the components you need:
<!-- src/LoginScreen.svelte -->
<script lang="ts">
  import {
    Column,
    Text,
    TextField,
    Button,
    Modifier,
    Arrangement,
  } from "@danielito1996/compose-svelted";

  let email = $state("");
  let password = $state("");

  function handleLogin() {
    console.log("Login attempt:", email);
  }
</script>
All imports come from the single @danielito1996/compose-svelted package entry point. Svelte 5 runes ($state) are used for local reactive state — no stores or external state management required for simple screens.
2

Add a Column layout with padding

Column is a vertical flex container, equivalent to Jetpack Compose’s Column. Apply sizing and spacing through the modifier prop using the immutable Modifier chain.
<Column
  modifier={Modifier.fillMaxSize().padding(32)}
  verticalArrangement={Arrangement.Top}
>
  <!-- children go here -->
</Column>
Modifier.fillMaxSize() expands the column to fill its parent (the AppRoot viewport). .padding(32) adds 32 px of padding on all sides. The modifier chain is immutable — each call returns a new ModifierImpl instance — so you can safely compose and reuse modifier values.To add vertical spacing between children, use Arrangement.spacedBy(n):
<Column
  modifier={Modifier.fillMaxSize().padding(32)}
  verticalArrangement={Arrangement.spacedBy(16)}
>
  <!-- children are separated by 16 px gaps -->
</Column>
3

Add Text components with typography tokens

Text renders a <p> element styled by a Material 3 typography token passed to the textStyle prop. The available tokens map directly to the Material 3 type scale:
<Text textStyle="headlineMedium">Welcome back</Text>
<Text textStyle="bodyLarge">Sign in to continue.</Text>
The full set of TextStyleToken values available for textStyle is:
// Display
"displayLarge" | "displayMedium" | "displaySmall"

// Headline
"headlineLarge" | "headlineMedium" | "headlineSmall"

// Title
"titleLarge" | "titleMedium" | "titleSmall"

// Body
"bodyLarge" | "bodyMedium" | "bodySmall"

// Label
"labelLarge" | "labelMedium" | "labelSmall"
You can also override the text color with the color prop, which accepts any ColorToken (e.g., "onSurface", "primary") or a raw CSS color string.
4

Add TextField components for email and password

TextField is a filled Material 3 text field with a floating label. Bind it to your state with value and onValueChange:
<TextField
  label="Email"
  placeholder="[email protected]"
  value={email}
  onValueChange={(v) => (email = v)}
  modifier={Modifier.fillMaxWidth()}
/>

<TextField
  label="Password"
  placeholder="••••••••"
  value={password}
  onValueChange={(v) => (password = v)}
  modifier={Modifier.fillMaxWidth()}
/>
Modifier.fillMaxWidth() makes each field stretch to the full width of its parent Column. If you prefer the outlined variant, swap TextField for OutlinedTextField — it accepts the same props.
5

Add a Button with onClick

Button renders a filled Material 3 button. Pass a callback to onClick and place the label text as a slot child:
<Button
  onClick={handleLogin}
  modifier={Modifier.fillMaxWidth()}
>
  Sign in
</Button>
Use the modifier prop for sizing and spacing. The color and onColor props accept ColorToken values to customize the button’s background and label color against the active theme.

​
Complete example

Here is the full LoginScreen.svelte component assembled from the steps above, ready to drop into any Compose Svelted project: 
<!-- src/LoginScreen.svelte -->
<script lang="ts">
  import {
    Column,
    Text,
    TextField,
    Button,
    Modifier,
    Arrangement,
  } from "@danielito1996/compose-svelted";

  let email = $state("");
  let password = $state("");

  function handleLogin() {
    console.log("Login attempt:", email);
  }
</script>

<Column
  modifier={Modifier.fillMaxSize().padding(32)}
  verticalArrangement={Arrangement.spacedBy(16)}
>
  <Text textStyle="headlineMedium">Welcome back</Text>
  <Text textStyle="bodyLarge">Sign in to continue.</Text>

  <TextField
    label="Email"
    placeholder="[email protected]"
    value={email}
    onValueChange={(v) => (email = v)}
    modifier={Modifier.fillMaxWidth()}
  />

  <TextField
    label="Password"
    placeholder="••••••••"
    value={password}
    onValueChange={(v) => (password = v)}
    modifier={Modifier.fillMaxWidth()}
  />

  <Button
    onClick={handleLogin}
    modifier={Modifier.fillMaxWidth()}
  >
    Sign in
  </Button>
</Column>
And the root App.svelte that renders it inside the required providers: 
<!-- src/App.svelte -->
<script lang="ts">
  import { ComposeTheme, AppRoot } from "@danielito1996/compose-svelted";
  import LoginScreen from "./LoginScreen.svelte";
</script>

<ComposeTheme mode="system">
  <AppRoot>
    <LoginScreen />
  </AppRoot>
</ComposeTheme>

​
Next steps

Modifier API

Learn every method in the Modifier chain: padding, size, clipping, scroll, weight, and more.

Column, Row & Box

Explore the three layout primitives and their alignment and arrangement options.

Buttons

Discover the full button family: Button, TextButton, OutlinedButton, IconButton, and more.

Build docs developers (and LLMs) love

Get started for freeTalk to us