Getting started

One package, one page. Start in an existing Svelte 5 or SvelteKit application.

1. Install the package

bash

npm install @page-sections/svelte

2. Add your content

Use this in App.svelte, or in src/routes/+page.svelte with SvelteKit. The components include their styles.

svelte

<script>
  import { ContentPage, HeadingSection, Section } from '@page-sections/svelte';
</script>

<ContentPage page={{ title: 'Hello, Page Sections' }}>
  <HeadingSection section={{ id: 'title', title: 'Hello, Page Sections', headingLevel: 1 }} />
  <Section section={{ id: 'welcome', title: 'Welcome',
    headline: 'Your content starts here',
    background: { color: 'standard', size: 'standard' } }}>
    <p>Write ordinary HTML inside responsive sections.</p>
  </Section>
</ContentPage>

3. Make it yours

Add sections, configure your page layout and adapt the theme.

The installation reference covers requirements and framework setup. For a complete starting point, explore the minimal demo.