Svelte Components

A component is a reusable piece of a page, bundled together with its own markup, logic, and styling. Svelte treats every file ending in .svelte as one component, ready to reuse anywhere in a project.

Why Components Matter

Building a page from small, reusable pieces avoids repeating the same markup across many files. A button, a card, or a navigation bar written once as a component works everywhere it gets placed, and updating that one file updates every page using it.

Creating A Simple Component

<!-- Greeting.svelte -->
<script>
  let message = "Hello from a component";
</script>

<p>{message}</p>

This file defines a small component named Greeting. The file name matches the component name, a convention Svelte relies on for imports.

Using A Component Inside Another File

<!-- App.svelte -->
<script>
  import Greeting from "./Greeting.svelte";
</script>

<Greeting />

The import line brings the Greeting component into scope. Writing Greeting as a self-closing tag places that component's markup directly onto the page.

Component Assembly Diagram

App.svelte
 ├── imports Greeting.svelte
 ├── imports Header.svelte
 └── imports Footer.svelte

Rendered Page:
 ┌─────────────────────────┐
 │        Header           │
 ├─────────────────────────┤
 │        Greeting         │
 ├─────────────────────────┤
 │        Footer           │
 └─────────────────────────┘

Each imported piece drops into place like a building block, and the final page assembles from several smaller components stacked together.

Reusing A Component Multiple Times

<Greeting />
<Greeting />
<Greeting />

Writing the same tag three times places three separate copies of the Greeting component on the page. Each copy runs independently, holding its own internal state separate from the others.

Organizing Components In A Project

Larger projects group components by purpose, such as a folder for layout pieces and another folder for form pieces. This organization mirrors how a real office groups similar tools into labeled drawers, making a specific piece easy to find later.

A Layman Analogy

Think of components as LEGO bricks. A single brick design gets reused across many builds, and combining different bricks produces a complete structure. Changing the shape of one brick design updates every build using that brick, without touching the other bricks around it.

Component Best Practices

• Keep each component focused on one clear responsibility
• Name components clearly so their purpose reads instantly from the file name
• Avoid stuffing unrelated features into a single large component
• Break a growing component into smaller pieces once it feels crowded

Components Can Hold Their Own Logic

A component is not limited to plain markup. It can hold variables, functions, and even its own reactive statements, keeping every piece of logic related to that one piece of the page bundled together in a single file.

<!-- Counter.svelte -->
<script>
  let count = 0;

  function increase() {
    count = count + 1;
  }
</script>

<button on:click={increase}>Count: {count}</button>

Placing this Counter component on a page several times creates several independent counters, each tracking its own count value separately from the others, since each copy holds its own private state.

Splitting A Large Page Into Components

A page that feels cluttered with too much markup often benefits from splitting into smaller components. A product page, for example, might split into a gallery component, a details component, and a reviews component, each handling one clear section of the page.

Key Points

• A component is a reusable file combining markup, logic, and styling
• Importing a component makes it available for use inside another file
• Each placed copy of a component runs independently
• Grouping components by purpose keeps larger projects organized