Skip to content
PageSugar 4 components
Search components
Menu Site navigation
A little sugar for your next project

Good websites start
with great components.

Thoughtfully built Svelte components and website sections. Find your starting point. Copy the source. Make it yours.

Explore components Connect your agent
  • Svelte 5
  • Tailwind CSS
  • TypeScript

The collection

Your next starting point.

Small details. Complete sections. All yours to build on.

View all components

  • FAQ accordion

    A frequently asked questions section where each answer expands from an accessible disclosure button.

    • Section
    • No additional dependencies

  • Feature tabs

    A feature showcase section that switches between product capabilities using accessible tabs built on Bits UI.

    • Section
    • bits-ui ^2.0.0

  • Newsletter signup

    An email newsletter signup section with a labelled input and pending, success and error states, connected through a callback.

    • Section
    • Needs a service

  • Simple pricing grid

    A responsive grid of pricing plan cards with an emphasized recommended option and a link for each plan.

    • Section
    • No additional dependencies
01 /

Yours from the first copy.

Plain Svelte and Tailwind CSS. Copy the source into your project and change every detail. No library to keep in sync.

02 /

No hidden requirements.

Dependencies, browser behavior, and service requirements are listed up front. Know exactly what you’re adding.

03 /

An easier way to build.

Browse by hand or connect your coding agent over MCP. Get the same components, with the same complete source.

Meet your new workflow

You bring the idea. Your agent brings the pieces.

Give your coding agent access to the catalogue. Find the right component and bring its source straight into your project.

Connect with MCP
You

Add a simple pricing section with three plans.

Your agent
  1. search_components Finds “Simple pricing grid”
  2. get_component Checks what it depends on
  3. get_component_files Brings the source into your project

Pricing section added. Yours to edit.

See how it works

From the blog

A little behind the build.

All articles
  • 2 min read

    How palette tokens work

    Change a component's colours three ways, without editing its source. Variants, public CSS variables and private scoped variables, and how they fit together.

    • customization
    • tailwind
    • css-variables
  • 3 min read

    Why we publish components as source, not packages

    Copying a component's source into your project trades automatic upgrades for ownership. Here is why we think that is the right trade for website sections, and how we make it safe.

    • source-first
    • svelte
    • sveltekit
    • agents

Search components

Describe a section or control, such as “FAQ accordion” or “newsletter signup”.

Browse all components