Svelte API

Import components from @page-sections/svelte. The public components are listed below. Component props are documented on the linked pages; this index shows where to start, without duplicating the full reference.

Export	Purpose / required props	Reference
`ContentPage`	Main content; page	Pages
`PageShell`	Shared theme/mode; none	Pages
`Section`	General content region; section	Section and grids
`ContentGrid`	Responsive block grid; none	Section and grids
`ContentBlock`	Explicit grid span; none	Section and grids
`SectionSurfaceGroup`	Adjacent background corners; none	Surface groups
`HeroSection`	Prominent copy/image/actions; section	HeroSection
`RichTextSection`	Markdown, plain text or blocks; section	RichTextSection
`RichTextContent`	Text without a section wrapper; content	RichTextSection
`InlineTextContent`	Escaped inline runs; text	RichTextSection
`Actions`	Native action links; optional actions	Panels
`ContentPanel`	Reusable inset panel; no required props	Panels
`PanelSection`	Panel with section metadata; section	Panels
`ImageSection`	Image with optional text; section	ImageSection
`VideoSection`	HTML5/YouTube with optional text; section	VideoSection
`CardGridSection`	Responsive card collection; section, list	CardGridSection
`CarouselSection`	Horizontal card collection; section, list	CarouselSection
`Card`	Standalone article; item	Card and Image
`Image`	Shared picture/img renderer; image	Card and Image
`Navigation`	Independent menu and satellites; none	Navigation
`MainMenu`	Recursive native menu; items	Navigation
`ButtonGroup`	Labelled controls/links; items, label	Navigation
`Breadcrumbs`	Site ancestry; items	Breadcrumbs and index
`SectionNavigation`	Explicit anchor list; items	Breadcrumbs and index
`Sections`	Data-driven dispatcher; sections	Data models
`CodeBlock`	Standalone source presentation; code	Code
`CodeSection`	Source with section metadata; section	Code

Props and snippets

Svelte 5 snippets are used instead of named legacy slots. Navigation has menu/brand/left/right/tools/settingsIcon/menuIcon snippets. Card has media(item)/surface(item)/children(item); the collections have media(item)/itemContent(item). CardGridSection also has surface(item) and a complete card(item, configuration) replacement. Generic item subtypes are preserved. Section, ContentPage, PageShell, ContentGrid, ContentBlock, SectionSurfaceGroup, HeroSection, ImageSection and VideoSection accept ordinary children snippets.

RichTextSection and Sections have no children prop. Section forwards ordinary HTMLElement attributes except id/children; ContentGrid and ContentBlock forward div attributes. ContentPage forwards main attributes (including id, lang and ARIA attributes), except style; use theme and class for styling. Card also forwards HTMLElement attributes, including class and event callbacks. Other components do not accept general class/style or arbitrary HTML attributes. Configure them through documented props, section metadata and CSS variables.

Most predefined components accept section: Omit<TheirSectionData, 'type'>. CardGridSection and CarouselSection instead take shared SectionDefinition plus separate list/configuration props. type belongs to serialized sections rendered by Sections, not to a required declarative prop.

Types and styles

The root export includes export type * from '@page-sections/core' and the Svelte-specific CardElements<T> type (item, root, surface, media, copy, title). It does not re-export core runtime classes/functions/constants. Component prop interfaces are not separately named exports; use Svelte's ComponentProps where applicable or the shared data interfaces.

Shared styles are exported through @page-sections/svelte/styles.css. The optional @page-sections/svelte/highlight entry exports highlightCode; install its Shiki peer to use it, preferably at build/server time. No internal component file, context symbol or generated CSS path is a supported deep import. See Installation for which components load shared CSS themselves.

Rendering contract

These are Svelte source components compiled by the consuming toolchain. SSR requires host support. Text, native links and responsive layouts do not require hydration; button callbacks and reactive updates do. There are no routing, fetching, CMS, image-processing or automatic SSR configuration APIs.

SidebarNavigation renders a recursive site tree with current-page markers and expandable ancestors. Pass it as ContentPage's leftSidebar snippet. ContentPage's showContentMenu flag supplies the separate automatic right menu; footer provides a slot for reading-order links. Navigation's itemIcon snippet supplies application-owned icons.

Heading components

Heading accepts text, level (HeadingLevel, default 2), size (HeadingSize, default m), id, eyebrow and introduction. It renders typography only. HeadingSection accepts section: Omit<HeadingSectionData, 'type'> and adds section layout, surface and registration. See Headings.

ContentPage renders the sections supplied as children. Place HeadingSection or HeroSection directly in that content and set headingLevel: 1 for the page title. SidebarNavigation accepts a disclosureIcon snippet for its disclosure chevron; the website supplies Lucide.