Quick reference

The shortest path to a complete application with @dg/ui. Read this page first; each entry links to the reference that owns the details.

01Shell

Compose the shell once, in the root layout. Routes supply sections only.

<script>
  import "@dg/ui/styles.css";
  import { page } from "$app/state";
  import { Page, SkipLink, Header, Main, Footer, Analytics } from "@dg/ui";

  /** @type {{ children?: import('svelte').Snippet }} */
  let { children } = $props();
</script>

<Page lang="en">
  <SkipLink />
  <Header app="Example" links={[{ label: "Home", href: "/" }]} path={page.url.pathname} />
  <Main>{@render children?.()}</Main>
  <Footer identity="Example" />
  <Analytics {page} />
</Page>

lang (en or fr) translates every built-in label and should match <html lang>. Page also restores the saved theme before first paint. Analytics measures visits once the host serves its configuration, and adds the privacy control to Footer. The new application guide covers packages, configuration, error routes and hosting.

02Compose a route

Need	Use
Page title and metadata	`Heading`
Framed block of content	`Section`, with `SectionHead` for its numbered label; headings inside reading text are plain h2–h6 in `.formatted`
Reading text	`<article class="formatted constrained-width">` from typography and prose
Authored serif writing	`<div class="formatted prose constrained-width">` from typography and prose
Equal cells	`Grid`
Horizontal collection	`Cards` of `Card`
Action, or link as a button	`Button`, with `href` for a link
Icon-only action	`IconButton`
Modal panel, drawer or media view	`Dialog`
Panels within one page	`Tabs`
Quotation	`Quote`
Error route	`ErrorPage`
Conversation	Chat integration
Forms	Native elements with the field classes
Groups, spacing, alignment	`.stack`, `.row` and their modifiers from stack and row
Complete page patterns	Collection, form

03Tokens by role

Text: --text-prominent for headings and links, --text for body text, --text-subtle for supporting text, --text-muted for metadata.
Surfaces and lines: --background, --background-subtle, --background-prominent; --border, --border-subtle, --border-prominent.
Accent and status: --accent, --accent-subtle; --feedback-error, --feedback-success, --feedback-warning, --feedback-info, always with explicit text.
Spacing by relationship: layout for independent blocks and the frame, content for the parts of one block, control within a control group (a label and its field, a row of buttons). Prefer component defaults and the stack and row classes; the --space-1 to --space-8 scale covers component-specific values.
Responsive: @media (--narrow), @media (--medium) and @media not (--medium) in component styles.

The foundation pages list every token and its role.

04Rules

One Page, one Main and SkipLink first in the root layout; routes add sections, never another Page or Main.
Choose heading levels for document hierarchy, not for size.
Read a component's reference before using a prop; never invent props, classes or tokens. pnpm check type-checks application code and rejects unknown props and values.
A parent owns the spacing between its children; each child owns its inset. Start from component defaults.
Use native HTML for ordinary controls and links.
Write content and content names in the audience language; Page's lang covers the built-in labels.
The application owns data, requests, validation and persistence, and implements the applicable states of the state contract.
Style in the owning component. Its styles override the foundations; never target another component's internal classes or --_ variables.
Add no token for a one-off value; keep it local.
Verify with the workspace checks and build, then follow accessibility verification.

Markdown source: getting-started/quick-reference