Page Sections · Svelte 5
Give your ideas a place.
A Svelte 5 component library for content-driven websites. Build portfolios, product pages and documentation from reusable sections that share one responsive layout system.
From content to a complete page.
Page Sections brings the structure of a website into a small set of composable components: a page contains sections, sections arrange text, images, cards and code. Navigation, spacing, surfaces and responsive grids follow the same layout rules.
Write your content directly in Svelte and HTML, or pass structured data from JSON files and your own CMS. Use it in Svelte or SvelteKit, from a single landing page to a growing publication. You choose the content and visual identity; the components handle the layout.
The common work, already connected.
A consistent foundation with room for your own design.
One responsive layout system
Pages, grids and cards share content widths and spacing. Layouts adapt to their containers, including narrow columns on wide screens.
Sections that work together
Compose heroes, rich text, panels, images, video, card grids, carousels and code examples. Combine them without rebuilding the page structure.
Your content, your source
Start with ordinary Svelte and HTML. Use serializable models when your content comes from JSON or a CMS, and add custom sections when you need them.
Content before JavaScript
With SSR or prerendering, text, links and native navigation arrive as HTML. JavaScript adds interactions to an already readable page.
A foundation for your brand
Use light and dark themes, standard and muted surfaces, and shared CSS variables to make the same components feel at home in your design.
Bring your own application
Use the library in plain Svelte or SvelteKit. No required CSS framework, CMS or router; syntax highlighting is an optional addition.
See it. Try it. Build it.
01 / Try a layout
Make room for your content
Change card sizes, surfaces and image proportions. See the result and the code together.
02 / Explain an idea
Code belongs in the story
Present readable, highlighted examples on their own or alongside text.
03 / Compose freely
Start with HTML. Grow with data.
Use components directly or render serializable content from your own CMS.
The documentation is a working example.
Every page on this website uses the same components you install. Navigation, reading layouts, cards and code examples all come from Page Sections.
No special renderer, router or CSS framework is required. Content and links are available before JavaScript; interactions enhance them when it loads.