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](/docs/license) before adoption.

## How it works

1. **Browse or search** the catalogue at [/components](/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](/docs/component-contract) explains each field.
3. **Choose a variant.** Variants are palette choices that are baked into the exported files. See [customization](/docs/customization).
4. **Retrieve the source** for one exact version and variant, either as individual files or as a complete ZIP bundle. See [source acquisition](/docs/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](/docs/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](/components/pricing-grid-01) 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:

```svelte
<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](/mcp), then ask: “Inspect PageSugar’s simple pricing grid and tell me which files it needs. Do not edit my project yet.”

> [!NOTE]
> Preview content such as names, prices and testimonials comes from fixtures. Replace it with your own content before you publish anything.

## Next steps

- Read the [component contract](/docs/component-contract) so you know what each declaration promises.
- If you work with a coding agent, [connect it to the MCP server](/mcp), then read the [agent workflow](/docs/agents). The [MCP reference](/docs/mcp) has the detail.