Pages & Components

Pages are server-rendered using a component tree system. Each page has a name, path, metadata (SEO, favicons), and sections containing nested components.

Page Structure

pages: - name: home path: / meta: title: "My App - Home" description: "Welcome to my application" openGraph: title: "My App" description: "A Sovrium-powered application" image: "/og-image.png" sections: - type: section props: className: "py-20 bg-gray-900" children: - type: h1 content: "Welcome" - type: paragraph content: "Built with Sovrium"

63 Component Types

Components form a recursive tree — each can have type, content, props, and children.

Layout

sectioncontainerflexgriddivspanheaderfooternav

Typography

h1h2h3h4h5h6paragraphblockquote

Navigation & Actions

linkbuttonbreadcrumbpaginationdropdown

Media

imagevideoaudioiconiframeembedfigurefigcaption

Form Elements

forminputtextareaselectoptionlabel

Data Display

tabletheadtbodytfoottrthtdulolli

Interactive

accordiontabstabmodaltooltipprogressrating

Display

cardbadgeseparatorbannerheromarqueeavatarhr

Interactions

Components support 4 interaction types via the interactions property: hover (transform, opacity, scale, shadow changes), click (navigation, scroll, toggle), scroll (parallax, fade-in, sticky behavior), and entrance (animation on first view with delay and duration).