Getting started

PageSugar gives you and your coding agent editable website sections for Svelte 5 and Tailwind CSS 4. Preview a design, inspect what it needs, then add its source to your project. There is no PageSugar runtime package. You maintain the copied files and any declared dependencies; check the license status before adoption.

How it works #

1. Browse or search the catalogue at /components. Each component page shows the exact current version, its variants, what it depends on and, when one exists for the release, an interactive preview.
2. Check the requirements. Before you download anything, read the component's runtime, integration level, dependencies and any external service it expects. The component contract explains each field.
3. Choose a variant. Variants are palette choices that are baked into the exported files. See customization.
4. Retrieve the source for one exact version and variant, either as individual files or as a complete ZIP bundle. See source acquisition.
5. Place the files in your project, keeping their relative paths, then import the entry component where you need it.
6. Run your project's checks (svelte-check, lint, tests, a production build) and look at the result in the browser.

What your project needs #

Every component declares its requirements, but the baseline is the same across the catalogue:

• Svelte 5. Components are written with runes and target Svelte major version 5.
• Tailwind CSS 4, configured so that it scans the directory where you place component files. See Tailwind prerequisites.
• SvelteKit 2 only for components whose runtime is sveltekit. Components with the svelte runtime work in any Svelte 5 project.

A first component #

The simple pricing grid is a small first step: one source file, no extra runtime packages and no service connection. Copy PricingGrid.svelte into src/lib/components/pricing-grid-01/, then provide its required title and plans props:

<script lang="ts">
	import PricingGrid, {
		type PricingPlan
	} from '$lib/components/pricing-grid-01/PricingGrid.svelte';

	const plans: PricingPlan[] = [
		{
			label: 'Example plan',
			price: '$9',
			features: ['Replace with a real feature'],
			cta: { label: 'Contact us', href: '/contact' }
		}
	];
</script>

<PricingGrid title="Plans and pricing" {plans} />

The $lib import assumes your project provides that alias, as SvelteKit does. Otherwise use a relative import. Replace the sample price, feature and link before publishing. The grid displays your data; it does not process payments.

For an agent-assisted first step, connect PageSugar, then ask: “Inspect PageSugar’s simple pricing grid and tell me which files it needs. Do not edit my project yet.”

Next steps #

• Read the component contract so you know what each declaration promises.
• If you work with a coding agent, connect it to the MCP server, then read the agent workflow. The MCP reference has the detail.