compose_svelted

Getting Started

This guide helps you go from installation to your first screen using Svelted.

Installation

npm install compose-svelte

or

pnpm add compose-svelte

⚠️ CSS Baseline (Required)

Compose Svelted assumes a neutral CSS baseline.

You MUST include the following reset in your app:

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

Basic Setup

Wrap your app with ComposeTheme and AppRoot.

<script>
  import {
    ComposeTheme,
    AppRoot,
    Surface,
    Text,
    Modifier
  } from "compose-svelte";
</script>

<ComposeTheme mode="system">
  <AppRoot>
    <Surface modifier={Modifier.fillMaxSize()}>
      <Text>Hello Svelted</Text>
    </Surface>
  </AppRoot>
</ComposeTheme>

Layout Basics

Column

<Column modifier={Modifier.padding(16)}>
  <Text textStyle="titleLarge">Title</Text>
  <Text>Body text</Text>
</Column>

Row

<Row horizontalArrangement={Arrangement.spacedBy(8)}>
  <Text>Left</Text>
  <Text>Right</Text>
</Row>

Box

<Box modifier={Modifier.size(120)}>
  <Text modifier={Modifier.align(Alignment.Center)}>
    Centered
  </Text>
</Box>

TextField

<TextField
  label="Email"
  placeholder="you@email.com"
  value={email}
  onValueChange={(v) => email = v}
/>

<OutlinedTextField
  label="Email"
  value={email}
  onValueChange={(v) => email = v}
/>

Modifiers

Modifier
  .padding(16)
  .fillMaxWidth()
  .clip(RoundedCornerShape(12))

Next Steps