compose_svelted

Svelted

Compose-like UI for Svelte
Explicit composition · Immutable modifiers · Theme-driven

---

What is Svelted?

Svelted is a UI toolkit for the web inspired by Jetpack Compose and built natively on top of Svelte.

It brings the Compose mental model to the web:

• Explicit UI composition
• Immutable and chainable Modifiers
• Theme-first design
• No virtual DOM abstractions
• No hidden styling magic

---

Core Principles

🧩 Composition over configuration

UI is built by composing small, predictable components.

🧱 Modifiers

Layout, drawing, interaction and behavior are controlled through immutable modifiers.

Modifier
  .padding(16)
  .fillMaxWidth()
  .background(ColorScheme.Surface)

🎨 Theme-driven

Design tokens come from the theme, not from hardcoded styles.

---

Components (v0.0.1)

Layout

• Column, Row, Box, Spacer
• LazyColumn (experimental)
• LazyRow (experimental)

Foundation

• Surface, Text, Image, Icon

Inputs

• TextField
• OutlinedTextField

Buttons

• Button, TextButton
• OutlinedButton, TonalButton
• IconButton

---

Quick Example

<ComposeTheme mode="system">
  <AppRoot>
    <Surface modifier={Modifier.fillMaxSize().padding(32)}>
      <Column>
        <Text textStyle="titleLarge">Hello Compose</Text>
        <Text>This is Svelted.</Text>
      </Column>
    </Surface>
  </AppRoot>
</ComposeTheme>

---

Get Started

👉 Getting Started

---

Examples

👉 Example

---

Built with ❤️ for developers who value clarity and composable UI.