Single-File Components

In React a “component” is a JavaScript file containing a function that returns JSX, usually paired with a separate CSS file or CSS-in-JS setup. In Svelte a component is a single .svelte file that puts all three concerns — logic, markup, and styles — in one place. The structure will feel instantly familiar if you have ever written plain HTML.

The three sections

A .svelte file has exactly three optional sections, in any order (convention is script → markup → style):

<script>
  // Component logic — reactive state, props, functions
</script>

<!-- Markup — the template, like JSX but real HTML -->

<style>
  /* Scoped CSS — automatically applies only to this component */
</style>

Only the markup section is required. A valid Svelte component can be a single <p>Hello</p> with no <script> or <style> at all.

React file vs Svelte file

// UserCard.jsx
import styles from './UserCard.module.css';

export default function UserCard({ name, role }) {
  return (
    <article className={styles.card}>
      <h2 className={styles.name}>{name}</h2>
      <p className={styles.role}>{role}</p>
    </article>
  );
}

<!-- UserCard.svelte -->
<script>
  let { name, role } = $props();
</script>

<article class="card">
  <h2 class="name">{name}</h2>
  <p class="role">{role}</p>
</article>

<style>
  .card { border: 1px solid #ccc; border-radius: 8px; padding: 1rem; }
  .name { margin: 0; font-size: 1.25rem; }
  .role { margin: 0; color: #666; }
</style>

Notice the differences:

No separate UserCard.module.css file — styles are in the same file.
className becomes class (real HTML attribute).
Props are declared with $props() instead of function arguments.
No export default — the file itself is the export.
No JSX return — the markup is just… there.

Try it: a Svelte single-file component

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let { greeting = 'Hello' } = $props();
  let name = $state('React developer');
</script>

<div class="card">
  <p class="greeting">{greeting}, <strong>{name}</strong>!</p>
  <input bind:value={name} placeholder="Change my name" />
</div>

<style>
  .card {
    border: 2px solid #FF3E00;
    border-radius: 8px;
    padding: 1.25rem;
    font-family: sans-serif;
  }
  .greeting { font-size: 1.2rem; margin: 0 0 0.75rem; }
  input { padding: 0.3rem 0.6rem; font-size: 1rem; width: 100%; box-sizing: border-box; }
</style>