Skip to main content
Browse docs

Marwes documentation

Get started with Svelte

Install Marwes for Svelte and render your first accessible component.

1. Install with the official CLI

The CLI installs @marwes-ui/svelte, wires the provider for supported Vite layouts, and runs diagnostics.

pnpm dlx @marwes-ui/cli init --adapter svelte

2. Render a public component

This is the same canonical fixture that the repository typechecks for Svelte.

<script lang="ts">
  import {
    Button,
    ButtonVariant,
    CheckboxField,
    EmailField,
    MarwesProvider,
    SubmitButton,
  } from "@marwes-ui/svelte"

  let email = $state("")
  let subscribed = $state(false)
</script>

<MarwesProvider>
  <EmailField
    label="Email"
    value={email}
    input={{
      placeholder: "you@example.com",
      oninput: (event: Event & { currentTarget: HTMLInputElement }) =>
        (email = event.currentTarget.value),
    }}
  />
  <CheckboxField
    label="Send me product updates"
    bind:checked={subscribed}
  />
  <Button variant={ButtonVariant.secondary}>Preview</Button>
  <SubmitButton>Save</SubmitButton>
</MarwesProvider>

3. Verify the app

A successful doctor run confirms the adapter import, rendered provider, and production build.

pnpm dlx @marwes-ui/cli doctor --run-build