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.

Compose Svelted requires Svelte 5 as a peer dependency and ships as an ES module. The setup has three steps: install the package, import a CSS baseline, and wrap your app with the theme and root providers. The whole process takes about two minutes.
The CSS baseline is required. Compose Svelted is layout-deterministic and relies on a neutral CSS environment. Without the baseline, layout behavior — including Column, Row, Box, Scaffold, and navigation containers — may vary between browsers or conflict with existing global styles. Do not skip this step.
1

Install the package

Compose Svelted is published to the GitHub npm registry under @danielito1996/compose-svelted. Install it alongside its peer dependency on Svelte 5.
npm install @danielito1996/compose-svelted
The package’s only peer dependency is svelte ^5.0.0. All other dependencies — including the Tailwind CSS that the library uses internally — are bundled and do not require any configuration from you.
2

Import the CSS baseline

Compose Svelted does not inject any global CSS automatically. You must explicitly import a baseline that establishes the layout contract the library depends on. There are two package exports and one manual fallback to choose from.Option A — Strict baseline (recommended for new projects)The strict baseline (baseline.css) applies border-box sizing universally, sets html, body, and #app to 100% width and height with no margin or padding, and locks overflow: hidden at the root. This mirrors Jetpack Compose’s model where the viewport is the layout root and scroll is always explicit.
// src/main.ts  (or src/app.ts / your entry point)
import "@danielito1996/compose-svelted/baseline.css";
Option B — Safe baseline (recommended for projects with existing styles)The safe baseline (baseline-safe.css) applies the same border-box and 100% root sizing but does not lock overflow globally, making it less likely to conflict with existing stylesheets.
// src/main.ts
import "@danielito1996/compose-svelted/baseline-safe.css";
Path B — Manual app.css approach (full control)If you manage your own global stylesheet and want no package-level CSS at all, ensure your app.css includes at minimum:
/* app.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
This satisfies the layout contract that Column, Row, Box, Surface, and Scaffold depend on.
3

Wrap your app with ComposeTheme and AppRoot

ComposeTheme injects Material 3 CSS design tokens (colors, typography, elevation, shapes) into the component tree. AppRoot is the top-level layout container that fills the viewport. Both must be present for the rest of the library to function correctly.
<!-- src/App.svelte -->
<script lang="ts">
  import {
    ComposeTheme,
    AppRoot,
    Surface,
    Text,
    Modifier,
  } from "@danielito1996/compose-svelted";
</script>

<ComposeTheme mode="system">
  <AppRoot>
    <Surface modifier={Modifier.fillMaxSize()}>
      <Text textStyle="bodyLarge">Hello, Compose Svelted!</Text>
    </Surface>
  </AppRoot>
</ComposeTheme>
ComposeTheme accepts a mode prop with three values:
ValueBehavior
"system"Follows the OS light/dark preference via prefers-color-scheme
"light"Always uses the light theme
"dark"Always uses the dark theme
You can also pass custom light and dark theme objects to override the default Material 3 color scheme:
<script lang="ts">
  import { ComposeTheme, AppRoot } from "@danielito1996/compose-svelted";
  import { myLightTheme, myDarkTheme } from "./theme";
</script>

<ComposeTheme light={myLightTheme} dark={myDarkTheme} mode="system">
  <AppRoot>
    <slot />
  </AppRoot>
</ComposeTheme>

​
Playground import path

The Compose Svelted playground aliases @danielito1996/compose-svelted directly to the library’s source (src/lib/index.ts) via vite.config.ts. All example code in this documentation uses @danielito1996/compose-svelted as the import path — exactly as it appears when consumed from npm — so playground and production code are identical. 
// Always import from the package name, never from relative paths
import { Column, Row, Modifier } from "@danielito1996/compose-svelted";

Build docs developers (and LLMs) love

Get started for freeTalk to us