Skip to content
PageSugar 111 components
Search components
Menu Site navigation

Website components for AI coding agents

Your agent builds fast. Now give it good taste.

Give your coding agent a considered starting point: editable website sections, delivered as source over MCP. Your agent fits them to your project.

Connect your agent Browse components
Made for your stack
  • Svelte 5
  • Tailwind CSS 4
  • TypeScript
Setup guides for

The collection

Your next starting point.

Pricing, features, FAQs and signup sections. Preview the design, then inspect the details.

View all components

  • Combobox

    A select-only combobox: type to filter a popup list by label or alternate names, choose with the arrow keys and Enter, and post the value. Local filtering by default, or a debounced, abortable onSearch.

    • Control
    • bits-ui ^2.19.3

  • Custom select

    A styled select whose options carry an icon, a label and a line of detail, such as a workspace or a delivery method. Keyboard and typeahead per the APG select-only combobox; posts through a form input.

    • Control
    • bits-ui ^2.19.3

  • Inline editable text

    Shows a saved value as text with an Edit button; editing swaps in an input or textarea in the same box with explicit Save and Cancel. An async onSave that can fail keeps the draft, and blur never saves.

    • Control
    • No additional dependencies

  • Native select

    A styled native select with a visible label, Required or Optional marker, hint, placeholder, option groups and a consumer-set error. The browser's own picker opens it, and it submits before any script runs.

    • Control
    • No additional dependencies

  • Checkbox

    A native checkbox with a drawn box, a label, optional help text and an error, plus a dash for select-all rows. The box stays level with the label's first line however far it wraps.

    • Control
    • No additional dependencies

  • Choice cards

    Radio or checkbox choices set as cards in a fieldset: title, description, a price at the foot, optional media and badge. Native inputs, so it submits without JavaScript; rows share their lines through subgrid.

    • Control
    • No additional dependencies

What your agent gets.

  • Source, not a dependency.

    Your agent copies the files for an exact version, with a usage example and a typed prop table. Nothing to install from us, and nothing that calls back.

  • Built to be restyled.

    Colours sit on named CSS variables and the words arrive through props, so your agent can fit one pricing section to a bakery or a clinic.

  • Requirements up front.

    Each component declares its packages, services and what you must supply. A signup form hands the address to your handler.

Meet your new workflow

You bring the idea. Your agent brings the pieces.

Ask for a section, let your agent inspect its requirements, then retrieve an exact version. Your agent adds the files, adapts the content and checks the result in your project.

Connect your agent

Illustrative workflow · after connection

You

Use PageSugar to add a pricing section with three plans.

Your agent
  1. search_components Finds the closest matches
  2. get_component Checks dependencies and limits
  3. get_component_files Returns source and a file manifest
  4. Your agent · integrate Adds the complete files and adapts the content
  5. Your agent · check Runs project checks and reviews the page in a browser

Pricing section integrated and checked.

Read the MCP reference

From the blog

A little behind the build.

All articles

  • How palette tokens work

    Choose an exported palette, override supported CSS variables, or edit the source. A practical look at the pricing grid’s colour tokens.

    • customization
    • tailwind
    • css-variables
    3 min read

  • Why we publish components as source, not packages

    Editable source gives you room to adapt a website section, with maintenance in your hands. Here is how requirements, exact versions and file receipts help.

    • source-first
    • svelte
    • sveltekit
    3 min read