Building Custom UI Components in Svelte

Svelte is a modern JavaScript framework that compiles components into highly efficient vanilla JavaScript at build time. One of its standout features is its ability to simplify UI development without the overhead of a virtual DOM.

In this article, we’ll walk through how to build custom UI components using Svelte, from basics to a usable UI library component, complete with styling and reactivity.

Step-by-Step Tutorial with Code Snippets

1. Setting Up a Svelte Project

First, initialize a new Svelte project using the official template:

npm create vite@latest my-svelte-app -- --template svelte
cd my-svelte-app
npm install
npm run dev

2. Creating a Reusable Button Component

Let’s build a reusable button component with props for text, color, and a click handler.

File: src/lib/Button.svelte

<script>
  export let label = "Click Me";
  export let color = "blue";
  export let onClick = () => {};
</script>

<style>
  button {
    padding: 0.6em 1.2em;
    border: none;
    border-radius: 0.5em;
    color: white;
    font-weight: bold;
    cursor: pointer;
  }
</style>

<button style="background-color: {color};" on:click={onClick}>
  {label}
</button>

3. Using the Button in a Page

Use your button component in a page or parent component.

File: src/routes/+page.svelte

<script>
  import Button from '$lib/Button.svelte';

  function handleClick() {
    alert("Button clicked!");
  }
</script>

<h1>My Custom UI</h1>
<Button label="Say Hello" color="green" onClick={handleClick} />

4. Adding More Props and Features

Enhance your component with additional props like size, disabled, or custom CSS classes for better flexibility.

<script>
  export let size = "medium";
  export let disabled = false;
  export let className = "";
</script>

<button
  class="{size} {className}"
  disabled={disabled}
  on:click={!disabled && onClick}>
  {label}
</button>

5. Organizing a UI Library

Group your components under src/lib/components/ and create an index.js for centralized exports:

File: src/lib/components/index.js

export { default as Button } from './Button.svelte';
export { default as Card } from './Card.svelte';
// Add more components here

Use Case Scenario

Imagine you're building a dashboard. Using your custom Button and Card components across multiple views ensures visual consistency and faster development time. Components encapsulate styling and behavior, making them reusable and easier to maintain.

Pros and Cons

Pros:

• Lightweight and fast
• Easy to create scoped, reusable UI components
• Built-in reactivity simplifies state handling
• Easy styling and logic encapsulation

Cons:

• Smaller ecosystem compared to React or Vue
• Some third-party UI kits are less mature
• Requires learning curve for some advanced patterns

Summary

Svelte makes it incredibly easy to build and reuse custom UI components, which can evolve into your own component library. The simplicity of its syntax and the power of compile-time optimization give it a unique edge for UI development.

Want to build your own high-performance Svelte extensions? Check out my 19-page PDF guide Svelte Extensions: Build Lightning-Fast Browser Add‑ons Without the Bloat — just $5.

Enjoying the tutorials? Please buy me a coffee.